/* fin123 UI — contained model surface */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:          #F3F6F7;
  --shell-bg:    #EEFAFA;
  --bg-grid:     #FFFFFF;
  --bg-header:   #F7FAFA;
  --bg-panel:    rgba(255, 255, 255, 0.88);
  --bg-input:    #FFFFFF;
  --bg-overlay:  rgba(255, 255, 255, 0.94);
  --surface:     #FFFFFF;
  --gridline:    #EEF3F4;
  --border:      rgba(31, 42, 46, 0.10);
  --fg:          #1F2A2E;
  --fg-dim:      #6B7A80;
  --fg-muted:    #46565C;
  --accent:      #0F8F98;
  --accent-dark: #0B6670;
  --accent-light:#D8F3F5;
  --accent-wash: #EEFAFA;
  --accent-glow: rgba(15, 143, 152, 0.16);
  --accent-dim:  rgba(15, 143, 152, 0.24);
  --sel-fill:    rgba(15, 143, 152, 0.08);
  --sel-border:  rgba(15, 143, 152, 0.34);
  --dirty:       #B7791F;
  --error:       #D6455D;
  --success:     #0F8F98;
  --font:        -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --mono:        'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --surface-2:   #F8F9FA;
  --grid-strong: #DCE9EB;
  --select:      #0F8F98;
  --shadow:      0 26px 80px rgba(20, 90, 95, 0.13);
  --ring:        0 0 0 2px rgba(15, 143, 152, 0.22);
  --motion-fast: 150ms ease-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  font-family: var(--font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 30%),
    linear-gradient(135deg, #E8F0F1 0%, #F3F6F7 48%, #E8F4F4 100%);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────── */

#app {
  display: flex; flex-direction: column;
  width: calc(100% - 36px); height: calc(100% - 36px);
  margin: 18px;
  overflow: hidden;
  border: 1px solid rgba(20, 90, 95, 0.24);
  border-radius: 22px;
  background: linear-gradient(
    90deg,
    #9FC7CC 0%,
    #D7ECEE 42%,
    #EAF6F7 100%
  );
  box-shadow:
    0 24px 64px rgba(20, 90, 95, 0.18),
    0 6px 18px rgba(31, 42, 46, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 0 0 1px rgba(255,255,255,0.38);
  backdrop-filter: blur(18px) saturate(118%);
}

/* ─── Menu bar ─── */

#menubar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(255,255,255,0.22);
  border-bottom: 1px solid rgba(31, 42, 46, 0.10);
  height: 38px; min-height: 38px;
  user-select: none;
}

#menubar-left {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}

#logo {
  font-size: 14px; font-weight: 650;
  color: var(--accent-dark);
  letter-spacing: 0;
  margin-right: 4px;
  flex: 0 0 auto;
}

.model-name {
  color: rgba(31, 42, 46, 0.62);
  font-size: 10.5px;
  font-weight: 560;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-select {
  height: 24px;
  max-width: 175px;
  padding: 1px 22px 1px 9px;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  color: rgba(31, 42, 46, 0.68);
  font: 560 10.5px var(--font);
  outline: none;
}

.model-select:focus {
  border-color: rgba(15, 143, 152, 0.38);
}

#primary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 2px;
}

.product-internal[hidden],
[hidden] {
  display: none !important;
}

.menu-item {
  padding: 4px 10px;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.menu-item:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.32);
}

#menubar-right {
  display: flex; align-items: center; gap: 7px;
  margin-left: auto;
}

#health-chip,
#snap-chip,
#research-nav {
  display: none;
}

.status-chip {
  font-size: 9.5px;
  color: rgba(82, 101, 108, 0.70);
  display: flex; align-items: center; gap: 4px;
}
.status-chip .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.dot-clean { background: var(--success); }
.dot-dirty { background: var(--dirty); }
.dot-sync  { background: var(--fg-dim); }

#btn-run-main {
  padding: 6px 22px;
  background: linear-gradient(135deg, #0B6670, #0A5961);
  color: #FFFFFF;
  border: 1px solid rgba(7, 72, 80, 0.54); border-radius: 999px;
  font-family: var(--font); font-size: 11px; font-weight: 640;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 9px 20px rgba(11, 102, 112, 0.28);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
#btn-run-main:hover {
  background: linear-gradient(135deg, #094E56, #08464D);
  border-color: rgba(7, 72, 80, 0.68);
}
#btn-run-main:active {
  background: linear-gradient(135deg, #08464D, #073D43);
  transform: translateY(1px);
}

.topbar-action {
  padding: 5px 12px;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.44);
  color: rgba(31, 42, 46, 0.72);
  font: 500 11px var(--font);
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.topbar-action:hover:not(:disabled) {
  color: var(--fg);
  border-color: rgba(15, 143, 152, 0.26);
  background: rgba(255,255,255,0.7);
}
.topbar-action:active:not(:disabled) {
  transform: translateY(1px);
}
.topbar-action:disabled {
  opacity: 0.32;
  cursor: default;
}
.secondary-model-action {
  margin-left: 2px;
  margin-right: 3px;
  padding-inline: 10px;
  background: rgba(255,255,255,0.28);
  color: rgba(31, 42, 46, 0.56);
  border-color: rgba(31, 42, 46, 0.08);
}

.new-model-name-field {
  display: block;
  margin-top: 12px;
  margin-bottom: 5px;
  color: rgba(31, 42, 46, 0.62);
  font-size: 11px;
  font-weight: 560;
}

#new-model-name {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(31, 42, 46, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.78);
  color: var(--fg);
  font: 12px var(--font);
  outline: none;
}

#new-model-name:focus {
  border-color: rgba(15, 143, 152, 0.34);
  box-shadow: 0 0 0 3px rgba(15, 143, 152, 0.10);
}
.active-scenario-select {
  height: 22px;
  max-width: 170px;
  margin-left: 2px;
  padding: 1px 22px 1px 8px;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  color: rgba(82, 101, 108, 0.74);
  font-family: var(--font);
  font-size: 9.5px;
  outline: none;
  cursor: pointer;
}
.active-scenario-select:disabled {
  color: rgba(107, 122, 128, 0.50);
  cursor: default;
}
.active-scenario-select:focus {
  border-color: rgba(15, 143, 152, 0.34);
}
.active-scenario-context {
  color: rgba(82, 101, 108, 0.58);
  font-size: 9.5px;
  white-space: nowrap;
  margin-left: -1px;
}

/* ─── Research nav ─── */

.research-nav {
  display: flex; align-items: center; gap: 2px;
}
.rn-btn {
  width: 22px; height: 20px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 3px;
  font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s, border-color 0.12s;
}
.rn-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-muted); }
.rn-btn:disabled { opacity: 0.3; cursor: default; }
.rn-counter {
  font-size: 10px; color: var(--fg-dim);
  min-width: 28px; text-align: center;
  font-family: var(--font);
}
.rn-resumed {
  font-size: 10px; color: var(--fg-dim);
  opacity: 1; transition: opacity 1.5s ease 3s;
}
.rn-resumed.fade { opacity: 0; }

/* ─── Formula bar ─── */

#formulabar {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.36);
  border-bottom: 1px solid rgba(31, 42, 46, 0.06);
  height: 34px; min-height: 34px;
  padding: 0 12px;
}

