.vehicle-stage {
  min-height: 560px;
  padding: .75rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(31, 214, 255, .2), transparent 40%),
    linear-gradient(160deg, #020713 0%, #071b3b 52%, #111735 100%);
}

.yacht-builder-page .vehicle-stage {
  background:
    radial-gradient(circle at 50% 92%, rgba(0, 214, 255, .24), transparent 38%),
    linear-gradient(180deg, #04152b 0%, #07345a 53%, #06111d 100%);
}

.vehicle-stage svg {
  width: 100%;
  height: 540px;
  display: block;
  filter: drop-shadow(0 .45rem .5rem rgba(0, 0, 0, .45));
}

[data-preview-view][hidden] { display: none !important; }

.preview-view-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.preview-view-buttons .btn {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .65rem;
  --bs-btn-font-size: .78rem;
}

.vehicle-outline {
  fill: #c8ced8;
  stroke: #171c25;
  stroke-width: 7;
  stroke-linejoin: round;
}

.vehicle-panel {
  fill: #222a36;
  stroke: #0e1218;
  stroke-width: 5;
}

.vehicle-window {
  fill: #89a7ba;
  stroke: #171c25;
  stroke-width: 5;
}

.vehicle-detail {
  fill: none;
  stroke: #2f3948;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vehicle-tire {
  fill: #0f1218;
  stroke: #06080b;
  stroke-width: 10;
}

.vehicle-rim-base {
  fill: #8e98a5;
  stroke: #dce3ea;
  stroke-width: 4;
}

.vehicle-zone {
  transition: opacity .22s ease, fill .22s ease, stroke .22s ease, filter .22s ease;
}

.vehicle-zone.zone-off {
  stroke: #ff7189 !important;
  fill: rgba(255, 113, 137, .1) !important;
  opacity: .46 !important;
  stroke-dasharray: 10 8;
  animation: none !important;
  filter: drop-shadow(0 0 2px rgba(255, 113, 137, .32));
}

.vehicle-zone.zone-on {
  stroke: url(#rgbGradient) !important;
  fill: rgba(255, 255, 255, .06) !important;
  opacity: 1 !important;
  stroke-dasharray: 2 15;
  stroke-linecap: round;
  animation: vehicleLedTravel 1.45s linear infinite !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 0, 140, .95))
    drop-shadow(0 0 10px rgba(0, 220, 255, .78));
}

.vehicle-zone.zone-fill.zone-on {
  fill: url(#rgbFillGradient) !important;
  stroke: #aef8ff !important;
  stroke-dasharray: none;
  animation: vehicleZonePulse 1.35s ease-in-out infinite alternate !important;
  opacity: .82 !important;
}

@keyframes vehicleLedTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -68; }
}

@keyframes vehicleZonePulse {
  from { opacity: .52; filter: drop-shadow(0 0 4px rgba(0, 220, 255, .7)); }
  to { opacity: .95; filter: drop-shadow(0 0 12px rgba(255, 0, 140, .92)); }
}

.view-title {
  fill: #f7fbff;
  font-family: Oxanium, Inter, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 2px;
}

.view-note {
  fill: #c7d8eb;
  font-family: Inter, sans-serif;
  font-size: 16px;
}

.control-icon {
  opacity: .25;
  transition: opacity .2s ease, filter .2s ease;
}

.control-icon circle,
.control-icon rect {
  fill: rgba(6, 21, 47, .88);
  stroke: #8795a8;
  stroke-width: 3;
}

.control-icon path,
.control-icon .icon-dot {
  fill: none;
  stroke: #8795a8;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-icon .icon-dot { fill: #8795a8; stroke: none; }

.control-icon.control-icon-on {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(0, 220, 255, .9));
}

.control-icon.control-icon-on circle,
.control-icon.control-icon-on rect {
  stroke: #e9fbff;
}

.control-icon.control-icon-on path,
.control-icon.control-icon-on .icon-dot {
  stroke: #3ce7ff;
  fill: #3ce7ff;
}

.deck-surface { fill: #d7c49d; stroke: #2d3138; stroke-width: 6; }
.water-line { fill: none; stroke: rgba(79, 221, 255, .48); stroke-width: 8; stroke-linecap: round; }
.room-shell { fill: #f1eadc; stroke: #28303a; stroke-width: 7; }
.room-fixture { fill: #b8c0c9; stroke: #343c46; stroke-width: 4; }

@media (max-width: 991.98px) {
  .vehicle-stage { min-height: 470px; }
  .vehicle-stage svg { height: 450px; }
}

@media (max-width: 575.98px) {
  .vehicle-stage { min-height: 390px; padding: .25rem; }
  .vehicle-stage svg { height: 375px; }
  .preview-toolbar { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-zone.zone-on,
  .vehicle-zone.zone-fill.zone-on {
    animation: none !important;
  }
}