/* Jet HUD browser preview — fond boutique */

html, body {
  background: #060708 !important;
  background-color: #060708 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  width: 100%;
  height: 100%;
}

.preview-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 50% -8%, rgba(0, 215, 189, 0.12), transparent 70%),
    radial-gradient(900px 600px at 100% 0%, rgba(0, 215, 189, 0.04), transparent 60%),
    #060708;
}

.preview-toolbar {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
  max-width: min(640px, calc(100vw - 32px));
}

.preview-toolbar button,
.preview-toolbar .preview-link {
  pointer-events: auto;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2A323B;
  background: rgba(14, 17, 20, 0.88);
  color: #EEF3F2;
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.preview-toolbar button:hover,
.preview-toolbar .preview-link:hover {
  border-color: rgba(0, 215, 189, 0.4);
  color: #00D7BD;
}

.preview-toolbar button.primary {
  border-color: rgba(0, 215, 189, 0.45);
  background: rgba(0, 215, 189, 0.12);
  color: #37F0D6;
}

.preview-badge {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 500;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(14, 17, 20, 0.85);
  border: 1px solid #1E242B;
  color: #97A1AA;
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.preview-badge strong {
  color: #00D7BD;
  font-weight: 700;
}

#main {
  z-index: 2;
}

#vol-menu {
  z-index: 40;
}