#cell-addr {
  width: 56px; text-align: center;
  background: transparent; color: var(--fg-dim);
  border: none; border-right: 1px solid rgba(31, 42, 46, 0.10);
  padding: 0 6px;
  font-family: var(--mono); font-size: 11px;
  outline: none;
}

.cell-mark-status {
  min-width: 74px;
  padding: 0 8px;
  border-right: 1px solid rgba(31, 42, 46, 0.10);
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 28px;
  white-space: nowrap;
}
.cell-mark-status.mark-assumption { color: var(--accent-dark); }
.cell-mark-status.mark-output { color: var(--accent); }

.mark-btn {
  height: 21px;
  margin-left: 3px;
  padding: 0 7px;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  color: rgba(70, 86, 92, 0.76);
  font-family: var(--font);
  font-size: 9.5px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.mark-btn:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--accent);
  background: rgba(255,255,255,0.76);
}
.mark-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.mark-btn:disabled {
  opacity: 0.26;
  cursor: default;
  background: rgba(255,255,255,0.28);
  border-color: rgba(31, 42, 46, 0.08);
  color: rgba(107, 122, 128, 0.54);
}

.llm-open-definition[hidden] {
  display: none;
}

.llm-open-definition {
  color: var(--accent-dark);
  border-color: rgba(15, 143, 152, 0.24);
  background: rgba(216, 243, 245, 0.48);
}

.llm-open-definition:hover:not(:disabled) {
  color: var(--accent-dark);
  border-color: rgba(15, 143, 152, 0.42);
  background: rgba(216, 243, 245, 0.72);
}

.scenario-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  border-left: 1px solid rgba(31, 42, 46, 0.10);
}
.scenario-controls.hidden {
  display: none;
}
.scenario-label,
.scenario-state-label {
  color: rgba(107, 122, 128, 0.78);
  font-size: 10px;
  white-space: nowrap;
}
#scenario-select {
  max-width: 150px;
  height: 22px;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 6px;
  padding: 0 4px;
  font-family: var(--font);
  font-size: 10px;
}
.scenario-nav-btn {
  height: 22px;
  min-width: 22px;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 6px;
  background: rgba(255,255,255,0.42);
  color: var(--fg-muted);
  font-family: var(--font);
  font-size: 10px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.scenario-nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.76);
  border-color: rgba(15, 143, 152, 0.26);
}
.scenario-nav-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.scenario-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.results-surface {
  min-height: calc(100% - 16px);
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 18px 16px 22px;
  border: 1px solid rgba(31, 42, 46, 0.16);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  box-shadow:
    0 14px 26px rgba(20, 90, 95, 0.11),
    0 2px 6px rgba(31, 42, 46, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.75);
  animation: surfaceIn 150ms ease-out;
  transition: background var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.results-title {
  color: var(--fg);
  font-size: 13px;
  font-weight: 680;
  margin-bottom: 10px;
}
.results-status {
  color: var(--fg-dim);
  font-size: 11px;
  margin-bottom: 12px;
}
.results-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(31,42,46,0.08);
  font-size: 10px;
}
.results-row:first-child {
  border-top: none;
}
.results-output {
  color: var(--fg-muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.results-value {
  color: var(--fg);
  font-size: 11px;
  font-weight: 590;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.results-empty {
  color: var(--fg-dim);
  font-size: 11.5px;
  line-height: 1.45;
  padding: 10px 0 2px;
}

.results-history-toggle {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font-family: var(--font);
  font-size: 10.5px;
  cursor: pointer;
}

.results-history-toggle:hover {
  color: var(--accent);
}

.run-history-list {
  margin-top: 10px;
  border-top: 1px solid rgba(31,42,46,0.08);
}

.run-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31,42,46,0.08);
}

.run-history-main,
.run-history-audit {
  border: 0;
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
}

.run-history-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  text-align: left;
  color: var(--fg-dim);
  font-size: 10px;
}

.run-history-main strong {
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 590;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-history-audit {
  padding: 0;
  color: var(--accent-dark);
  font-size: 10px;
  white-space: nowrap;
}

.run-history-main:hover strong,
.run-history-audit:hover {
  color: var(--accent);
}

.results-table {
  display: grid;
  gap: 0;
  overflow-x: auto;
  font-size: 10px;
}
.results-head,
.results-scenario {
  color: var(--fg-muted);
  border-bottom: 1px solid rgba(31,42,46,0.08);
  padding: 5px 6px 5px 0;
  white-space: nowrap;
}
.results-head {
  color: var(--fg-dim);
  font-weight: 560;
}
.results-scenario {
  color: var(--fg);
}
.results-sub {
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 400;
}
.results-table .results-value {
  border-bottom: 1px solid rgba(31,42,46,0.08);
  padding: 5px 0 5px 6px;
}

.audit-link {
  margin-top: 8px;
  width: 100%;
}

#audit-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 30, 0.38);
}

#audit-overlay.visible:not([hidden]) {
  display: flex;
}

#audit-overlay.visible #audit-modal {
  animation: modalIn 150ms ease-out;
}

#llm-formula-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 30, 0.28);
}

#llm-formula-overlay.visible:not([hidden]) {
  display: flex;
}

#llm-formula-overlay.visible #llm-formula-modal {
  animation: modalIn 150ms ease-out;
}

#new-model-overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 30, 0.28);
}

#new-model-overlay.visible:not([hidden]) {
  display: flex;
}

#schedule-run-overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 30, 0.28);
}

#schedule-run-overlay.visible:not([hidden]) {
  display: flex;
}

#schedule-run-overlay.visible #schedule-run-modal {
  animation: modalIn 150ms ease-out;
}

#new-model-overlay.visible #new-model-modal {
  animation: modalIn 150ms ease-out;
}

#new-model-modal,
#schedule-run-modal {
  width: min(420px, calc(100vw - 36px));
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 14px;
  background: rgba(252, 253, 253, 0.97);
  box-shadow: 0 22px 70px rgba(24, 31, 38, 0.22);
  padding: 18px;
}

#new-model-modal h2,
#schedule-run-modal h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
}

#new-model-modal p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.5;
}

.schedule-copy {
  margin: 8px 0 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
}

.schedule-adjustments {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
}

.schedule-adjustments label {
  display: grid;
  gap: 4px;
  flex: 1 1 0;
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 500;
}

.schedule-adjustments input,
.schedule-adjustments select {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--fg);
  font-size: 11px;
  padding: 6px 7px;
}

.schedule-summary {
  margin-top: 6px;
  border-bottom: 1px solid rgba(31, 42, 46, 0.08);
  padding: 8px 0 12px;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 620;
}

#schedule-scenarios {
  min-height: 66px;
}

.scheduled-list {
  margin-top: 12px;
  max-height: 120px;
  overflow: auto;
  color: var(--fg-muted);
  font-size: 11px;
}

.scheduled-list-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid rgba(31, 42, 46, 0.08);
}

.new-model-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.btn-primary {
  border-color: rgba(52, 139, 180, 0.42);
  background: linear-gradient(135deg, rgba(72, 148, 190, 0.92), rgba(70, 160, 133, 0.9));
  color: #fff;
  box-shadow: 0 8px 18px rgba(48, 122, 151, 0.16);
}

