:root {
  --od-bg: linear-gradient(180deg, #f8fbff 0%, #eef2fb 80%);
  --od-card-bg: #ffffff;
  --od-card-border: #dfe5f1;
  --od-accent: #2f67ff;
  --od-accent-strong: #52b6ff;
  --od-text: #0f1b32;
  --od-muted: #5c637a;
  --od-panel-bg: #f5f7ff;
  --od-font: "Space Grotesk", "Public Sans", "Helvetica Neue", sans-serif;
}

div.dash-debug-menu__content button.dash-debug-menu__button:first-child {
  display: none;
}

body {
  font-family: var(--od-font);
  background: var(--od-bg);
  color: var(--od-text);
}

.od-root {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.od-auth-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8, 17, 40, 0.72);
  backdrop-filter: blur(6px);
  z-index: 999;
}

.od-auth-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 2.5rem;
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(15, 27, 50, 0.35);
}

.od-auth-card h2 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--od-text);
}

.od-auth-card p {
  margin: 0;
  color: var(--od-muted);
}

.od-auth-input {
  border: 1px solid var(--od-card-border);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-family: var(--od-font);
  text-align: center;
}

.od-auth-input:focus {
  outline: 2px solid var(--od-accent);
}

.od-auth-input--password {
  letter-spacing: 0.08em;
}

.od-auth-button {
  border: none;
  border-radius: 999px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--od-accent), var(--od-accent-strong));
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(47, 103, 255, 0.35);
}

.od-auth-status {
  min-height: 1.5rem;
}

.od-auth-status-message {
  display: block;
  font-size: 0.95rem;
  color: var(--od-muted);
}

.od-auth-status-message--error {
  color: #c30052;
}

.od-auth-status-message--success {
  color: #0a6d3b;
}

.od-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.od-header h1 {
  margin: 0 0 0.25rem;
  font-size: 2.4rem;
  color: var(--od-text);
}

.od-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.od-card {
  background: var(--od-card-bg);
  border: 1px solid var(--od-card-border);
  border-radius: 18px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 16px 35px rgba(40, 83, 143, 0.12);
  color: var(--od-text);
}

.od-card--wide {
  grid-column: span 2;
}

.od-card--docs {
  grid-column: span 2;
}

.od-primary-tabs {
  margin-top: 1rem;
}

.od-doc-tab-panel {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: calc(100vh - 220px);
}

.od-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.od-card-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.od-card-controls--state {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: flex-start;
}

.od-scenario-panel {
  grid-column: 1 / -1;
  background: linear-gradient(140deg, #fdfdff 0%, #eef3ff 80%);
  border: 1px solid var(--od-card-border);
  border-radius: 18px;
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.od-scenario-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.od-dropdown {
  width: 100%;
  min-width: 0;
}

.od-scenario-row .od-button {
  align-self: flex-end;
}

.od-dropdown .Select-control {
  border-radius: 14px;
  border: 1px solid #c7cfe4;
  min-height: 46px;
  box-shadow: none;
}

.od-dropdown .Select-placeholder,
.od-dropdown .Select-value-label {
  color: var(--od-text);
  font-size: 0.95rem;
}

.od-dropdown .Select-menu-outer {
  border-radius: 14px;
  border: 1px solid #c7cfe4;
  box-shadow: 0 10px 25px rgba(43, 74, 132, 0.15);
}

.od-scenario-detail {
  color: var(--od-muted);
  font-size: 0.85rem;
  white-space: pre-line;
}

.od-scenario-status {
  font-size: 0.85rem;
}

.od-card-body--stacked > * {
  margin-bottom: 1rem;
}

.od-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--od-muted);
}

.od-input,
.od-checklist,
.dash-table-container .dash-spreadsheet-container {
  width: 100%;
}

.od-button {
  background: transparent;
  border: 1px solid var(--od-card-border);
  color: var(--od-text);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border 160ms ease;
}

.od-button--ghost {
  border-color: #c7cfe4;
  color: var(--od-muted);
}

.od-button--accent {
  background: linear-gradient(120deg, var(--od-accent), var(--od-accent-strong));
  border: none;
  color: #fff;
  font-weight: 600;
}

.od-button--tiny {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

.od-upload {
  border: 1px dashed #c7cfe4;
  padding: 0.75rem;
  border-radius: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--od-muted);
  background: #fdfdff;
}

.od-panel {
  min-height: 120px;
  border-radius: 12px;
  background: var(--od-panel-bg);
  padding: 1rem;
  border: 1px solid #e4e8f2;
}

.od-card-body .dash-graph {
  background: #fff;
  border-radius: 12px;
  padding: 0.5rem;
  border: 1px solid #e4e8f2;
}

#od-diff-table-wrapper .dash-table-container {
  background: transparent;
}

