/* ==========================================================================
   Dracula Soft — Bootstrap 5 Theme
   Inspired by the Dracula theme (draculatheme.com), softened.
   Include AFTER bootstrap.min.css.

   Dracula is built on 11 colours and exactly two modes: dark (default) and
   light. An opt-in neon glow layer is also available:

       <html data-bs-theme="dark" data-neon>    soft Dracula + glow
       <html data-bs-theme="light">             light, accents re-mixed

   Dracula Soft is a sibling theme, not a third mode: themes/dracula holds the
   canonical neon palette, this one its calmer counterpart. Both ship exactly
   one dark and one light mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette (official Dracula colours)
   -------------------------------------------------------------------------- */
:root {
  --dr-background: #282a36; --dr-background-rgb: 40, 42, 54;
  --dr-current-line: #44475a; --dr-current-line-rgb: 68, 71, 90;
  --dr-foreground: #f8f8f2; --dr-foreground-rgb: 248, 248, 242;
  --dr-comment: #6272a4; --dr-comment-rgb: 98, 114, 164;
  --dr-cyan: #8be9fd; --dr-cyan-rgb: 139, 233, 253;
  --dr-green: #50fa7b; --dr-green-rgb: 80, 250, 123;
  --dr-orange: #ffb86c; --dr-orange-rgb: 255, 184, 108;
  --dr-pink: #ff79c6; --dr-pink-rgb: 255, 121, 198;
  --dr-purple: #bd93f9; --dr-purple-rgb: 189, 147, 249;
  --dr-red: #ff5555; --dr-red-rgb: 255, 85, 85;
  --dr-yellow: #f1fa8c; --dr-yellow-rgb: 241, 250, 140;
  --dr-selection: #44475a; --dr-selection-rgb: 68, 71, 90;
}

/* --------------------------------------------------------------------------
   2. Dark mode (default) roles
   -------------------------------------------------------------------------- */
:root {
  --dr-bg: #1c1d26;
  --dr-bg-rgb: 28, 29, 38;
  --dr-surface: #23242f;
  --dr-surface-raised: #2f313d;
  --dr-surface-raised-rgb: 47, 49, 61;
  --dr-border: #3a3d4c;
  --dr-border-soft: rgba(248, 248, 242, 0.08);
  --dr-fg: #e6e6ea;
  --dr-fg-rgb: 230, 230, 234;
  --dr-fg-strong: var(--dr-foreground);
  --dr-fg-muted: #7d8ab5;
  --dr-fg-muted-rgb: 125, 138, 181;
  --dr-accent: #a78bfa;
  --dr-accent-rgb: 167, 139, 250;
  --dr-accent-hover: #c084fc;
  --dr-accent-hover-rgb: 192, 132, 252;
  --dr-accent-soft: rgba(167, 139, 250, 0.16);
  --dr-on-accent: #14151c;
  --dr-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  --dr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --dr-code-bg: #191a22;
}

/* Dark mode uses the softened accents */
:root {
  --dr-purple-role: #a78bfa;
  --dr-purple-role-rgb: 167, 139, 250;
  --dr-cyan-role: #79c6d8;
  --dr-cyan-role-rgb: 121, 198, 216;
  --dr-green-role: #7ecb98;
  --dr-green-role-rgb: 126, 203, 152;
  --dr-orange-role: #e0a878;
  --dr-orange-role-rgb: 224, 168, 120;
  --dr-pink-role: #dd8fc0;
  --dr-pink-role-rgb: 221, 143, 192;
  --dr-red-role: #e07a7a;
  --dr-red-role-rgb: 224, 122, 122;
  --dr-yellow-role: #d8cc86;
  --dr-yellow-role-rgb: 216, 204, 134;
}

/* Soft — the same hues with the neon pulled back, easier on the eyes */

/* Light — Dracula's background flipped; accents re-mixed toward the dark
   foreground so they keep their hue but regain contrast on white. */