#llm-formula-modal {
  width: min(620px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 14px;
  background: rgba(252, 253, 253, 0.97);
  box-shadow: 0 22px 70px rgba(24, 31, 38, 0.22);
  padding: 14px;
}

.llm-modal-header,
#llm-formula-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.llm-modal-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.llm-field {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.llm-field label {
  color: var(--fg-dim);
  font-size: 10px;
}

#llm-formula-name,
#llm-output-type,
.llm-input-name,
.llm-input-ref,
#llm-definition-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--fg);
  font: 11px var(--font);
  padding: 7px 8px;
}

#llm-definition-text {
  min-height: 110px;
  resize: vertical;
}

.llm-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}

.llm-input-name {
  color: var(--fg);
  font-weight: 540;
}

.llm-input-ref {
  color: var(--fg-dim);
}

.llm-execution-hint {
  margin-top: 11px;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
}

.audit-inputs {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) 84px;
  gap: 6px 10px;
  margin: 6px 0 10px;
  font-size: 11px;
}

.audit-input-head {
  color: var(--fg-muted);
  font-size: 10px;
  text-transform: uppercase;
}

#llm-preview-result {
  margin-top: 12px;
  color: var(--fg-muted);
  font-size: 11px;
}

#llm-formula-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

#audit-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  background: rgba(252, 253, 253, 0.96);
  box-shadow: 0 22px 70px rgba(24, 31, 38, 0.26);
}

#audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

#audit-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

#audit-body {
  overflow: auto;
  padding: 14px 16px 18px;
  font-size: 12px;
  color: var(--fg);
}

.audit-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}

.audit-section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.audit-section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
}

.audit-kv {
  display: grid;
  grid-template-columns: minmax(130px, 180px) 1fr;
  gap: 6px 12px;
}

.audit-key {
  color: var(--fg-dim);
}

.audit-pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: rgba(238, 241, 244, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin: 6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

#fx-label {
  padding: 0 8px;
  color: var(--fg-dim);
  font-size: 10px; font-style: italic;
}

#formula-bar {
  flex: 1;
  background: transparent; color: var(--fg);
  border: none;
  padding: 0 8px;
  font-family: var(--mono); font-size: 12px;
  outline: none;
  height: 100%;
}
#formula-bar:focus {
  background: var(--bg-input);
  box-shadow: var(--ring);
}

/* ─── Main area ─── */

#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 400px);
  flex: 1;
  overflow: hidden;
  gap: 10px;
  margin: 8px 12px 0;
  padding: 9px;
  position: relative;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(232, 247, 248, 0.92), rgba(250, 253, 253, 0.84)),
    rgba(255,255,255,0.64);
  box-shadow:
    0 18px 42px rgba(20, 90, 95, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.76);
}
#main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(15, 143, 152, 0.24) 0%,
    rgba(216, 243, 245, 0.18) 48%,
    rgba(11, 102, 112, 0.20) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
#main.panel-collapsed {
  grid-template-columns: 1fr 36px;
}

/* ─── Grid area ─── */

#grid-container {
  flex: 1; position: relative; overflow: hidden;
  cursor: cell;
  background: #FFFFFF;
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 18px rgba(20, 90, 95, 0.035),
    0 12px 30px rgba(20, 90, 95, 0.09);
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast);
}
#grid-container:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 0 0 2px rgba(15, 143, 152, 0.08),
    inset 0 0 18px rgba(20, 90, 95, 0.035),
    0 12px 30px rgba(20, 90, 95, 0.09);
}
#grid-canvas {
  display: block;
  border-radius: 10px;
  outline: none;
}

#cell-editor {
  display: none; position: absolute;
  background: var(--bg-input); color: var(--fg);
  border: 2px solid var(--select);
  padding: 1px 4px;
  font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
  outline: none; z-index: 10;
}

/* ─── Side panel ─── */

#side-panel {
  background: transparent;
  border: 0;
  border-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
  box-shadow: none;
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
#side-panel.collapsed {
  overflow: hidden;
}
#side-panel.collapsed > *:not(.panel-rail-label) {
  display: none;
}
.panel-rail-label {
  display: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--fg-dim);
  font-size: 10px;
  padding: 8px 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.4px;
}
#side-panel.collapsed .panel-rail-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.panel-section {
  padding: 16px 14px;
  border-bottom: 0;
}
.panel-section:last-child {
  border-bottom: none;
}
.panel-section h3 {
  font-size: 10px; text-transform: none;
  color: rgba(116, 123, 132, 0.76); margin-bottom: 8px;
  letter-spacing: 0; font-weight: 520;
}

/* Action buttons in panel */
.panel-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.btn {
  padding: 6px 11px;
  background: rgba(255,255,255,0.36);
  color: var(--fg-muted);
  border: 1px solid rgba(221, 225, 230, 0.72);
  border-radius: 999px;
  font-family: var(--font); font-size: 10px;
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.btn:hover {
  color: var(--fg);
  border-color: rgba(116, 123, 132, 0.58);
  background: rgba(255,255,255,0.58);
}
.btn:active {
  background: rgba(255,255,255,0.74);
  transform: translateY(1px);
}

/* Data lists */
.data-list {
  overflow-y: auto;
  font-size: 11px; line-height: 1.65;
}
.data-list .item {
  padding: 3px 0;
  border-bottom: 1px solid rgba(240, 242, 244, 0.72);
  display: flex; justify-content: space-between; gap: 8px;
}
.data-list .item .label {
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-list .item .val {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Table preview */
.table-preview {
  width: 100%; overflow: auto; font-size: 10px;
}
.table-preview table { border-collapse: collapse; width: 100%; }
.table-preview th, .table-preview td {
  padding: 2px 6px; text-align: left;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.table-preview th {
  color: var(--accent); background: var(--bg-header);
  position: sticky; top: 0; font-weight: 500;
}
.table-preview td { color: var(--fg-muted); }

/* ─── Tabs ─── */
.tab-bar {
  display: flex; gap: 3px;
  border-bottom: 1px solid rgba(221, 225, 230, 0.48);
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}
.tab-bar::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}
.tab-bar .tab {
  padding: 5px 9px; font-size: 10px; cursor: pointer;
  color: var(--fg-dim);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  flex-shrink: 0; white-space: nowrap;
}
.tab-bar .tab:hover {
  color: var(--fg-muted);
  background: rgba(255,255,255,0.38);
}
.tab-bar .tab.active {
  color: var(--accent);
  background: rgba(216, 243, 245, 0.52);
  border-color: rgba(15, 143, 152, 0.16);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Bottom status bar ─── */

#bottombar {
  padding: 0 16px;
  background: transparent;
  border-top: 0;
  font-size: 9.5px; color: rgba(116, 123, 132, 0.22);
  display: flex; justify-content: space-between; align-items: center;
  height: 15px; min-height: 15px;
}
#log-msg {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#log-msg.error { color: var(--error); }
#log-msg.success { color: var(--success); }
#pos-info { color: rgba(116, 123, 132, 0.21); margin-left: 10px; }

/* ─── Keyboard help overlay ─── */

#kb-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--bg-overlay);
  z-index: 100;
  justify-content: center; align-items: center;
}
#kb-overlay.visible { display: flex; }

#kb-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 420px; width: 90%;
  color: var(--fg);
}
#kb-modal h2 {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
#kb-modal table { width: 100%; border-collapse: collapse; }
#kb-modal td {
  padding: 3px 0; font-size: 11px;
  border-bottom: 1px solid var(--gridline);
}
#kb-modal td:first-child {
  color: var(--fg-muted); width: 50%;
}
#kb-modal td:last-child {
  color: var(--fg-dim);
}
kbd {
  background: var(--bg-grid);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font); font-size: 10px;
  color: var(--fg);
}
#kb-dismiss {
  margin-top: 14px; text-align: center;
  color: var(--fg-dim); font-size: 10px;
}

