.dev-components-link {
  display: none;
  position: fixed;
  top: calc(var(--kesson-topbar-actual-height, var(--kesson-topbar-height)) + 2.95rem);
  right: 0.95rem;
  z-index: 58;
  padding: 0.2rem 0.48rem;
  border-radius: 999px;
  border: 1px solid var(--kesson-dev-hud-border);
  background: var(--kesson-dev-hud-bg);
  color: var(--kesson-dev-hud-text);
  font-size: var(--kesson-dev-hud-font-size, 0.80rem);
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 0.2s;
}

.dev-components-link:hover {
  opacity: 0.75;
}

.dev-components-link.is-visible {
  display: inline-flex;
  align-items: center;
}

#dev-version-inline {
  position: fixed;
  top: calc(var(--kesson-topbar-actual-height, var(--kesson-topbar-height)) + 2.5rem);
  left: 1rem;
  z-index: 58;
  color: rgba(var(--color-sub-text), 0.4);
  font-size: var(--kesson-graphic-switcher-btn, 0.88rem);
  letter-spacing: 0.06em;
  line-height: 1;
  font-family: var(--kesson-font-mono-ui);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.6s ease;
}

.dev-fps-panel {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 100;
}

#dev-links-toggle {
  position: fixed;
  top: calc(50% + 95px);
  right: 0;
  transform: translateY(-50%);
  z-index: 1001;
  background: var(--kesson-dev-toggle-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--kesson-dev-toggle-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: var(--kesson-dev-toggle-text);
  font-size: var(--kesson-dev-hud-font-size, 0.80rem);
  font-family: monospace;
  padding: 8px 5px;
  cursor: pointer;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

#dev-links-toggle:hover {
  color: var(--kesson-dev-toggle-text-hover);
  background: var(--kesson-dev-toggle-bg-hover);
}

.offcanvas-links {
  --bs-offcanvas-width: min(520px, 92vw);
  width: min(520px, 92vw);
}

#devLinksOffcanvas .nav-tabs {
  border-bottom-color: rgba(110, 140, 200, 0.35);
}

#devLinksOffcanvas .nav-tabs .nav-link {
  color: rgba(190, 210, 240, 0.75);
  border: 1px solid transparent;
  border-bottom: none;
}

#devLinksOffcanvas .nav-tabs .nav-link.active {
  color: rgba(220, 232, 255, 0.96);
  background: rgba(34, 44, 67, 0.78);
  border-color: rgba(110, 140, 200, 0.35);
}

.dev-links-item {
  background: rgba(14, 18, 30, 0.84);
  border-color: rgba(100, 140, 210, 0.24) !important;
}

.dev-links-key {
  font-size: 0.80rem;
  color: rgba(170, 190, 220, 0.7);
  font-family: monospace;
  letter-spacing: 0.05em;
}

.dev-links-url {
  font-size: 0.80rem;
  color: rgba(153, 202, 255, 0.95);
  user-select: all;
  white-space: normal;
  word-break: break-all;
}

.dev-links-json-preview {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid rgba(100, 140, 210, 0.24);
  border-radius: 0.35rem;
  background: rgba(12, 16, 26, 0.92);
  color: rgba(167, 214, 255, 0.9);
  padding: 0.75rem;
  font-size: 0.8rem;
}

@media (max-width: 767.98px) {
  #dev-version-inline {
    top: calc(var(--kesson-topbar-actual-height, var(--kesson-topbar-height)) + 2.1rem);
    left: 0.6rem;
    font-size: 0.62rem;
  }
}