[data-bs-theme="light"] {
  --dr-bg: #f2f1f6;
  --dr-bg-rgb: 242, 241, 246;
  --dr-surface: #fbfbfd;
  --dr-surface-raised: #e7e6ee;
  --dr-surface-raised-rgb: 231, 230, 238;
  --dr-border: #d2d1dc;
  --dr-border-soft: rgba(28, 29, 38, 0.12);
  --dr-fg: #3f4152;
  --dr-fg-rgb: 63, 65, 82;
  --dr-fg-strong: var(--dr-background);
  --dr-fg-muted: #6b7098;
  --dr-fg-muted-rgb: 107, 112, 152;
  --dr-accent: #6f57c4;
  --dr-accent-rgb: 111, 87, 196;
  --dr-accent-hover: #a3559a;
  --dr-accent-hover-rgb: 163, 85, 154;
  --dr-accent-soft: rgba(111, 87, 196, 0.14);
  --dr-on-accent: #ffffff;
  --dr-shadow: 0 1px 0 rgba(28, 29, 38, 0.08);
  --dr-shadow-lg: 0 12px 28px rgba(28, 29, 38, 0.2);
  --dr-code-bg: #eceaf2;

  /* Accent roles re-mixed for a light surface */
  --dr-cyan-role: #2c7c8e;
  --dr-cyan-role-rgb: 44, 124, 142;
  --dr-green-role: #3a8c56;
  --dr-green-role-rgb: 58, 140, 86;
  --dr-orange-role: #a86b2a;
  --dr-orange-role-rgb: 168, 107, 42;
  --dr-pink-role: #a34f83;
  --dr-pink-role-rgb: 163, 79, 131;
  --dr-red-role: #a83f3f;
  --dr-red-role-rgb: 168, 63, 63;
  --dr-yellow-role: #8d7f24;
  --dr-yellow-role-rgb: 141, 127, 36;
  --dr-purple-role: #6f57c4;
  --dr-purple-role-rgb: 111, 87, 196;
}

/* Neon glow layer — opt-in via data-neon */
[data-neon] {
  --dr-glow-accent: 0 0 0.5rem rgba(var(--dr-accent-rgb), 0.55);
  --dr-glow-focus: 0 0 0 2px var(--dr-accent), 0 0 0.75rem rgba(var(--dr-accent-rgb), 0.5);
}

:root {
  --dr-glow-accent: none;
  --dr-glow-focus: 0 0 0 2px rgba(var(--dr-accent-rgb), 0.75);
}

::selection {
  background-color: #3a3d4c;
  color: var(--dr-foreground);
}

/* --------------------------------------------------------------------------
   3. Semantic mapping
   -------------------------------------------------------------------------- */
:root {
  --bs-primary: var(--dr-accent);
  --bs-primary-rgb: var(--dr-accent-rgb);
  --bs-secondary: var(--dr-fg-muted);
  --bs-secondary-rgb: var(--dr-fg-muted-rgb);
  --bs-success: var(--dr-green-role);
  --bs-success-rgb: var(--dr-green-role-rgb);
  --bs-info: var(--dr-cyan-role);
  --bs-info-rgb: var(--dr-cyan-role-rgb);
  --bs-warning: var(--dr-orange-role);
  --bs-warning-rgb: var(--dr-orange-role-rgb);
  --bs-danger: var(--dr-red-role);
  --bs-danger-rgb: var(--dr-red-role-rgb);
  --bs-light: var(--dr-surface-raised);
  --bs-light-rgb: var(--dr-surface-raised-rgb);
  --bs-dark: var(--dr-background);
  --bs-dark-rgb: var(--dr-background-rgb);

  --bs-body-bg: var(--dr-bg);
  --bs-body-color: var(--dr-fg);
  --bs-emphasis-color: var(--dr-fg-strong);
  --bs-secondary-color: var(--dr-fg-muted);
  --bs-tertiary-color: var(--dr-fg-muted);
  --bs-secondary-bg: var(--dr-surface);
  --bs-tertiary-bg: var(--dr-surface);
  --bs-body-color-rgb: var(--dr-fg-rgb);
  --bs-border-color: var(--dr-border);
  --bs-border-color-translucent: var(--dr-border-soft);

  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  --bs-font-monospace: "JetBrains Mono", "Fira Code", ui-monospace, Menlo,
    Consolas, monospace;
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;

  /* Dracula's UI is blocky and terminal-like */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.375rem;
  --bs-border-radius-xl: 0.5rem;
  --bs-border-radius-pill: 50rem;

  --bs-focus-ring-width: 0.125rem;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--dr-accent);
  --bs-focus-ring-blur: 0;

  --bs-link-color: var(--dr-cyan-role);
  --bs-link-hover-color: var(--dr-pink-role);
  --bs-link-decoration: none;
  --bs-link-hover-decoration: underline;
  --bs-code-color: var(--dr-pink-role);
}