@keyframes surfaceIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ─── Datasheet status ─── */

.ds-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.ds-item .dot { flex-shrink: 0; }
.dot-ok    { background: var(--success); }
.dot-stale { background: var(--dirty); }
.dot-fail  { background: var(--error); }
.dot-unknown { background: var(--fg-dim); }
.ds-item .ds-name {
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.ds-item .ds-info {
  color: var(--fg-dim); font-size: 10px;
  white-space: nowrap;
}
.ds-item .ds-sync-btn {
  padding: 1px 6px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font); font-size: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.ds-item .ds-sync-btn:hover {
  color: var(--fg); border-color: var(--fg-dim);
}

/* ─── Error list ─── */

.err-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
  cursor: pointer;
}
.err-item:hover { background: rgba(255,255,255,0.03); }
.err-item .err-addr {
  color: var(--error);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 36px;
}
.err-item .err-msg {
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Sheet tabs ─── */

#sheet-tabs {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.42);
  border-top: 1px solid rgba(31, 42, 46, 0.06);
  height: 24px; min-height: 24px;
  padding: 0 9px;
  user-select: none;
  overflow-x: auto;
  overflow-y: hidden;
}
#sheet-tab-list {
  display: flex; align-items: center; gap: 0;
  flex: 1;
  overflow-x: auto;
}
.sheet-tab {
  padding: 2px 11px;
  font-size: 10px;
  color: rgba(107, 122, 128, 0.72);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.sheet-tab:hover {
  color: var(--fg-muted);
  background: rgba(255,255,255,0.38);
}
.sheet-tab.active {
  color: var(--accent-dark);
  background: rgba(216, 243, 245, 0.55);
  border-color: rgba(15, 143, 152, 0.16);
}
#btn-add-sheet {
  padding: 2px 8px;
  background: rgba(255,255,255,0.3);
  color: var(--fg-dim);
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  font-family: var(--font); font-size: 12px;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
}
#btn-add-sheet:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

/* ─── Color dot ─── */

#color-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: none;
  margin: 0 4px;
  flex-shrink: 0;
}
#color-dot.visible {
  display: inline-block;
}

/* ─── Named ranges ─── */

.name-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.name-item .name-id {
  color: var(--accent);
  font-weight: 500;
  min-width: 60px;
}
.name-item .name-range {
  color: var(--fg-muted);
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.name-item .name-del {
  padding: 0 4px;
  background: transparent;
  color: var(--fg-dim);
  border: none;
  font-family: var(--font); font-size: 10px;
  cursor: pointer;
}
.name-item .name-del:hover { color: var(--error); }

/* ─── Version select ─── */

.version-select {
  background: rgba(255,255,255,0.34);
  color: rgba(82, 101, 108, 0.70);
  border: 1px solid rgba(31, 42, 46, 0.10);
  border-radius: 999px;
  padding: 1px 4px;
  font-family: var(--font);
  font-size: 9.5px;
  outline: none;
  max-width: 90px;
  cursor: pointer;
}
.version-select:focus {
  border-color: var(--accent);
}

/* ─── Read-only banner ─── */

.readonly-banner {
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid var(--dirty);
  color: var(--dirty);
  font-size: 11px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.readonly-banner .btn {
  color: var(--dirty);
  border-color: var(--dirty);
  font-size: 10px;
  padding: 2px 8px;
}

/* ─── Clear cache overlay ─── */

#cc-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--bg-overlay);
  z-index: 100;
  justify-content: center; align-items: center;
}
#cc-overlay.visible { display: flex; }

#cc-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 380px; width: 90%;
  color: var(--fg);
}
#cc-modal h2 {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.cc-stat {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.cc-stat .label { color: var(--fg-muted); }
.cc-stat .val { color: var(--fg); font-variant-numeric: tabular-nums; }
#cc-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px;
}

/* ─── Import XLSX overlay ─── */

#import-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--bg-overlay);
  z-index: 100;
  justify-content: center; align-items: center;
}
#import-overlay.visible { display: flex; }

#import-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 420px; width: 90%;
  color: var(--fg);
}
#import-modal h2 {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.import-field {
  margin-bottom: 10px;
}
.import-field label {
  display: block;
  font-size: 10px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.import-file-row {
  display: flex; align-items: center; gap: 8px;
}
#import-file-name {
  color: var(--fg-muted);
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
#import-project-name {
  width: 100%;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--font);
  font-size: 11px;
  outline: none;
}
#import-project-name:focus {
  border-color: var(--accent);
}
.import-dest {
  font-size: 10px;
  color: var(--fg-dim);
}
#import-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px;
}
#import-submit:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* ─── Health ─── */

.health-error { color: var(--error); }
.health-warning { color: var(--dirty); }
.health-info { color: var(--fg-dim); }
.dot-error { background: var(--error); }
.dot-warning { background: var(--dirty); }
.dot-ok { background: var(--success); }

.health-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.health-item .severity-icon {
  font-size: 10px;
  flex-shrink: 0;
}
.health-item .health-msg {
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.health-item .health-target {
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.health-item .health-target:hover { text-decoration: underline; }

/* ─── Import summary ─── */

#import-summary {
  font-size: 11px;
  padding: 4px 0;
}
#import-summary .import-stat {
  display: flex; justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid var(--gridline);
}
#import-summary .import-stat .label { color: var(--fg-muted); }
#import-summary .import-stat .val { color: var(--fg); }

/* ─── Import issue list ─── */

.import-issue-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.import-issue-item:hover { background: rgba(255,255,255,0.03); }
.import-issue-item .import-issue-loc {
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 70px;
}
.import-issue-item .import-issue-loc:hover { text-decoration: underline; }
.import-issue-item .import-issue-formula {
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
  font-size: 10px;
}
.import-issue-item .btn {
  padding: 1px 6px;
  font-size: 9px;
  flex-shrink: 0;
}

/* ─── Import filter bar ─── */

.import-filter-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.import-filter-bar .btn {
  padding: 2px 8px;
  font-size: 9px;
}
.import-filter-bar .btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(74, 158, 245, 0.08);
}

/* ─── Prod mode banner ─── */

.prod-banner {
  background: rgba(74, 158, 245, 0.10);
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  padding: 3px 12px;
  display: none;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}
.prod-banner.visible { display: flex; }
.prod-banner .prod-label {
  font-weight: 600;
  text-transform: uppercase;
}

/* ─── Checks tab ─── */

