/* Relay dashboard clean Vanta-style pass */

html,
body {
  background: #07192b !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 24%, rgba(53, 166, 255, .16), transparent 32%),
    radial-gradient(circle at 78% 10%, rgba(255, 78, 180, .11), transparent 30%),
    linear-gradient(180deg, #081a2d 0%, #061523 100%);
}

main,
.dashboard,
.dashboard-page,
.dashboard-shell,
.tools-page,
.tools-shell,
.page,
.app {
  background: transparent !important;
}

.hero,
.dashboard-hero,
.tools-hero,
.effects-hero {
  min-height: 42vh !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero h1,
.dashboard-hero h1,
.tools-hero h1,
.effects-hero h1 {
  font-size: clamp(52px, 8vw, 108px) !important;
  letter-spacing: -0.07em !important;
  line-height: .88 !important;
  color: #fff !important;
}

.hero p,
.dashboard-hero p,
.tools-hero p,
.effects-hero p {
  color: rgba(255, 255, 255, .78) !important;
  font-size: clamp(18px, 2.3vw, 30px) !important;
}

.tools-grid,
.effects-grid,
.services-grid,
.tool-grid,
.cards,
.grid {
  gap: 24px !important;
}

.tool-card,
.effect-card,
.service-card,
.relay-tool,
.tool-tile,
.effect-tile,
.card,
.tile,
[data-tool],
[data-effect] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 8px !important;
}

.tool-card:hover,
.effect-card:hover,
.service-card:hover,
.relay-tool:hover,
.tool-tile:hover,
.effect-tile:hover,
.card:hover,
.tile:hover,
[data-tool]:hover,
[data-effect]:hover {
  background: rgba(255, 255, 255, .045) !important;
  transform: translateY(-1px) !important;
}

.relay-no-mouse-react::before,
.relay-no-mouse-react::after,
.relay-no-mouse-react *::before,
.relay-no-mouse-react *::after {
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

.relay-no-mouse-react {
  --mx: 50% !important;
  --my: 50% !important;
  --x: 50% !important;
  --y: 50% !important;
  --glow-opacity: 0 !important;
  --cursor-glow: 0 !important;
}

.customize,
.customizer,
.settings-panel,
.controls-panel,
.effect-controls,
.config-panel,
.panel {
  background: rgba(255, 255, 255, .96) !important;
  color: #242424 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .20) !important;
}

.customize *,
.customizer *,
.settings-panel *,
.controls-panel *,
.effect-controls *,
.config-panel *,
.panel * {
  color: inherit;
}

button,
.btn,
.button {
  border-radius: 5px !important;
  box-shadow: none !important;
}