/* Light style: soft, low-key foregrounds for secondary surfaces */
[data-bs-theme="light"] .btn-secondary {
  --bs-btn-color: var(--dr-fg);
  --bs-btn-hover-color: var(--dr-fg);
}

/* --------------------------------------------------------------------------
   4. Base & typography
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  color: var(--dr-fg-strong);
  letter-spacing: -0.01em;
}

a {
  color: var(--dr-cyan-role);
  text-decoration: none;
}

a:hover {
  color: var(--dr-pink-role);
  text-decoration: underline;
}

code, kbd, samp, pre {
  font-family: var(--bs-font-monospace);
  font-size: 0.85em;
}

code { color: var(--dr-pink-role); }

kbd {
  background-color: var(--dr-surface-raised);
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius-sm);
  color: var(--dr-fg);
  padding: 0.1em 0.4em;
}

blockquote {
  border-inline-start: 3px solid var(--dr-purple);
  padding-inline-start: 1rem;
  font-style: normal;
  color: var(--dr-fg-muted);
}

hr {
  border-color: var(--dr-border);
  opacity: 1;
}

/* Editor-style code block */
pre.dr-code {
  background-color: var(--dr-code-bg);
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem 1.25rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  color: var(--dr-fg);
  overflow-x: auto;
}

pre.dr-code .dr-comment { color: var(--dr-comment); }
pre.dr-code .dr-keyword { color: var(--dr-pink); }
pre.dr-code .dr-string { color: var(--dr-yellow); }
pre.dr-code .dr-number { color: var(--dr-purple); }
pre.dr-code .dr-fn { color: var(--dr-green); }
pre.dr-code .dr-type { color: var(--dr-cyan); }
pre.dr-code .dr-op { color: var(--dr-pink); }

/* Light style: re-mix syntax colours so they stay legible on white */
[data-bs-theme="light"] pre.dr-code .dr-comment { color: var(--dr-fg-muted); }
[data-bs-theme="light"] pre.dr-code .dr-keyword { color: var(--dr-pink-role); }
[data-bs-theme="light"] pre.dr-code .dr-string { color: var(--dr-orange-role); }
[data-bs-theme="light"] pre.dr-code .dr-number { color: var(--dr-purple-role); }
[data-bs-theme="light"] pre.dr-code .dr-fn { color: var(--dr-green-role); }
[data-bs-theme="light"] pre.dr-code .dr-type { color: var(--dr-cyan-role); }
[data-bs-theme="light"] pre.dr-code .dr-op { color: var(--dr-pink-role); }

/* Glow helpers, active whenever the neon layer is enabled */
[data-neon] .dr-glow {
  text-shadow: var(--dr-glow-accent);
}

[data-neon] .btn-primary,
[data-neon] .badge.bg-primary,
[data-neon] .btn-outline-primary {
  box-shadow: var(--dr-glow-accent);
}

/* --------------------------------------------------------------------------
   5. Palette utilities
   -------------------------------------------------------------------------- */
.dr-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.dr-swatch {
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--dr-border-soft);
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.dr-swatch strong {
  display: block;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.75rem;
  margin-bottom: 0.125rem;
}

.dr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius-sm);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  background-color: var(--dr-surface);
  color: var(--dr-fg);
}

.dr-chip i {
  width: 0.875rem;
  height: 0.875rem;
  display: inline-block;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease, box-shadow 0.15s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--dr-glow-focus);
}

.btn-primary {
  --bs-btn-bg: var(--dr-accent);
  --bs-btn-border-color: var(--dr-accent);
  --bs-btn-hover-bg: var(--dr-accent-hover);
  --bs-btn-hover-border-color: var(--dr-accent-hover);
  --bs-btn-active-bg: var(--dr-accent-hover);
  --bs-btn-active-border-color: var(--dr-accent-hover);
  --bs-btn-disabled-bg: var(--dr-current-line);
  --bs-btn-disabled-border-color: var(--dr-current-line);
  --bs-btn-color: var(--dr-on-accent);
  --bs-btn-hover-color: var(--dr-on-accent);
  --bs-btn-active-color: var(--dr-on-accent);
}

.btn-secondary {
  --bs-btn-bg: var(--dr-current-line);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-border);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-border);
  --bs-btn-color: var(--dr-foreground);
  --bs-btn-hover-color: var(--dr-foreground);
}