.check-section {
  margin-bottom: 10px;
}
.check-section h4 {
  font-size: 9px; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 4px;
  letter-spacing: 0.8px; font-weight: 500;
}
.check-pass { color: var(--success); }
.check-fail { color: var(--error); }
.check-warn { color: var(--dirty); }
.check-none { color: var(--fg-dim); }
.check-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 11px;
}
.check-item .check-icon { flex-shrink: 0; font-size: 10px; }
.check-item .check-label {
  color: var(--fg-muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.check-item .check-value {
  color: var(--fg); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Logs tab ─── */

.log-controls {
  display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap;
}
.log-controls select {
  background: var(--bg-input);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: var(--font);
  font-size: 10px;
  outline: none;
}
.log-entry {
  padding: 2px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 10px;
  line-height: 1.5;
}
.log-entry .log-ts { color: var(--fg-dim); }
.log-entry .log-level { font-weight: 500; }
.log-entry .log-level-info { color: var(--fg-muted); }
.log-entry .log-level-warning { color: var(--dirty); }
.log-entry .log-level-error { color: var(--error); }
.log-entry .log-type { color: var(--accent); }
.log-entry .log-msg { color: var(--fg-muted); }

/* ─── Context menu ─── */

#grid-context-menu {
  display: none;
  position: absolute;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  z-index: 20;
  min-width: 160px;
  box-shadow: var(--shadow);
}
#grid-context-menu.visible { display: block; }

.ctx-item {
  padding: 5px 14px;
  font-size: 11px;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ctx-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--fg);
}
.ctx-item.disabled {
  opacity: 0.45;
  cursor: default;
}
.ctx-item.disabled:hover {
  background: transparent;
  color: var(--fg-muted);
}
.ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}

/* ─── Incident cards ─── */

.incident-card {
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 3px;
  border-left: 3px solid var(--border);
  background: rgba(255,255,255,0.02);
  font-size: 11px;
}
.incident-card.severity-error { border-left-color: var(--error); }
.incident-card.severity-warning { border-left-color: var(--dirty); }
.incident-card.severity-info { border-left-color: var(--fg-dim); }

.incident-card .incident-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.incident-card .incident-icon { font-size: 10px; flex-shrink: 0; }
.incident-card .incident-title {
  color: var(--fg);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.incident-card .incident-detail {
  color: var(--fg-muted);
  font-size: 10px;
  line-height: 1.5;
}
.incident-card .incident-loc {
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  margin-top: 2px;
}
.incident-card .incident-loc:hover { text-decoration: underline; }
.incident-card .incident-action {
  color: var(--fg-dim);
  font-size: 9px;
  font-style: italic;
  margin-top: 2px;
}

.incidents-summary {
  display: flex; gap: 10px;
  padding: 4px 0 6px 0;
  font-size: 10px;
  border-bottom: 1px solid var(--gridline);
  margin-bottom: 6px;
}
.incidents-summary .cnt { font-variant-numeric: tabular-nums; }
.incidents-summary .cnt-error { color: var(--error); }
.incidents-summary .cnt-warning { color: var(--dirty); }
.incidents-summary .cnt-info { color: var(--fg-dim); }

/* ─── Pipeline button ─── */

.btn-pipeline, .btn-pipeline-menu {
  background: rgba(74, 158, 245, 0.14) !important;
  border-color: rgba(74, 158, 245, 0.35) !important;
  color: var(--accent) !important;
}
.btn-pipeline:hover, .btn-pipeline-menu:hover {
  background: rgba(74, 158, 245, 0.22) !important;
  color: #7AB8F7 !important;
}

/* ─── Status ribbon ─── */

#status-ribbon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: 22px;
  min-height: 22px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
  overflow-x: auto;
  scrollbar-width: none;
}
#status-ribbon::-webkit-scrollbar { display: none; }

.sr-pill {
  padding: 1px 8px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  color: var(--fg-dim);
  transition: color 0.12s, background 0.12s;
}
.sr-pill:hover {
  background: rgba(255,255,255,0.08);
  color: var(--fg-muted);
}

.sr-pill.sr-state-dirty {
  color: var(--dirty);
  background: rgba(251, 191, 36, 0.10);
}
.sr-pill.sr-state-committed {
  color: var(--success);
  background: rgba(52, 211, 153, 0.08);
}
.sr-pill.sr-state-fresh {
  color: var(--success);
}
.sr-pill.sr-state-stale {
  color: var(--dirty);
  background: rgba(251, 191, 36, 0.08);
}
.sr-pill.sr-state-fail {
  color: var(--error);
  background: rgba(251, 113, 133, 0.08);
}
.sr-pill.sr-state-unknown {
  color: var(--fg-dim);
}
.sr-pill.sr-state-pass {
  color: var(--success);
  background: rgba(52, 211, 153, 0.08);
}
.sr-pill.sr-state-none {
  color: var(--fg-dim);
}

.sr-open-table {
  color: var(--accent) !important;
  background: rgba(74, 158, 245, 0.10) !important;
  cursor: pointer;
}
.sr-open-table:hover {
  background: rgba(74, 158, 245, 0.18) !important;
}

/* ─── Scrollbar ─── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grid-strong); }

/* ─── Table view sort/filter ─── */

.view-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 6px 0;
  border-bottom: 1px solid var(--gridline);
  margin-bottom: 4px;
}
.view-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9px;
  font-family: var(--font);
  white-space: nowrap;
  cursor: default;
}
.view-chip-sort {
  color: var(--select);
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.view-chip-filter {
  color: var(--accent);
  background: rgba(74, 158, 245, 0.10);
  border: 1px solid rgba(74, 158, 245, 0.25);
}
.view-chip-clear {
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  cursor: pointer;
}
.view-chip-clear:hover {
  color: var(--fg-muted);
  background: rgba(255, 255, 255, 0.08);
}
.view-chip-x {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.6;
}
.view-chip-x:hover { opacity: 1; }

/* Table header states */
.tv-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.12s, background 0.12s;
}
.tv-th:hover {
  background: rgba(96, 165, 250, 0.08) !important;
}
.tv-th-sorted {
  color: var(--select) !important;
  background: rgba(96, 165, 250, 0.06) !important;
}
.tv-filter-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 8px;
  font-weight: 600;
  border-radius: 2px;
  padding: 0 3px;
  margin-left: 3px;
  vertical-align: middle;
}

/* Filter panel */
.view-filter-panel {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  z-index: 200;
  min-width: 240px;
  max-width: 280px;
  box-shadow: var(--shadow);
  font-size: 11px;
}
.vfp-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gridline);
}
.vfp-section {
  margin-bottom: 8px;
}
.vfp-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
  margin-bottom: 3px;
}
.vfp-row {
  display: flex; gap: 4px; align-items: center;
}
.vfp-select {
  background: var(--bg-input);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: var(--font);
  font-size: 10px;
  outline: none;
}
.vfp-select:focus { border-color: var(--accent); }
.vfp-input {
  flex: 1;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 10px;
  outline: none;
  min-width: 0;
}
.vfp-input:focus { border-color: var(--accent); }
.vfp-apply {
  padding: 2px 8px !important;
  font-size: 9px !important;
  flex-shrink: 0;
}
.vfp-values {
  max-height: 140px;
  overflow-y: auto;
  padding: 2px 0;
  margin-bottom: 4px;
}
.vfp-val-label {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 0;
  color: var(--fg-muted);
  font-size: 10px;
  cursor: pointer;
}
.vfp-val-label:hover { color: var(--fg); }
.vfp-val-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 12px; height: 12px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════
   Mode Switcher
   ═════════════════════════════════════════════ */