.od-raw-view {
  width: 100%;
  min-height: 200px;
  background: #fff;
  color: var(--od-text);
  border: 1px solid #dfe5f1;
  border-radius: 12px;
  padding: 0.75rem;
}

.od-tab {
  background: transparent;
  color: var(--od-muted);
}

.od-tab--selected {
  color: var(--od-text) !important;
  border-bottom: 2px solid var(--od-accent) !important;
}

.od-alert {
  min-height: 2rem;
  font-weight: 500;
  color: var(--od-text);
}

.od-alert--run {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.od-word-builder-shell {
  border-top: 1px dashed var(--od-card-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.od-word-builder-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.od-word-builder-panel {
  background: var(--od-panel-bg);
  border: 1px solid #e4e8f2;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.od-word-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
}

.od-word-builder-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.od-word-builder-selection {
  font-size: 0.85rem;
  color: var(--od-muted);
}

.od-radio-group,
.od-checklist--inline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.od-input--hex {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  letter-spacing: 0.03em;
}

.od-status {
  font-size: 0.85rem;
  color: var(--od-muted);
}

.od-status--error {
  color: #c30052;
}

.od-status--success {
  color: #0a6d3b;
}

.od-status--info {
  color: #00467f;
}

.od-toast-layer {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 50;
  pointer-events: none;
}

.od-toast {
  background: #ffffff;
  border-radius: 14px;
  border-left: 4px solid var(--od-accent);
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 40px rgba(7, 17, 48, 0.18);
  min-width: 240px;
  max-width: 420px;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

.od-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.od-toast__body {
  flex: 1;
  color: var(--od-text);
  font-size: 0.9rem;
}

.od-toast__close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--od-muted);
  cursor: pointer;
}

.od-toast--error {
  border-color: #dc2626;
}

.od-toast--success {
  border-color: #059669;
}

.od-toast--info {
  border-color: var(--od-accent);
}

.od-kernel-markdown {
  font-family: "Public Sans", "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--od-text);
}

.od-kernel-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
  box-shadow: 0 12px 30px rgba(15, 27, 50, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.od-kernel-markdown th,
.od-kernel-markdown td {
  border: 1px solid #e0e6f3;
  padding: 0.6rem 0.75rem;
  text-align: left;
}

.od-kernel-markdown th {
  background: linear-gradient(120deg, #f3f6ff, #e8efff);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #0f1b32;
}

.od-kernel-markdown tr:nth-child(2n) {
  background: #f9fbff;
}

.od-kernel-markdown pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.od-kernel-markdown pre > code {
  display: block;
  background: #0b1330;
  color: #e4edff;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(15, 27, 50, 0.25);
}

.od-kernel-markdown code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  background: rgba(47, 103, 255, 0.12);
  color: var(--od-text);
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
}

.od-kernel-markdown pre > code.language-mermaid {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
}

.od-kernel-markdown table.bit-ribbon {
  border-collapse: collapse;
  margin: 0.25rem 0 0.75rem;
}

.od-kernel-markdown table.bit-ribbon td {
  width: 26px;
  height: 28px;
  text-align: center;
  font-size: 11px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  border: none;
  padding: 0;
}

.od-kernel-markdown table.bit-ribbon .tgt {
  background: #dff1ff;
  color: #0e1f33;
}

.od-kernel-markdown table.bit-ribbon .op {
  background: #fff2f2;
  color: #0e1f33;
}

.od-kernel-markdown table.bit-ribbon .arg1 {
  background: #fef3e6;
  color: #3b1900;
}

.od-kernel-markdown table.bit-ribbon .arg2 {
  background: #f9e6ff;
  color: #23061f;
}

.od-kernel-markdown table.bit-ribbon .arg3 {
  background: #e9fce6;
  color: #04240f;
}

.od-kernel-markdown table.bit-ribbon .bid {
  background: #ffeef0;
  color: #310005;
}

.od-kernel-markdown table.bit-ribbon .rtx {
  background: #f7eeff;
  color: #2d0031;
}

.od-kernel-markdown table.bit-ribbon .msk {
  background: #f8f4fa;
  color: #313131;
}

.od-kernel-markdown .bit-ribbon-legend td {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(15, 27, 50, 0.15);
  text-align: center;
  padding: 0.2rem 0;
}

.od-kernel-markdown table.bit-ribbon .bit-empty {
  background: #eff2f9;
  color: #adb7ce;
}

.od-doc-panel {
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid var(--od-card-border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
  .od-toast-layer {
    right: 1rem;
    left: 1rem;
    top: auto;
    bottom: 1rem;
  }

  .od-toast {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .od-grid {
    grid-template-columns: 1fr;
  }
  .od-card--wide {
    grid-column: span 1;
  }
}