.btn-success {
  --bs-btn-bg: var(--dr-green-role);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-cyan-role);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-cyan-role);
  --bs-btn-color: var(--dr-background);
  --bs-btn-hover-color: var(--dr-background);
}

.btn-danger {
  --bs-btn-bg: var(--dr-red-role);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-pink-role);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-pink-role);
  --bs-btn-color: var(--dr-background);
  --bs-btn-hover-color: var(--dr-background);
}

.btn-warning {
  --bs-btn-bg: var(--dr-orange-role);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-yellow-role);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-yellow-role);
  --bs-btn-color: var(--dr-background);
  --bs-btn-hover-color: var(--dr-background);
}

.btn-info {
  --bs-btn-bg: var(--dr-cyan-role);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-purple);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-purple);
  --bs-btn-color: var(--dr-background);
  --bs-btn-hover-color: var(--dr-background);
}

.btn-light {
  --bs-btn-bg: var(--dr-surface-raised);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dr-current-line);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--dr-current-line);
  --bs-btn-color: var(--dr-foreground);
  --bs-btn-hover-color: var(--dr-foreground);
}

.btn-dark {
  --bs-btn-bg: var(--dr-background);
  --bs-btn-border-color: var(--dr-current-line);
  --bs-btn-hover-bg: var(--dr-code-bg);
  --bs-btn-hover-border-color: var(--dr-border);
  --bs-btn-active-bg: var(--dr-code-bg);
  --bs-btn-color: var(--dr-foreground);
  --bs-btn-hover-color: var(--dr-foreground);
}

.btn-link {
  --bs-btn-color: var(--dr-cyan-role);
  --bs-btn-hover-color: var(--dr-pink-role);
  text-decoration: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--dr-accent);
  --bs-btn-border-color: var(--dr-accent);
  --bs-btn-hover-bg: var(--dr-accent);
  --bs-btn-hover-border-color: var(--dr-accent);
  --bs-btn-active-bg: var(--dr-accent);
  --bs-btn-active-border-color: var(--dr-accent);
  --bs-btn-hover-color: var(--dr-on-accent);
  --bs-btn-active-color: var(--dr-on-accent);
}

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child {
  border-start-start-radius: var(--bs-border-radius);
  border-end-start-radius: var(--bs-border-radius);
}
.btn-group > .btn:last-child {
  border-start-end-radius: var(--bs-border-radius);
  border-end-end-radius: var(--bs-border-radius);
}

.btn-group > .btn-check:checked + .btn {
  background-color: var(--dr-accent-soft);
  border-color: var(--dr-accent);
  color: var(--dr-accent);
}

.btn-close {
  border-radius: var(--bs-border-radius-sm);
  opacity: 0.65;
}

.btn-close:hover {
  opacity: 1;
  background-color: var(--dr-current-line);
}

/* --------------------------------------------------------------------------
   7. Navbar, menus & toolbars
   -------------------------------------------------------------------------- */
.navbar {
  --bs-navbar-padding-y: 0.5rem;
  min-height: 3rem;
  background-color: var(--dr-bg) !important;
  border-bottom: 1px solid var(--dr-border);
  box-shadow: none;
}

.navbar .navbar-brand {
  font-weight: 700;
  color: var(--dr-purple-role);
  letter-spacing: 0.02em;
}

.navbar .nav-link {
  --bs-nav-link-color: var(--dr-fg-muted);
  --bs-nav-link-hover-color: var(--dr-foreground);
  --bs-nav-link-active-color: var(--dr-purple-role);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
  padding-inline: 0.625rem;
}

.navbar .navbar-toggler {
  border: 1px solid var(--dr-border);
  box-shadow: none;
  border-radius: var(--bs-border-radius-sm);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--dr-surface);
  --bs-dropdown-color: var(--dr-fg);
  --bs-dropdown-border-color: var(--dr-border);
  --bs-dropdown-link-color: var(--dr-fg);
  --bs-dropdown-link-hover-color: var(--dr-purple);
  --bs-dropdown-link-hover-bg: var(--dr-accent-soft);
  --bs-dropdown-link-active-color: var(--dr-purple);
  --bs-dropdown-link-active-bg: var(--dr-accent-soft);
  --bs-dropdown-link-disabled-color: var(--dr-comment);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-link-border-radius: var(--bs-border-radius-sm);
  --bs-dropdown-padding-y: 0.25rem;
  padding: 0.25rem;
  box-shadow: var(--dr-shadow-lg);
  font-size: 0.875rem;
}