#mode-switcher {
  display: flex;
  gap: 1px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
}
.mode-btn {
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: none;
  background: var(--bg-panel);
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.mode-btn:hover {
  color: var(--fg-muted);
  background: rgba(255,255,255,0.04);
}
.mode-btn.active {
  color: var(--accent);
  background: rgba(74, 158, 245, 0.12);
}

/* ═════════════════════════════════════════════
   Terminal Panel
   ═════════════════════════════════════════════ */

#terminal-panel {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 2px solid var(--grid-strong);
  min-height: 0;
  overflow: hidden;
}

#terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 26px;
  min-height: 26px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.terminal-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--fg-muted);
  font-weight: 600;
}
.terminal-collapse-btn {
  width: 16px;
  height: 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.terminal-collapse-btn::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-top: 1px solid var(--fg-dim);
}
.terminal-collapse-btn:hover {
  border-color: var(--fg-dim);
}

#terminal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

#terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-muted);
}

#terminal-input-row {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.terminal-prompt {
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}
#terminal-input {
  flex: 1;
  background: transparent;
  color: var(--fg);
  border: none;
  padding: 2px 0;
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  caret-color: var(--accent);
}
#terminal-input::placeholder {
  color: var(--fg-dim);
  opacity: 0.7;
}

/* Terminal output block types */
.term-block { margin-bottom: 6px; }
.term-echo {
  color: var(--fg-dim);
  font-size: 10px;
}
.term-echo::before {
  content: 'fin123> ';
  color: var(--accent);
  font-weight: 600;
}
.term-status {
  padding: 4px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(74, 158, 245, 0.05);
}
.term-status .term-status-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.term-status .term-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
}
.term-status .term-status-key { color: var(--fg-dim); }
.term-status .term-status-val { color: var(--fg); font-variant-numeric: tabular-nums; }
.term-error {
  padding: 4px 8px;
  border-left: 3px solid var(--error);
  background: rgba(251, 113, 133, 0.05);
  color: var(--error);
}
.term-success {
  padding: 4px 8px;
  border-left: 3px solid var(--success);
  background: rgba(52, 211, 153, 0.05);
  color: var(--success);
}
.term-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin: 2px 0;
}
.term-table th {
  text-align: left;
  padding: 2px 8px 2px 0;
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.term-table td {
  padding: 2px 8px 2px 0;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--gridline);
}
.term-list-item {
  padding: 1px 0;
  color: var(--fg-muted);
}
.term-list-item .term-list-key {
  color: var(--accent);
  font-weight: 500;
}
.term-card {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
  margin: 2px 0;
}
.term-card .term-card-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 2px;
}
.term-card .term-card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
  font-size: 10px;
}
.term-card .term-card-key { color: var(--fg-dim); }
.term-card .term-card-val { color: var(--fg); font-variant-numeric: tabular-nums; }
.term-diff-header {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  margin: 4px 0 2px;
}
.term-diff-row {
  display: flex;
  gap: 8px;
  padding: 1px 0;
  font-size: 10px;
}
.term-diff-name { color: var(--fg-muted); min-width: 140px; }
.term-diff-old { color: var(--error); }
.term-diff-arrow { color: var(--fg-dim); }
.term-diff-new { color: var(--success); }
.term-help-group {
  margin-bottom: 6px;
}
.term-help-group-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.term-help-row {
  display: flex;
  gap: 12px;
  padding: 1px 0;
  font-size: 10px;
}
.term-help-cmd {
  color: var(--fg);
  font-weight: 500;
  min-width: 200px;
  flex-shrink: 0;
}
.term-help-desc { color: var(--fg-dim); }
.term-text { color: var(--fg-muted); }

/* ── Section headers within output ── */
.term-section {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-dim);
  margin: 8px 0 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gridline);
}

/* ── Compare container ── */
.term-compare {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.01);
  margin: 2px 0;
}
.term-compare-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.term-compare-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
}
.term-compare-meta {
  color: var(--fg-dim);
  font-size: 9px;
}
.term-compare-section {
  margin-bottom: 6px;
}
.term-compare-section-title {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
.term-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin: 2px 0;
}
.term-diff-table th {
  text-align: left;
  padding: 2px 8px 2px 0;
  color: var(--fg-dim);
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.term-diff-table td {
  padding: 2px 8px 2px 0;
  border-bottom: 1px solid var(--gridline);
  font-variant-numeric: tabular-nums;
}
.term-diff-table td:first-child {
  color: var(--fg-muted);
  font-weight: 500;
}
.term-diff-table .val-old { color: var(--error); }
.term-diff-table .val-new { color: var(--success); }
.term-diff-table .val-arrow { color: var(--fg-dim); padding: 0 2px; }
.term-no-diff {
  color: var(--fg-dim);
  font-size: 10px;
  font-style: italic;
  padding: 2px 0;
}

/* ── Sweep summary ── */
.term-sweep-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 10px;
}
.term-sweep-stat {
  display: flex;
  gap: 4px;
}
.term-sweep-stat-label { color: var(--fg-dim); }
.term-sweep-stat-val { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Improved table with alternating rows ── */
.term-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}
.term-table td.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Scenario identity badge ── */
.term-scenario-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(74, 158, 245, 0.10);
  color: var(--accent);
  border: 1px solid rgba(74, 158, 245, 0.25);
}
.term-run-id {
  font-family: var(--font);
  font-size: 9px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ── AI explanation and draft blocks ── */
.term-ai-explain {
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 4px;
  padding: 6px 8px;
  background: rgba(168, 85, 247, 0.03);
  margin: 2px 0;
}
.term-ai-explain .term-ai-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}
.term-ai-explain .term-ai-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c084fc;
}
.term-ai-explain .term-ai-target {
  font-size: 10px;
  color: var(--fg);
  font-weight: 500;
}
.term-ai-explain .term-ai-meta {
  font-size: 9px;
  color: var(--fg-dim);
  margin-left: auto;
}
.term-ai-body {
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.6;
  padding: 4px 0 2px;
}
.term-ai-footer {
  font-size: 9px;
  color: var(--fg-dim);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid rgba(168, 85, 247, 0.10);
  margin-top: 4px;
}
.term-draft-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(168, 85, 247, 0.10);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.term-status-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.term-status-badge.status-draft { background: rgba(142, 131, 118, 0.15); color: var(--fg-dim); }
.term-status-badge.status-validated { background: rgba(52, 211, 153, 0.12); color: var(--success); }
.term-status-badge.status-applied { background: rgba(96, 165, 250, 0.12); color: var(--select); }
.term-status-badge.status-rejected { background: rgba(251, 113, 133, 0.12); color: var(--error); }
.term-status-badge.status-validation_failed { background: rgba(251, 113, 133, 0.12); color: var(--error); }
.term-code-block {
  font-family: var(--font);
  font-size: 10px;
  line-height: 1.5;
  color: var(--fg-muted);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  margin: 4px 0;
  white-space: pre;
  tab-size: 4;
}
.term-next-steps {
  padding: 4px 8px;
  border-left: 2px solid var(--fg-dim);
  margin: 4px 0;
  font-size: 10px;
}
.term-next-steps .term-step {
  padding: 1px 0;
  color: var(--fg-muted);
}
.term-next-steps .term-step-cmd {
  color: var(--fg);
  font-weight: 500;
}
.term-next-steps .term-step-desc {
  color: var(--fg-dim);
}
.term-validation-result {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 2px 0;
}
.term-validation-result.valid {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.03);
}
.term-validation-result.invalid {
  border-color: rgba(251, 113, 133, 0.3);
  background: rgba(251, 113, 133, 0.03);
}
.term-validation-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 10px;
}
.term-validation-status {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.term-validation-status.pass { color: var(--success); }
.term-validation-status.fail { color: var(--error); }
.term-violation-item {
  padding: 1px 0;
  font-size: 10px;
}
.term-violation-item .viol-field { color: var(--fg-dim); font-weight: 500; }
.term-violation-item .viol-reason { color: var(--fg-muted); }
.term-violation-item.viol-error .viol-field { color: var(--error); }
.term-violation-item.viol-warning .viol-field { color: var(--dirty); }

/* ── Execution progress ── */
.term-progress {
  padding: 3px 8px;
  background: rgba(96, 165, 250, 0.05);
  border-left: 3px solid var(--select);
  font-size: 10px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s;
}
.term-progress .term-progress-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--gridline);
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  overflow: hidden;
}
.term-progress .term-progress-fill {
  height: 100%;
  background: var(--select);
  border-radius: 2px;
  transition: width 0.2s;
}

