/* ============================================================================
   Cyber-Hub Universal CSS — Wednesday Cyberpunk Neon Design System
   Canonical source: sk-244 (Wednesday vault)
   Reusable across self-hosted web surfaces via nginx sub_filter injection.

   Apply over third-party UI; uses !important to win cascade.
   Layout containers (max-width, grid columns) are NOT overridden — only
   colors, fonts, motion, atmospheric depth, components.
   ============================================================================ */

/* --------- @font-face (self-hosted; CSP-safe) ----------------------------- */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/branding/fonts/jbmono-400.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/branding/fonts/jbmono-500.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/branding/fonts/jbmono-600.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/branding/fonts/jbmono-700.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/branding/fonts/manrope-400.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/branding/fonts/manrope-500.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/branding/fonts/manrope-600.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/branding/fonts/manrope-700.ttf') format('truetype'); }

/* --------- Design Tokens -------------------------------------------------- */
:root {
  /* Surfaces */
  --hub-bg: #07131B;
  --hub-bg-deep: #041018;
  --hub-bg-soft: #0B1C26;
  --hub-panel: rgba(8, 23, 31, 0.88);
  --hub-panel-2: rgba(10, 28, 38, 0.92);
  --hub-panel-elev: rgba(12, 32, 42, 0.95);

  /* Borders + cyan brand */
  --hub-border: rgba(49, 231, 255, 0.26);
  --hub-border-strong: rgba(49, 231, 255, 0.46);
  --hub-neon: #31E7FF;
  --hub-neon-soft: #87FBFF;
  --hub-neon-deep: #0FB8D8;

  /* Text + semantic */
  --hub-text: #E9FDFF;
  --hub-muted: #9CC7CE;
  --hub-link: #87FBFF;
  --hub-success: #4FE0A6;
  --hub-warning: #FFC773;
  --hub-danger: #FF7A8A;

  /* Typography */
  --hub-font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --hub-font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Motion */
  --hub-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --hub-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --hub-dur-fast: 0.18s;
  --hub-dur-base: 0.24s;
  --hub-dur-slow: 0.42s;

  /* Shape */
  --hub-radius-card: 1.12rem;
  --hub-radius-panel: 1.02rem;
  --hub-radius-pill: 999px;
  --hub-radius-input: 0.65rem;

  /* Spacing */
  --hub-gap-ui: 0.75rem;
  --hub-gap-section: 1rem;

  /* Shadows */
  --hub-shadow-card: 0 18px 55px rgba(0, 0, 0, 0.32), 0 0 26px rgba(49, 231, 255, 0.08);
  --hub-shadow-elev: 0 26px 52px rgba(0, 0, 0, 0.42), 0 0 32px rgba(49, 231, 255, 0.20);
  --hub-glow-soft: 0 0 18px rgba(49, 231, 255, 0.18);
  --hub-glow-strong: 0 0 32px rgba(49, 231, 255, 0.34);
}

