:root {
  --theme-toggle-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
}

.theme-toggle-control {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5000;
}

.dashboard-link-control {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 4999;
}

.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 999px;
  background: var(--bg-surface, var(--surface, #0f1729));
  color: var(--text, #f1f5f9);
  box-shadow: var(--theme-toggle-shadow);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.dashboard-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 999px;
  background: var(--bg-surface, var(--surface, #0f1729));
  color: var(--text, #f1f5f9);
  box-shadow: var(--theme-toggle-shadow);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.theme-toggle-button:hover {
  filter: brightness(1.05);
}

.dashboard-link-button:hover {
  filter: brightness(1.05);
}

.theme-toggle-button:focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
}

.dashboard-link-button:focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f9fc;
  --surface: #ffffff;
  --raised: #edf2fb;
  --text: #0f172a;
  --muted: #475569;
  --dim: #64748b;
  --border: rgba(15, 23, 42, 0.14);

  --bg-base: #f7f9fc;
  --bg-surface: #ffffff;
  --bg-raised: #edf2fb;
  --bg-glass: rgba(255, 255, 255, 0.86);

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --border-bright: rgba(79, 70, 229, 0.34);
  --primary-glow: rgba(79, 70, 229, 0.2);
  --accent-glow: rgba(14, 165, 233, 0.18);

  --theme-toggle-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body {
  background: var(--bg-base, var(--bg)) !important;
  color: var(--text) !important;
}

html[data-theme="light"] pre,
html[data-theme="light"] .code-block,
html[data-theme="light"] .prompt-card,
html[data-theme="light"] .trace-block,
html[data-theme="light"] .terminal-block,
html[data-theme="light"] .generated-library {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] nav {
  background: var(--bg-glass, rgba(255, 255, 255, 0.9)) !important;
}

html[data-theme="light"] .module-section,
html[data-theme="light"] .code-block-wrapper,
html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .process-flow,
html[data-theme="light"] .interactive-reveal,
html[data-theme="light"] .mermaid-wrapper {
  background: var(--bg-surface, #ffffff) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] .code-toolbar {
  background: var(--bg-raised, #edf2fb) !important;
  color: var(--text-dim, #64748b) !important;
}

html[data-theme="light"] .interactive-reveal summary {
  background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .ix-diagram {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="light"] .ix-tab-nav {
  background: var(--raised);
}
html[data-theme="light"] .ix-card {
  background: var(--raised);
  border-color: var(--border);
}
html[data-theme="light"] .ix-detail-panel {
  background: var(--raised);
  border-color: var(--border);
}
html[data-theme="light"] .ix-tree-node {
  background: var(--raised);
  border-color: var(--border);
}
html[data-theme="light"] .ix-example-box {
  background: var(--surface);
}
html[data-theme="light"] .ix-char-item {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="light"] .ix-quadrant-cell {
  background: var(--surface);
}

html[data-theme="light"] [style*="background:#04080f"],
html[data-theme="light"] [style*="background: #04080f"],
html[data-theme="light"] [style*="background:#050a14"],
html[data-theme="light"] [style*="background: #050a14"],
html[data-theme="light"] [style*="background:#0a0f1e"],
html[data-theme="light"] [style*="background: #0a0f1e"] {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
}

@media (max-width: 640px) {
  .theme-toggle-control {
    right: 12px;
    bottom: 12px;
  }

  .dashboard-link-control {
    left: 12px;
    bottom: 12px;
  }

  .theme-toggle-button {
    padding: 9px 12px;
    font-size: 11px;
  }

  .dashboard-link-button {
    padding: 9px 12px;
    font-size: 11px;
  }
}