/* ── Grid matrix table ── */
.term-grid-matrix {
  border-collapse: collapse;
  font-size: 10px;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.term-grid-matrix th {
  padding: 3px 8px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.term-grid-matrix th:first-child {
  text-align: left;
  color: var(--fg-dim);
  border-right: 1px solid var(--border);
  font-size: 9px;
}
.term-grid-matrix th:not(:first-child) {
  text-align: right;
  color: var(--accent);
}
.term-grid-matrix td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--gridline);
}
.term-grid-matrix td:first-child {
  font-weight: 500;
  color: var(--accent);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.term-grid-matrix td:not(:first-child) {
  text-align: right;
  color: var(--fg);
}
.term-grid-matrix td.grid-err {
  color: var(--error);
  font-style: italic;
}
.term-grid-matrix tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}

/* ═════════════════════════════════════════════
   Mode-specific layout
   ═════════════════════════════════════════════ */

/* ── Spreadsheet Mode ── */
body.mode-spreadsheet #terminal-panel { display: none !important; }
body.mode-spreadsheet #status-ribbon { display: none; }

/* ── Spreadsheet Mode — Light Excel chrome ── */
body.mode-spreadsheet #logo {
  color: #18202A;
}
body.mode-spreadsheet #cell-addr {
  font-family: var(--mono);
}
body.mode-spreadsheet #fx-label {
  color: var(--fg-dim);
}
body.mode-spreadsheet .btn-pipeline-menu {
  background: none !important;
  border-color: transparent !important;
  color: #444444 !important;
}
body.mode-spreadsheet .btn-pipeline-menu:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #111111 !important;
}
body.mode-spreadsheet #cell-editor {
  background: #FFFFFF;
  color: #111111;
  border-color: #107C41;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  line-height: 1;
}

/* ── System Mode ── */
body.mode-system #terminal-panel {
  display: flex;
  height: 180px;
}
body.mode-system #terminal-panel.collapsed {
  height: auto;
}
body.mode-system #terminal-panel.collapsed #terminal-body {
  display: none;
}

/* ── Terminal Mode ── */
body.mode-terminal #main { display: none; }
body.mode-terminal #formulabar { display: none; }
body.mode-terminal #terminal-panel {
  display: flex;
  flex: 1;
}
body.mode-terminal #terminal-input-row {
  order: -1;
  border-top: none;
  border-bottom: 1px solid var(--border);
}
body.mode-terminal #status-ribbon { display: flex; }

/* ── Surface Mode ── */
body.mode-surface #main { display: none; }
body.mode-surface #formulabar { display: none; }
body.mode-surface #terminal-panel { display: none !important; }
body.mode-surface #status-ribbon { display: none; }
body.mode-surface #surface-container { display: flex; }

#surface-container {
  display: none;
  flex: 1;
  background: #0F1117;
  overflow: hidden;
}

/* Canvas area */
#sf-canvas-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 2px solid #23262B;
  border-radius: 2px;
  margin: 4px 4px 4px 48px;
}
#surface-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#surface-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Loading overlay */
#sf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 14px 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
  color: #7C848D;
  background: #0F1117;
  z-index: 2;
}
#sf-loading.hidden { display: none; }

/* Right panel — instrument cluster */
#surface-panel {
  width: 380px;
  background: #141720;
  border-left: 1px solid #23262B;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  overflow-y: auto;
}

/* Section headers */
.sf-label {
  font: 14px/1 'JetBrains Mono', 'SF Mono', monospace;
  color: #7C848D;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 4px;
}

/* Hero metric */
#sf-value {
  font: 600 48px/1.1 'JetBrains Mono', 'SF Mono', monospace;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

/* Assumption axes */
#sf-axes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.sf-axis-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 14px/1.3 'JetBrains Mono', 'SF Mono', monospace;
  margin-bottom: 4px;
}
.sf-coord-label {
  color: #7C848D;
}
.sf-coord-val {
  color: #E8EAED;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 60px;
}
.sf-axis-track {
  height: 4px;
  background: #23262B;
  border-radius: 2px;
  overflow: hidden;
}
.sf-axis-fill {
  height: 100%;
  width: 0%;
  background: rgba(26, 188, 156, 0.5);
  border-radius: 2px;
  transition: width 0.05s linear;
}

/* Divider */
.sf-divider {
  height: 1px;
  background: #23262B;
  margin: 12px 0 16px;
}

/* Knob sliders */
.sf-knob {
  margin-bottom: 16px;
}
.sf-knob-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.sf-knob-val {
  font: 500 15px/1 'JetBrains Mono', 'SF Mono', monospace;
  color: #E8EAED;
  font-variant-numeric: tabular-nums;
}
.sf-knob input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: #23262B;
  border-radius: 2.5px;
  outline: none;
  cursor: pointer;
}
.sf-knob input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1ABC9C;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.sf-knob input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 8px rgba(26, 188, 156, 0.5);
}
.sf-knob input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1ABC9C;
  border: none;
  cursor: pointer;
}
.sf-knob input[type="range"]::-moz-range-track {
  height: 5px;
  background: #23262B;
  border-radius: 2.5px;
  border: none;
}