/* --------- Universal Fixes ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* --------- Background Atmospheric Layers ---------------------------------- */
html, body {
  background:
    radial-gradient(circle at top left, rgba(49, 231, 255, 0.12), transparent 38%),
    radial-gradient(circle at bottom right, rgba(49, 231, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #041018 0%, #07131B 44%, #091B24 100%) !important;
  color: var(--hub-text) !important;
  font-family: var(--hub-font-body) !important;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1100px) {
  html, body {
    background:
      radial-gradient(ellipse at top left, rgba(49, 231, 255, 0.14), transparent 42%),
      radial-gradient(ellipse at bottom right, rgba(49, 231, 255, 0.10), transparent 36%),
      radial-gradient(ellipse at center, rgba(49, 231, 255, 0.04), transparent 60%),
      linear-gradient(180deg, #041018 0%, #07131B 44%, #091B24 100%) !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(49, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 231, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

@media (max-width: 768px) {
  body::before { display: none; }
  body::after { opacity: 0.03; }
}

/* Ensure content layers above body::before/::after */
body > * { position: relative; z-index: 1; }

/* --------- Typography selectors ------------------------------------------- */
input, button, textarea, select,
code, pre, kbd, samp, time,
.url, .navigation a, .tab,
[class*="badge"], [class*="chip"], [class*="tag"] {
  font-family: var(--hub-font-display) !important;
  font-feature-settings: 'ss02', 'zero', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hub-font-body) !important;
  color: var(--hub-neon-soft) !important;
  letter-spacing: -0.005em;
}

::placeholder {
  color: var(--hub-muted) !important;
  opacity: 0.62;
  font-family: var(--hub-font-display) !important;
  letter-spacing: 0.02em;
}

/* --------- Anchors -------------------------------------------------------- */
a {
  color: var(--hub-link) !important;
  text-decoration-color: rgba(49, 231, 255, 0.36);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    text-decoration-color var(--hub-dur-fast) var(--hub-ease-smooth),
    text-decoration-thickness var(--hub-dur-fast) var(--hub-ease-smooth),
    color var(--hub-dur-fast) var(--hub-ease-smooth);
}
a:hover {
  text-decoration-color: var(--hub-neon-soft);
  text-decoration-thickness: 2px;
  color: var(--hub-neon-soft) !important;
}
a:visited { color: rgba(135, 251, 255, 0.62) !important; }

/* --------- Buttons -------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn, [class*="button"]:not(input):not(textarea) {
  background: linear-gradient(135deg, #0A2430 0%, #103646 100%) !important;
  color: var(--hub-neon-soft) !important;
  border: 1px solid rgba(49, 231, 255, 0.34) !important;
  border-radius: var(--hub-radius-input) !important;
  padding: 0.55rem 1rem !important;
  font-family: var(--hub-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  font-size: 0.9rem !important;
  cursor: pointer;
  transition:
    background var(--hub-dur-fast) var(--hub-ease-smooth),
    border-color var(--hub-dur-fast) var(--hub-ease-smooth),
    color var(--hub-dur-fast) var(--hub-ease-smooth),
    box-shadow var(--hub-dur-base) var(--hub-ease-spring),
    transform var(--hub-dur-base) var(--hub-ease-spring) !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover, [class*="button"]:not(input):not(textarea):hover {
  background: linear-gradient(135deg, #0E2D3D 0%, #144257 100%) !important;
  border-color: var(--hub-border-strong) !important;
  transform: translateY(-1px);
  box-shadow: var(--hub-glow-soft);
}
button:active,
input[type="button"]:active,
input[type="submit"]:active,
.btn:active, [class*="button"]:not(input):not(textarea):active {
  transform: translateY(0);
  box-shadow: none !important;
}
button:disabled,
input[type="submit"]:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* CTA / primary variants */
.btn-primary, .primary, button.primary, button[type="submit"]:not([class*="ghost"]):not([class*="outline"]) {
  background: linear-gradient(135deg, #103646 0%, #1A5269 100%) !important;
  color: #fff !important;
  border-color: var(--hub-border-strong) !important;
}
.btn-primary:hover, .primary:hover, button.primary:hover {
  background: linear-gradient(135deg, #144257 0%, #1F6080 100%) !important;
  box-shadow: var(--hub-glow-strong) !important;
}

/* --------- Inputs --------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input:not([type]),
select,
textarea {
  background: rgba(5, 20, 27, 0.92) !important;
  color: var(--hub-text) !important;
  border: 1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius-input) !important;
  padding: 0.55rem 0.85rem !important;
  font-family: var(--hub-font-display) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    inset 0 0 0 1px rgba(49, 231, 255, 0.05),
    0 0 0 1px rgba(49, 231, 255, 0.02);
  transition:
    border-color var(--hub-dur-fast) var(--hub-ease-smooth),
    box-shadow var(--hub-dur-fast) var(--hub-ease-smooth),
    background var(--hub-dur-fast) var(--hub-ease-smooth);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  border-color: var(--hub-border-strong) !important;
  box-shadow:
    inset 0 0 0 1px rgba(49, 231, 255, 0.20),
    0 0 0 3px rgba(49, 231, 255, 0.18),
    0 0 24px rgba(49, 231, 255, 0.12) !important;
  outline: none !important;
}

/* --------- Focus visible (a11y) ------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--hub-neon) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 1px !important;
}

/* --------- Cards / Panels (generic) -------------------------------------- */
.card,
.panel,
.box,
[class*="card"]:not(input):not(textarea),
[class*="panel"]:not(input):not(textarea),
article,
section[class*="content"],
dialog,
.modal-content,
.dropdown-menu,
.popover,
[role="dialog"],
[role="menu"] {
  background: var(--hub-panel) !important;
  border: 1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius-card) !important;
  box-shadow: var(--hub-shadow-card) !important;
}

/* Cards hover lift (only for grid/list items, not full pages) */
.card:hover,
[class*="card"]:not(input):not(textarea):not(body):hover,
article:hover {
  transform: translateY(-2px);
  box-shadow: var(--hub-shadow-elev) !important;
  border-color: var(--hub-neon) !important;
  transition:
    transform var(--hub-dur-base) var(--hub-ease-spring),
    box-shadow var(--hub-dur-base) var(--hub-ease-spring),
    border-color var(--hub-dur-base) var(--hub-ease-smooth) !important;
}

/* --------- Pills / Tags / Badges ----------------------------------------- */
.pill, .tag, .badge, .chip,
[class*="-pill"], [class*="-tag"], [class*="-badge"], [class*="-chip"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: var(--hub-radius-pill) !important;
  background: rgba(49, 231, 255, 0.07) !important;
  border: 1px solid var(--hub-border) !important;
  color: var(--hub-neon-soft) !important;
  font-family: var(--hub-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  text-decoration: none !important;
}
.pill.selected, .pill[aria-current="page"],
.tag.active, .badge.active {
  background: rgba(49, 231, 255, 0.22) !important;
  border-color: var(--hub-neon) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--hub-glow-soft) !important;
}

/* --------- Tables -------------------------------------------------------- */
table {
  background: var(--hub-panel) !important;
  border: 1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius-panel) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
th {
  background: rgba(49, 231, 255, 0.08) !important;
  color: var(--hub-neon-soft) !important;
  font-family: var(--hub-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  padding: 0.6rem 0.85rem !important;
  border-bottom: 1px solid var(--hub-border) !important;
}
td {
  padding: 0.55rem 0.85rem !important;
  border-bottom: 1px solid rgba(49, 231, 255, 0.10) !important;
  color: var(--hub-text) !important;
}
tr:hover td {
  background: rgba(49, 231, 255, 0.04) !important;
}

/* --------- Code blocks --------------------------------------------------- */
code, pre, kbd, samp {
  background: rgba(5, 20, 27, 0.92) !important;
  color: var(--hub-neon-soft) !important;
  border-radius: 0.4rem !important;
  font-family: var(--hub-font-display) !important;
}
code { padding: 0.1rem 0.35rem !important; }
pre {
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--hub-border);
  overflow-x: auto;
}
kbd {
  padding: 0.1rem 0.4rem !important;
  border: 1px solid var(--hub-border);
  box-shadow: 0 1px 0 rgba(49, 231, 255, 0.15);
}

/* --------- Navigation / Header / Sidebar -------------------------------- */
header, nav, .navbar, .toolbar, .topbar,
[class*="navbar"], [class*="header"]:not(article header) {
  background: var(--hub-panel-elev) !important;
  border-bottom: 1px solid var(--hub-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

aside, .sidebar, [class*="sidebar"] {
  background: var(--hub-panel) !important;
  border-right: 1px solid var(--hub-border) !important;
}

footer, .footer, [class*="footer"] {
  background: var(--hub-bg-deep) !important;
  border-top: 1px solid var(--hub-border) !important;
  color: var(--hub-muted) !important;
}

/* --------- Custom scrollbar --------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(8, 23, 31, 0.6); }
::-webkit-scrollbar-thumb {
  background: rgba(49, 231, 255, 0.22);
  border-radius: 999px;
  border: 2px solid rgba(8, 23, 31, 0.6);
  transition: background var(--hub-dur-fast) var(--hub-ease-smooth);
}
::-webkit-scrollbar-thumb:hover { background: rgba(49, 231, 255, 0.42); }
* { scrollbar-color: rgba(49, 231, 255, 0.32) rgba(8, 23, 31, 0.6); scrollbar-width: thin; }

/* --------- Selection ---------------------------------------------------- */
::selection {
  background: rgba(49, 231, 255, 0.36);
  color: #fff;
  text-shadow: 0 0 10px rgba(49, 231, 255, 0.46);
}

/* --------- Long URL/title wrap ------------------------------------------ */
.url, .url_header, .title, h1, h2, h3, .truncate-fix {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --------- Staggered entrance animation --------------------------------- */
@keyframes hub-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result, .post, .entry, article, [class*="-item"] {
  animation: hub-fade-in var(--hub-dur-slow) var(--hub-ease-spring) backwards;
}
.result:nth-of-type(1), [class*="-item"]:nth-of-type(1) { animation-delay: 0.04s; }
.result:nth-of-type(2), [class*="-item"]:nth-of-type(2) { animation-delay: 0.08s; }
.result:nth-of-type(3), [class*="-item"]:nth-of-type(3) { animation-delay: 0.12s; }
.result:nth-of-type(4), [class*="-item"]:nth-of-type(4) { animation-delay: 0.16s; }
.result:nth-of-type(5), [class*="-item"]:nth-of-type(5) { animation-delay: 0.20s; }
.result:nth-of-type(6), [class*="-item"]:nth-of-type(6) { animation-delay: 0.24s; }
.result:nth-of-type(7), [class*="-item"]:nth-of-type(7) { animation-delay: 0.28s; }
.result:nth-of-type(8), [class*="-item"]:nth-of-type(8) { animation-delay: 0.32s; }

/* --------- Mobile responsive -------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --hub-radius-card: 0.85rem;
    --hub-radius-panel: 0.75rem;
    --hub-radius-input: 0.55rem;
    --hub-gap-ui: 0.5rem;
    --hub-gap-section: 0.75rem;
  }

  /* Touch targets ≥ 44px (iOS standard) */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], input[type="url"],
  select, textarea {
    min-height: 2.75rem !important;
    font-size: 1rem !important;  /* prevents iOS zoom-on-focus */
  }
  button, input[type="submit"], input[type="button"], .btn {
    min-height: 2.75rem !important;
    padding: 0.6rem 1.1rem !important;
  }

  body::before { display: none; }
}

/* --------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .card:hover, button:hover, [class*="card"]:hover {
    transform: none !important;
  }
}

/* --------- Print -------------------------------------------------------- */
@media print {
  body::before, body::after { display: none !important; }
  html, body {
    background: white !important;
    color: black !important;
  }
}

/* --------- Misc utility ------------------------------------------------- */
hr {
  border: none !important;
  border-top: 1px solid var(--hub-border) !important;
  margin: var(--hub-gap-section) 0 !important;
}

blockquote {
  border-left: 3px solid var(--hub-border-strong) !important;
  background: rgba(49, 231, 255, 0.04) !important;
  padding: 0.6rem 1rem !important;
  margin: var(--hub-gap-section) 0 !important;
  color: var(--hub-text) !important;
  font-style: italic;
}

mark {
  background: rgba(49, 231, 255, 0.22) !important;
  color: #fff !important;
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
}

details {
  background: var(--hub-panel) !important;
  border: 1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius-panel) !important;
  padding: 0.6rem 0.85rem !important;
  margin: var(--hub-gap-ui) 0 !important;
}
summary {
  cursor: pointer;
  color: var(--hub-neon-soft) !important;
  font-family: var(--hub-font-display) !important;
  font-weight: 600 !important;
}

/* End cyber-hub.css */

/* ============================================================================
   Bootstrap variable overrides (Phase 312.14 v2 — universal dark force)
   ============================================================================ */

:root,
html,
[data-bs-theme="light"],
[data-bs-theme="default"],
[data-pt-theme="default"],
[data-pt-theme="light"] {
  --bs-body-bg: #07131B !important;
  --bs-body-bg-rgb: 7, 19, 27 !important;
  --bs-body-color: #E9FDFF !important;
  --bs-body-color-rgb: 233, 253, 255 !important;
  --bs-secondary-bg: #0B1C26 !important;
  --bs-secondary-color: #9CC7CE !important;
  --bs-tertiary-bg: #041018 !important;
  --bs-tertiary-color: #9CC7CE !important;
  --bs-emphasis-color: #E9FDFF !important;
  --bs-emphasis-color-rgb: 233, 253, 255 !important;

  --bs-primary: #31E7FF !important;
  --bs-primary-rgb: 49, 231, 255 !important;
  --bs-secondary: #0FB8D8 !important;
  --bs-secondary-rgb: 15, 184, 216 !important;
  --bs-success: #4FE0A6 !important;
  --bs-success-rgb: 79, 224, 166 !important;
  --bs-danger: #FF7A8A !important;
  --bs-danger-rgb: 255, 122, 138 !important;
  --bs-warning: #FFC773 !important;
  --bs-warning-rgb: 255, 199, 115 !important;
  --bs-info: #87FBFF !important;
  --bs-info-rgb: 135, 251, 255 !important;
  --bs-light: rgba(8, 23, 31, 0.88) !important;
  --bs-light-rgb: 8, 23, 31 !important;
  --bs-dark: #041018 !important;
  --bs-dark-rgb: 4, 16, 24 !important;

  --bs-link-color: #87FBFF !important;
  --bs-link-color-rgb: 135, 251, 255 !important;
  --bs-link-hover-color: #31E7FF !important;
  --bs-link-hover-color-rgb: 49, 231, 255 !important;

  --bs-border-color: rgba(49, 231, 255, 0.26) !important;
  --bs-border-color-translucent: rgba(49, 231, 255, 0.18) !important;

  --bs-card-bg: rgba(8, 23, 31, 0.88) !important;
  --bs-card-color: #E9FDFF !important;
  --bs-card-cap-bg: rgba(10, 28, 38, 0.92) !important;
  --bs-card-border-color: rgba(49, 231, 255, 0.26) !important;

  --bs-modal-bg: rgba(12, 32, 42, 0.95) !important;
  --bs-modal-color: #E9FDFF !important;
  --bs-modal-border-color: rgba(49, 231, 255, 0.46) !important;

  --bs-dropdown-bg: rgba(12, 32, 42, 0.95) !important;
  --bs-dropdown-color: #E9FDFF !important;
  --bs-dropdown-link-color: #87FBFF !important;
  --bs-dropdown-link-hover-color: #fff !important;
  --bs-dropdown-link-hover-bg: rgba(49, 231, 255, 0.13) !important;

  --bs-form-control-bg: rgba(5, 20, 27, 0.92) !important;
  --bs-form-control-color: #E9FDFF !important;

  --bs-list-group-bg: rgba(8, 23, 31, 0.88) !important;
  --bs-list-group-color: #E9FDFF !important;
  --bs-list-group-border-color: rgba(49, 231, 255, 0.26) !important;

  --bs-table-bg: rgba(8, 23, 31, 0.88) !important;
  --bs-table-color: #E9FDFF !important;
  --bs-table-border-color: rgba(49, 231, 255, 0.18) !important;

  --bs-nav-link-color: #87FBFF !important;
  --bs-nav-link-hover-color: #fff !important;

  --bs-pagination-bg: rgba(8, 23, 31, 0.88) !important;
  --bs-pagination-color: #87FBFF !important;
  --bs-pagination-active-bg: rgba(49, 231, 255, 0.22) !important;

  --bs-popover-bg: rgba(12, 32, 42, 0.95) !important;
  --bs-popover-body-color: #E9FDFF !important;

  --bs-tooltip-bg: rgba(12, 32, 42, 0.95) !important;
  --bs-tooltip-color: #E9FDFF !important;

  --bs-offcanvas-bg: rgba(8, 23, 31, 0.96) !important;
  --bs-offcanvas-color: #E9FDFF !important;

  --bs-progress-bg: rgba(8, 23, 31, 0.5) !important;
}

.alert, .alert-info, .alert-warning, .alert-light, .alert-secondary {
  background: rgba(49, 231, 255, 0.07) !important;
  color: var(--hub-text) !important;
  border: 1px solid var(--hub-border) !important;
}
.alert-success { background: rgba(79, 224, 166, 0.10) !important; color: var(--hub-text) !important; border-color: var(--hub-success) !important; }
.alert-danger { background: rgba(255, 122, 138, 0.10) !important; color: var(--hub-text) !important; border-color: var(--hub-danger) !important; }
.alert-warning { background: rgba(255, 199, 115, 0.10) !important; color: var(--hub-text) !important; border-color: var(--hub-warning) !important; }

.btn-primary, .btn-info {
  background: linear-gradient(135deg, #103646 0%, #1A5269 100%) !important;
  border-color: var(--hub-border-strong) !important;
  color: #fff !important;
}
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light {
  background: rgba(49, 231, 255, 0.07) !important;
  border-color: var(--hub-border) !important;
  color: var(--hub-neon-soft) !important;
}

.card, .modal-content, .dropdown-menu, .popover, .toast {
  background: var(--hub-panel) !important;
  color: var(--hub-text) !important;
  border-color: var(--hub-border) !important;
}

.form-control, .form-select, input.form-control {
  background: rgba(5, 20, 27, 0.92) !important;
  color: var(--hub-text) !important;
  border-color: var(--hub-border) !important;
}
.form-control:focus, .form-select:focus {
  background: rgba(5, 20, 27, 0.92) !important;
  color: var(--hub-text) !important;
  border-color: var(--hub-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(49, 231, 255, 0.18) !important;
}

.text-muted, .text-body-secondary { color: var(--hub-muted) !important; }
.text-light, .text-white { color: var(--hub-text) !important; }
.text-dark { color: var(--hub-neon-soft) !important; }
.bg-light, .bg-white, .bg-body { background-color: var(--hub-panel) !important; color: var(--hub-text) !important; }
.bg-dark { background-color: var(--hub-bg-deep) !important; }