.dropdown-item {
  padding: 0.3125rem 0.625rem;
  border-radius: var(--bs-border-radius-sm);
}

.dropdown-item:active {
  background-color: var(--dr-accent-soft);
  color: var(--dr-purple-role);
}

.dropdown-divider {
  border-color: var(--dr-border);
  margin: 0.25rem;
}

.dropdown-header {
  color: var(--dr-comment);
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-weight: 600;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--dr-code-bg);
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius);
  color: var(--dr-fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-control,
.form-select {
  padding: 0.375rem 0.625rem;
}

.form-control::placeholder { color: var(--dr-comment); }

.form-control:focus,
.form-select:focus {
  border-color: var(--dr-accent);
  box-shadow: var(--dr-glow-focus);
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--dr-surface);
  color: var(--dr-comment);
}

.input-group-text {
  background-color: var(--dr-current-line);
  color: var(--dr-fg-muted);
  border-color: var(--dr-border);
}

.input-group > :not(:first-child) { margin-left: -1px; }
.input-group .form-control,
.input-group .form-select,
.input-group .btn { border-radius: 0; }
.input-group > :first-child {
  border-start-start-radius: var(--bs-border-radius);
  border-end-start-radius: var(--bs-border-radius);
}
.input-group > :last-child {
  border-start-end-radius: var(--bs-border-radius);
  border-end-end-radius: var(--bs-border-radius);
}

.form-check-input {
  background-color: var(--dr-code-bg);
  border: 1px solid var(--dr-current-line);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--dr-accent);
  border-color: var(--dr-accent);
}

.form-check-input:focus {
  border-color: var(--dr-accent);
  box-shadow: var(--dr-glow-focus);
}

.form-check-label { font-size: 0.875rem; }

.form-switch { padding-left: 2.5rem; }

.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-left: -2.5rem;
  border: 1px solid var(--dr-current-line);
  background-color: var(--dr-code-bg);
}

.form-switch .form-check-input:checked {
  background-color: var(--dr-accent);
  border-color: var(--dr-accent);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--dr-accent);
  border: none;
  box-shadow: 0 0 0 2px var(--dr-bg);
}

.form-range::-moz-range-thumb {
  background-color: var(--dr-accent);
  border: none;
}

.form-range::-webkit-slider-runnable-track { background-color: var(--dr-current-line); }
.form-range::-moz-range-track { background-color: var(--dr-current-line); }

.form-text,
.invalid-feedback,
.valid-feedback { font-size: 0.75rem; }

.form-text { color: var(--dr-comment); }

.form-control-color {
  width: 2.5rem;
  height: 2.25rem;
  padding: 0.25rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  border-radius: var(--bs-border-radius);
}

.form-floating > label {
  color: var(--dr-comment);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--dr-surface);
  --bs-card-border-color: var(--dr-border);
  --bs-card-cap-bg: transparent;
  --bs-card-border-radius: var(--bs-border-radius-lg);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.15s ease;
}

.card:hover {
  border-color: var(--dr-accent);
}

[data-neon] .card:hover {
  box-shadow: var(--dr-glow-accent);
}

.card-header {
  background-color: var(--dr-code-bg);
  border-bottom: 1px solid var(--dr-border);
  font-weight: 700;
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

.card-footer {
  background-color: var(--dr-code-bg);
  border-top: 1px solid var(--dr-border);
  padding: 0.5rem 0.75rem;
}

.card-title { font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: var(--dr-surface);
  --bs-table-color: var(--dr-fg);
  --bs-table-border-color: var(--dr-border);
  --bs-table-striped-bg: var(--dr-code-bg);
  --bs-table-striped-color: var(--dr-fg);
  --bs-table-hover-bg: var(--dr-current-line);
  --bs-table-hover-color: var(--dr-foreground);
  border-color: var(--dr-border);
}

.table > :not(caption) > * > * {
  padding: 0.4375rem 0.75rem;
}

.table thead th {
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--dr-cyan);
  background-color: var(--dr-code-bg);
  border-bottom: 1px solid var(--dr-border);
}

.table > :not(caption) > * > * + * { border-left-width: 0; }