.sf-status {
  font: 12px/1.4 'JetBrains Mono', 'SF Mono', monospace;
  color: #555B66;
  margin-top: auto;
}
.sf-capture-btn {
  margin-top: 10px;
  width: 100%; padding: 6px 0;
  background: rgba(74, 158, 245, 0.10);
  color: var(--accent, #4A9EF5);
  border: 1px solid rgba(74, 158, 245, 0.30); border-radius: 4px;
  font: 11px/1 'JetBrains Mono', 'SF Mono', monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; transition: background 0.12s;
}
.sf-capture-btn:hover:not(:disabled) { background: rgba(74, 158, 245, 0.18); }
.sf-capture-btn:disabled { opacity: 0.3; cursor: default; }
.sf-capture-btn.captured {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34D399;
}

/* Surface subhead — visible always, styled subtly */
.sf-subhead {
  font: 11px/1.4 -apple-system, 'Segoe UI', sans-serif;
  color: #4B5563;
  margin-top: 2px;
}

/* ═════════════════════════════════════════════
   Research History Panel (Phase 3A)
   ═════════════════════════════════════════════ */

.rh-section {
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rh-section.rh-collapsed .rh-body { display: none; }
.rh-section.rh-collapsed { max-height: none; }

.rh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rh-toggle {
  background: none; border: none; color: var(--fg-dim);
  font-size: 8px; cursor: pointer; padding: 0 2px;
  transition: transform 0.15s;
}
.rh-section.rh-collapsed .rh-toggle { transform: rotate(-90deg); }

.rh-body {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}

.rh-empty {
  font-size: 10px; color: var(--fg-dim);
  padding: 4px 0;
}

/* Branch group */
.rh-branch {
  margin-bottom: 2px;
}
.rh-branch-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  font-size: 10px;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
  user-select: none;
}
.rh-branch-header:hover { background: rgba(255,255,255,0.04); }
.rh-branch-header.rh-active { color: var(--accent); }

.rh-branch-label {
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rh-branch-count {
  font-size: 9px;
  color: var(--fg-dim);
  flex-shrink: 0;
}
.rh-branch-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: none;
}
.rh-active .rh-branch-dot { display: block; }

/* Frame rows */
.rh-frames {
  padding-left: 10px;
}
.rh-frame {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  font-size: 10px;
  color: var(--fg-dim);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.1s, color 0.1s;
  line-height: 1.4;
}
.rh-frame:hover { background: rgba(255,255,255,0.04); color: var(--fg-muted); }
.rh-frame.rh-current {
  background: rgba(74, 158, 245, 0.12);
  color: var(--fg);
}

.rh-frame-idx {
  width: 14px;
  text-align: right;
  font-size: 9px;
  color: var(--fg-dim);
  flex-shrink: 0;
}
.rh-frame-source {
  font-size: 9px;
  color: var(--fg-dim);
  flex-shrink: 0;
  min-width: 36px;
}
.rh-frame-scalar {
  flex: 1;
  text-align: right;
  font-size: 9px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rh-frame-badges {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.rh-badge {
  font-size: 9px;
  line-height: 1;
}
.rh-badge-wp { color: #fbbf24; }
.rh-badge-ob { color: #60a5fa; }

/* ── View toggle (List | Graph) ── */
.rh-view-toggle {
  display: inline-flex;
  gap: 0;
  margin-left: auto;
  margin-right: 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.rh-vbtn {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  font-size: 9px;
  font-family: var(--font);
  padding: 1px 6px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1.4;
}
.rh-vbtn:not(:last-child) { border-right: 1px solid var(--border); }
.rh-vbtn:hover { color: var(--fg-muted); }
.rh-vbtn.rh-vbtn-active {
  background: rgba(74, 158, 245, 0.15);
  color: var(--accent);
}

/* ── Graph view ── */
.rh-graph {
  overflow: auto;
  scrollbar-width: thin;
}
.rh-graph svg {
  display: block;
}

/* Graph edges */
.rg-edge {
  stroke: var(--border);
  stroke-width: 1.5;
  fill: none;
}
.rg-edge-fork {
  stroke: var(--fg-dim);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  fill: none;
}

/* Graph nodes */
.rg-node {
  cursor: pointer;
}
.rg-node circle {
  fill: var(--bg-header);
  stroke: var(--fg-dim);
  stroke-width: 1.5;
  transition: fill 0.1s, stroke 0.1s;
}
.rg-node:hover circle {
  stroke: var(--fg-muted);
  fill: rgba(255,255,255,0.06);
}
.rg-node.rg-current circle {
  fill: rgba(74, 158, 245, 0.2);
  stroke: var(--accent);
  stroke-width: 2;
}

/* Node labels */
.rg-label {
  font-size: 8px;
  fill: var(--fg-dim);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  font-family: var(--font);
}
.rg-current .rg-label {
  fill: var(--fg);
}

/* Source tag beside node */
.rg-source {
  font-size: 7px;
  fill: var(--fg-dim);
  font-family: var(--font);
  pointer-events: none;
}

/* Branch lane labels */
.rg-branch-label {
  font-size: 9px;
  fill: var(--fg-dim);
  font-family: var(--font);
  font-weight: 600;
  text-anchor: middle;
}
.rg-branch-label.rg-active-label {
  fill: var(--accent);
}

/* Waypoint / observation markers */
.rg-wp {
  fill: #fbbf24;
  pointer-events: none;
}
.rg-ob {
  fill: #60a5fa;
  pointer-events: none;
}

/* Inactive branch dimming */
.rg-lane-inactive {
  opacity: 0.5;
}
.rg-lane-inactive:hover {
  opacity: 0.8;
}

/* ═════════════════════════════════════════════
   App mode — presentation preset for /app
   All rules scoped under body.app-mode.
   Zero impact on the normal product.
   ═════════════════════════════════════════════ */

/* Hide shell chrome */
body.app-mode #formulabar,
body.app-mode #status-ribbon,
body.app-mode #bottombar,
body.app-mode #terminal-panel,
body.app-mode #prod-banner,
body.app-mode #readonly-banner       { display: none !important; }

/* Menubar: hide action items and indicators */
body.app-mode #btn-save,
body.app-mode #btn-sync,
body.app-mode #btn-workflow,
body.app-mode #btn-panel,
body.app-mode #btn-pipeline-menu,
body.app-mode #btn-clear-cache,
body.app-mode #btn-import-xlsx,
body.app-mode #btn-run-main,
body.app-mode #health-chip,
body.app-mode #version-select,
body.app-mode #dirty-chip,
body.app-mode #snap-chip             { display: none !important; }

/* Mode switcher: hide non-allowed views */
body.app-mode .mode-btn[data-mode="system"],
body.app-mode .mode-btn[data-mode="terminal"]
                                     { display: none !important; }

/* App title: hidden by default, shown in app mode */
#app-title                           { display: none; }
body.app-mode #app-title {
  display: inline;
  font: 13px/1 -apple-system, 'Segoe UI', sans-serif;
  color: var(--fg-dim, #666);
  margin-left: 10px;
  letter-spacing: 0.3px;
}

/* Layout: reclaim space from hidden elements */
body.app-mode #main {
  grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 440px);
}
body.app-mode #main.panel-collapsed {
  grid-template-columns: 1fr;
}

/* View switcher: segmented control feel */
body.app-mode #mode-switcher {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
body.app-mode .mode-btn {
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
body.app-mode .mode-btn.active {
  background: rgba(0,0,0,0.08);
}

/* Surface mode in app: dark segmented control */
body.app-mode.mode-surface #mode-switcher {
  background: rgba(255,255,255,0.06);
}
body.app-mode.mode-surface .mode-btn.active {
  background: rgba(255,255,255,0.10);
}