/* --------------------------------------------------------------------------
   11. Navs, tabs & pagination
   -------------------------------------------------------------------------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--dr-border);
  --bs-nav-tabs-link-active-color: var(--dr-purple);
  --bs-nav-tabs-link-active-bg: var(--dr-surface);
  --bs-nav-tabs-link-active-border-color: var(--dr-border);
  border-bottom: 1px solid var(--dr-border);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dr-fg-muted);
  font-weight: 600;
  font-size: 0.875rem;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom-color: var(--dr-purple-role);
  color: var(--dr-purple-role);
}

.nav-pills { gap: 0.25rem; }

.nav-pills .nav-link {
  border-radius: var(--bs-border-radius);
  color: var(--dr-fg);
  font-weight: 600;
  font-size: 0.875rem;
}

.nav-pills .nav-link:hover {
  background-color: var(--dr-current-line);
  color: var(--dr-foreground);
}

.nav-pills .nav-link.active {
  background-color: var(--dr-accent);
  color: var(--dr-on-accent);
}

.nav-underline {
  border-bottom: 1px solid var(--dr-border);
  gap: 0.375rem;
}

.nav-underline .nav-link {
  color: var(--dr-fg-muted);
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 2px solid transparent;
}

.nav-underline .nav-link.active {
  color: var(--dr-purple-role);
  border-bottom-color: var(--dr-purple-role);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--dr-comment);
  --bs-breadcrumb-item-active-color: var(--dr-fg-muted);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

.breadcrumb-item a { color: var(--dr-cyan-role); }

.pagination {
  --bs-pagination-color: var(--dr-fg);
  --bs-pagination-bg: var(--dr-surface);
  --bs-pagination-border-color: var(--dr-border);
  --bs-pagination-hover-color: var(--dr-purple);
  --bs-pagination-hover-bg: var(--dr-current-line);
  --bs-pagination-active-bg: var(--dr-accent);
  --bs-pagination-active-border-color: var(--dr-accent);
  --bs-pagination-active-color: var(--dr-on-accent);
  --bs-pagination-disabled-color: var(--dr-comment);
  --bs-pagination-disabled-bg: var(--dr-surface);
  --bs-pagination-disabled-border-color: var(--dr-border);
  gap: 0.25rem;
}

.page-link {
  border-radius: var(--bs-border-radius) !important;
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  min-width: 2.125rem;
  text-align: center;
}

.page-link:focus {
  outline: none;
  box-shadow: var(--dr-glow-focus);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   12. Alerts, badges & list groups
   -------------------------------------------------------------------------- */
.alert {
  --bs-alert-bg: var(--dr-surface);
  --bs-alert-border-color: var(--dr-border);
  --bs-alert-color: var(--dr-fg);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.alert-primary {
  --bs-alert-color: var(--dr-purple-role);
  --bs-alert-bg: var(--dr-accent-soft);
  --bs-alert-border-color: var(--dr-accent);
}

.alert-success {
  --bs-alert-color: var(--dr-green-role);
  --bs-alert-bg: rgba(var(--dr-green-role-rgb), 0.14);
  --bs-alert-border-color: var(--dr-green-role);
}

.alert-danger {
  --bs-alert-color: var(--dr-red-role);
  --bs-alert-bg: rgba(var(--dr-red-role-rgb), 0.14);
  --bs-alert-border-color: var(--dr-red-role);
}

.alert-warning {
  --bs-alert-color: var(--dr-orange-role);
  --bs-alert-bg: rgba(var(--dr-orange-role-rgb), 0.14);
  --bs-alert-border-color: var(--dr-orange-role);
}

.alert-info {
  --bs-alert-color: var(--dr-cyan-role);
  --bs-alert-bg: rgba(var(--dr-cyan-role-rgb), 0.14);
  --bs-alert-border-color: var(--dr-cyan-role);
}

.alert-heading { font-weight: 700; }

.badge {
  --bs-badge-font-weight: 700;
  --bs-badge-padding-y: 0.2em;
  --bs-badge-padding-x: 0.45em;
  border-radius: var(--bs-border-radius-sm);
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
}

.badge.bg-primary { background-color: var(--dr-accent); color: var(--dr-on-accent); }
.badge.bg-secondary { background-color: var(--dr-comment); color: var(--dr-foreground); }

[data-bs-theme="light"] .badge.bg-secondary { color: var(--dr-bg); }
.badge.bg-success { background-color: var(--dr-green-role); color: var(--dr-background); }
.badge.bg-danger { background-color: var(--dr-red-role); color: var(--dr-foreground); }
.badge.bg-warning { background-color: var(--dr-orange-role); color: var(--dr-background); }
.badge.bg-info { background-color: var(--dr-cyan-role); color: var(--dr-background); }
.badge.bg-light { background-color: var(--dr-current-line); color: var(--dr-foreground); }
.badge.bg-dark { background-color: var(--dr-background); color: var(--dr-foreground); border: 1px solid var(--dr-border); }

.list-group {
  --bs-list-group-bg: var(--dr-surface);
  --bs-list-group-color: var(--dr-fg);
  --bs-list-group-border-color: var(--dr-border);
  --bs-list-group-border-radius: var(--bs-border-radius-lg);
  --bs-list-group-action-hover-bg: var(--dr-current-line);
  --bs-list-group-action-hover-color: var(--dr-foreground);
  --bs-list-group-action-active-bg: var(--dr-accent);
  --bs-list-group-action-active-color: var(--dr-on-accent);
  --bs-list-group-disabled-color: var(--dr-comment);
}

.list-group-item {
  padding: 0.4375rem 0.75rem;
  background-color: var(--dr-surface);
  border-color: var(--dr-border);
}

.list-group-item.active {
  background-color: var(--dr-accent);
  border-color: var(--dr-accent);
  color: var(--dr-on-accent);
}

.list-group-inset {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   13. Progress & spinners
   -------------------------------------------------------------------------- */
.progress {
  --bs-progress-bg: var(--dr-current-line);
  --bs-progress-bar-bg: var(--dr-accent);
  --bs-progress-border-radius: var(--bs-border-radius-sm);
  height: 0.5rem;
  box-shadow: none;
}

.progress-bar {
  background-color: var(--dr-accent);
  border-radius: var(--bs-border-radius-sm);
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.spinner-border,
.spinner-grow { --bs-spinner-border-width: 0.125rem; }

.spinner-border { border-radius: 0; }
.spinner-grow { border-radius: 0; }

/* --------------------------------------------------------------------------
   14. Accordions
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: var(--dr-surface);
  --bs-accordion-border-color: var(--dr-border);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-btn-focus-box-shadow: var(--dr-glow-focus);
  --bs-accordion-active-bg: var(--dr-accent-soft);
  --bs-accordion-active-color: var(--dr-purple-role);
  gap: 0.25rem;
}

.accordion-item {
  overflow: hidden;
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius) !important;
  background-color: var(--dr-surface);
}

.accordion-button {
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--dr-surface);
  color: var(--dr-fg);
}

.accordion-button:not(.collapsed) {
  background-color: var(--dr-accent-soft);
  color: var(--dr-purple-role);
  box-shadow: inset 0 -1px 0 var(--dr-border);
}

.accordion-button::after {
  background-size: 0.875rem;
  opacity: 0.7;
}

.accordion-body {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  background-color: var(--dr-surface);
  color: var(--dr-fg);
}

.accordion-flush { background-color: transparent; }

.accordion-flush .accordion-item {
  background-color: var(--dr-surface);
  border: 1px solid var(--dr-border);
}

/* --------------------------------------------------------------------------
   15. Modals, offcanvas, popovers & toasts
   -------------------------------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--dr-surface);
  --bs-modal-border-color: var(--dr-border);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-header-border-color: transparent;
  --bs-modal-footer-border-color: transparent;
}

.modal-content {
  border: 1px solid var(--dr-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--dr-shadow-lg);
  overflow: hidden;
}

.modal-header,
.modal-footer { padding: 0.75rem 1rem; }
.modal-body { padding: 0 1rem 1rem; font-size: 0.875rem; }
.modal-title { font-weight: 700; }

.modal-backdrop {
  --bs-backdrop-bg: 0;
  --bs-backdrop-opacity: 0.7;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.offcanvas {
  --bs-offcanvas-bg: var(--dr-bg);
  --bs-offcanvas-border-color: var(--dr-border);
  --bs-offcanvas-width: 21rem;
}

.offcanvas-header { border-bottom: 1px solid var(--dr-border); }
.offcanvas-title {
  font-weight: 700;
  font-family: var(--bs-font-monospace);
}

.popover {
  --bs-popover-bg: var(--dr-surface);
  --bs-popover-border-color: var(--dr-border);
  --bs-popover-body-color: var(--dr-fg);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--dr-purple-role);
  --bs-popover-border-radius: var(--bs-border-radius);
  box-shadow: var(--dr-shadow-lg);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

.popover-header {
  font-weight: 500;
  border-bottom: 1px solid var(--dr-border);
}

.tooltip {
  --bs-tooltip-bg: var(--dr-current-line);
  --bs-tooltip-color: var(--dr-foreground);
  --bs-tooltip-border-radius: var(--bs-border-radius-sm);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  padding: 0.25rem 0.4375rem;
}

.toast {
  --bs-toast-bg: var(--dr-surface);
  --bs-toast-border-color: var(--dr-border);
  --bs-toast-header-bg: var(--dr-code-bg);
  --bs-toast-header-color: var(--dr-purple-role);
  --bs-toast-border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--dr-shadow-lg);
  font-size: 0.875rem;
}

.toast-header {
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--dr-border);
}

.toast-body { padding: 0.625rem 0.75rem; }

/* --------------------------------------------------------------------------
   16. Carousel & placeholders
   -------------------------------------------------------------------------- */
.carousel-item { overflow: hidden; }

.carousel-caption { text-shadow: none; }

.carousel-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  border: none;
  border-radius: 0;
  background-color: var(--dr-foreground);
  opacity: 0.35;
}

.carousel-indicators .active { opacity: 0.9; }

.placeholder {
  background-color: currentColor;
  border-radius: var(--bs-border-radius-sm);
  opacity: 0.16;
}

.placeholder-wave {
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.75) 75%, #000 95%);
  mask-size: 200% 100%;
}

.placeholder-glow .placeholder {
  animation: dr-placeholder-glow 2s ease-in-out infinite;
}

@keyframes dr-placeholder-glow {
  50% { opacity: 0.32; }
}

/* --------------------------------------------------------------------------
   17. Colour utilities
   -------------------------------------------------------------------------- */
.dr-text-cyan { color: var(--dr-cyan-role) !important; }
.dr-text-green { color: var(--dr-green-role) !important; }
.dr-text-orange { color: var(--dr-orange-role) !important; }
.dr-text-pink { color: var(--dr-pink-role) !important; }
.dr-text-purple { color: var(--dr-purple-role) !important; }
.dr-text-red { color: var(--dr-red-role) !important; }
.dr-text-yellow { color: var(--dr-yellow-role) !important; }
.dr-text-comment { color: var(--dr-comment) !important; }

.dr-bg-cyan { background-color: var(--dr-cyan-role) !important; }
.dr-bg-green { background-color: var(--dr-green-role) !important; }
.dr-bg-orange { background-color: var(--dr-orange-role) !important; }
.dr-bg-pink { background-color: var(--dr-pink-role) !important; }
.dr-bg-purple { background-color: var(--dr-purple-role) !important; }
.dr-bg-red { background-color: var(--dr-red-role) !important; }
.dr-bg-yellow { background-color: var(--dr-yellow-role) !important; }
.dr-bg-current-line { background-color: var(--dr-current-line) !important; }

/* --------------------------------------------------------------------------
   18. Light-style corrections
   Tokens that assume a dark foreground are re-pointed for the light style.
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] ::selection {
  background-color: #d7d6e0;
  color: var(--dr-background);
}

[data-bs-theme="light"] .btn-light {
  --bs-btn-color: var(--dr-fg);
  --bs-btn-hover-color: var(--dr-fg);
}

[data-bs-theme="light"] .badge.bg-light {
  color: var(--dr-fg);
}

[data-bs-theme="light"] .btn-info,
[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .btn-warning {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
}

[data-bs-theme="light"] .table thead th {
  color: var(--dr-cyan-role);
}

[data-bs-theme="light"] .table {
  --bs-table-hover-color: var(--dr-fg);
}

[data-bs-theme="light"] .list-group {
  --bs-list-group-action-hover-color: var(--dr-fg);
}

[data-bs-theme="light"] .carousel-indicators [data-bs-target] {
  background-color: var(--dr-fg);
}

[data-bs-theme="light"] .progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

[data-bs-theme="light"] .alert-danger {
  --bs-alert-color: var(--dr-red-role);
}

[data-bs-theme="light"] .badge.bg-danger {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.text-secondary { color: var(--dr-fg-muted) !important; }

.shadow-sm { box-shadow: var(--dr-shadow) !important; }
.shadow { box-shadow: var(--dr-shadow-lg) !important; }

.bg-body { background-color: var(--dr-bg) !important; }
.bg-body-secondary { background-color: var(--dr-surface) !important; }
.bg-body-tertiary { background-color: var(--dr-surface-raised) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .btn-close,
  .form-control,
  .form-select,
  .form-check-input {
    transition: none;
  }
}