:root{
  --final-cyan:#34edff;
  --final-cyan-soft:rgba(52,237,255,.35);
  --final-orange:#ff8c2a;
  --final-red:#ff3a62;
  --final-green:#41ff9d;
  --final-gold:#ffd35a;
  --final-glass:rgba(3,14,24,.58);
  --final-glass-strong:rgba(5,20,34,.76);
}

/* Make the app feel like it lives inside a real transparent orbital station */
body{
  background:#000 !important;
}

#space{
  opacity:.82 !important;
  filter:saturate(1.25) contrast(1.08);
}

.hgp-orbital-station{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

/* Deep space nebula */
.hgp-orbital-station:before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 48% 40%,rgba(38,149,255,.22),transparent 16%),
    radial-gradient(circle at 64% 43%,rgba(255,58,98,.13),transparent 24%),
    radial-gradient(circle at 24% 24%,rgba(52,237,255,.11),transparent 28%),
    radial-gradient(circle at 80% 16%,rgba(255,140,42,.10),transparent 23%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.36));
  animation:hgpNebulaFloat 18s ease-in-out infinite alternate;
}

/* Cockpit metal ribs and transparent window */
.hgp-cockpit-window{
  position:absolute;
  inset:72px 200px 118px 200px;
  border:2px solid rgba(52,237,255,.42);
  border-radius:24px;
  background:
    linear-gradient(90deg,rgba(52,237,255,.10),transparent 13%,transparent 87%,rgba(255,58,98,.08)),
    radial-gradient(circle at 50% 48%,rgba(52,237,255,.09),transparent 38%);
  box-shadow:
    inset 0 0 70px rgba(52,237,255,.10),
    inset 0 0 180px rgba(0,0,0,.35),
    0 0 50px rgba(52,237,255,.12);
  opacity:.85;
}

.hgp-cockpit-window:before,
.hgp-cockpit-window:after{
  content:"";
  position:absolute;
  top:-70px;
  bottom:-70px;
  width:190px;
  background:
    linear-gradient(180deg,rgba(255,140,42,.22),transparent 8%,transparent 92%,rgba(255,140,42,.18)),
    repeating-linear-gradient(0deg,rgba(52,237,255,.20) 0 2px,transparent 2px 28px),
    linear-gradient(90deg,rgba(8,28,44,.94),rgba(10,39,56,.35),transparent);
  border:1px solid rgba(52,237,255,.20);
  box-shadow:
    inset 0 0 35px rgba(52,237,255,.12),
    0 0 28px rgba(52,237,255,.10);
}

.hgp-cockpit-window:before{
  left:-190px;
  transform:skewY(-7deg);
  transform-origin:right center;
}

.hgp-cockpit-window:after{
  right:-190px;
  transform:skewY(7deg);
  transform-origin:left center;
  background:
    linear-gradient(180deg,rgba(255,58,98,.20),transparent 8%,transparent 92%,rgba(255,140,42,.16)),
    repeating-linear-gradient(0deg,rgba(52,237,255,.18) 0 2px,transparent 2px 28px),
    linear-gradient(270deg,rgba(22,4,20,.94),rgba(38,7,28,.35),transparent);
}

/* Ceiling/floor command room texture */
.hgp-station-ceiling,
.hgp-station-floor{
  position:absolute;
  left:170px;
  right:230px;
  height:92px;
  border:1px solid rgba(52,237,255,.18);
  background:
    repeating-linear-gradient(90deg,rgba(52,237,255,.13) 0 2px,transparent 2px 42px),
    repeating-linear-gradient(0deg,rgba(255,140,42,.18) 0 3px,transparent 3px 22px),
    linear-gradient(180deg,rgba(12,32,44,.92),rgba(0,0,0,.18));
  box-shadow:inset 0 0 36px rgba(52,237,255,.10);
  opacity:.7;
}

.hgp-station-ceiling{
  top:-18px;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
}

.hgp-station-floor{
  bottom:-22px;
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
  background:
    repeating-linear-gradient(90deg,rgba(52,237,255,.10) 0 2px,transparent 2px 46px),
    repeating-linear-gradient(0deg,rgba(255,140,42,.14) 0 3px,transparent 3px 24px),
    linear-gradient(0deg,rgba(12,32,44,.94),rgba(0,0,0,.20));
}

/* Animated holographic planet in the distance */
.hgp-planet{
  position:absolute;
  width:310px;
  height:310px;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,rgba(170,255,255,.95) 0 5%,rgba(52,237,255,.75) 6% 15%,rgba(40,132,255,.58) 18% 38%,rgba(9,36,84,.95) 62%,rgba(0,0,0,.96) 100%),
    repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.12) 11px 12px),
    repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.08) 16px 17px);
  box-shadow:
    0 0 34px rgba(52,237,255,.42),
    0 0 120px rgba(52,237,255,.18),
    inset -38px -25px 70px rgba(0,0,0,.75);
  opacity:.62;
  animation:hgpPlanetDrift 14s ease-in-out infinite alternate;
}

.hgp-planet:before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(52,237,255,.32);
  box-shadow:0 0 32px rgba(52,237,255,.25);
}

.hgp-planet:after{
  content:"";
  position:absolute;
  left:-22%;
  right:-22%;
  top:47%;
  height:18px;
  border-top:1px solid rgba(52,237,255,.38);
  border-bottom:1px solid rgba(52,237,255,.16);
  border-radius:50%;
  transform:rotate(-12deg);
  box-shadow:0 0 22px rgba(52,237,255,.18);
}

/* Hologram rings and radar lines */
.hgp-holo-ring{
  position:absolute;
  left:50%;
  top:42%;
  width:430px;
  height:430px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(52,237,255,.20);
  box-shadow:0 0 24px rgba(52,237,255,.16);
  animation:hgpSpin 24s linear infinite;
  opacity:.65;
}

.hgp-holo-ring:before,
.hgp-holo-ring:after{
  content:"";
  position:absolute;
  inset:42px;
  border-radius:50%;
  border:1px dashed rgba(52,237,255,.22);
}

.hgp-holo-ring:after{
  inset:88px;
  border-color:rgba(255,140,42,.20);
  animation:hgpSpinReverse 18s linear infinite;
}

/* Small station lights */
.hgp-light-row{
  position:absolute;
  left:240px;
  right:280px;
  top:22px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  opacity:.78;
}

.hgp-light-row span{
  width:28px;
  height:4px;
  background:var(--final-orange);
  box-shadow:0 0 12px rgba(255,140,42,.75);
  animation:hgpLightPulse 2.8s ease-in-out infinite;
}

.hgp-light-row span:nth-child(even){
  background:var(--final-cyan);
  box-shadow:0 0 12px rgba(52,237,255,.75);
  animation-delay:.8s;
}

/* Better content transparency and harmony */
.shell{
  background:transparent !important;
}

.left,
.right,
.top,
.bottom{
  backdrop-filter:blur(10px) saturate(1.25);
}

.left{
  background:
    linear-gradient(90deg,rgba(1,7,22,.90),rgba(5,20,35,.58),rgba(5,20,35,.20)) !important;
}

.right{
  background:
    linear-gradient(270deg,rgba(24,0,10,.90),rgba(12,8,22,.58),rgba(12,8,22,.20)) !important;
}

.top,
.bottom{
  background:rgba(1,8,18,.56) !important;
}

.main-wrap:before{
  border-radius:22px;
  background:linear-gradient(180deg,rgba(52,237,255,.035),rgba(0,0,0,.10));
}

.main{
  padding:22px !important;
}

.product-stage{
  align-items:stretch;
  gap:22px !important;
}

.panel{
  background:
    linear-gradient(180deg,rgba(5,20,34,.72),rgba(2,8,18,.56)) !important;
  border-color:rgba(52,237,255,.42) !important;
  border-radius:22px;
  backdrop-filter:blur(13px) saturate(1.35);
  box-shadow:
    0 0 24px rgba(52,237,255,.18),
    0 0 80px rgba(52,237,255,.08),
    inset 0 0 34px rgba(52,237,255,.06) !important;
}

.product-visual,
.product-data{
  min-height:0 !important;
}

.product-title{
  font-size:clamp(30px,3.3vw,54px) !important;
  text-align:left;
  max-width:100%;
}

.product-subtitle{
  max-width:900px;
  color:rgba(237,250,255,.78) !important;
}

.control-row{
  grid-template-columns:minmax(0,1fr) 170px !important;
  gap:14px !important;
}

.image-frame{
  height:360px !important;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 50%,rgba(52,237,255,.10),rgba(0,0,0,.35)),
    rgba(0,0,0,.28) !important;
  box-shadow:
    inset 0 0 42px rgba(52,237,255,.09),
    0 0 24px rgba(52,237,255,.10);
}

.image-frame img{
  border-radius:14px;
  max-width:94%;
  max-height:94%;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}

.description{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(52,237,255,.18);
  border-radius:14px;
  padding:12px;
  max-height:150px !important;
}

.metrics{
  gap:12px !important;
}

.metric{
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(7,28,44,.72),rgba(2,10,20,.62)) !important;
  border-color:rgba(52,237,255,.30) !important;
  box-shadow:
    inset 0 0 22px rgba(52,237,255,.05),
    0 0 16px rgba(52,237,255,.08);
}

.metric-value{
  font-size:24px !important;
}

.info-grid{
  gap:14px !important;
}

.info-table{
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(52,237,255,.18);
}

.info-table th,
.info-table td{
  padding:10px 10px !important;
}

.link-row a,
.nav a,
.side-btn,
button{
  border-radius:12px !important;
  background:
    linear-gradient(180deg,rgba(52,237,255,.16),rgba(3,16,30,.72)) !important;
}

.link-row a:hover,
.nav a:hover,
.side-btn:hover,
button:hover{
  background:
    linear-gradient(180deg,rgba(65,255,157,.24),rgba(3,24,30,.82)) !important;
}

/* Make side panels cleaner, less cramped */
.left,
.right{
  font-size:12px;
}

.section{
  margin-top:18px !important;
}

.stat-row{
  padding:7px 0 !important;
}

/* Final cinematic overlays */
.hgp-glass-reflection{
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.055) 35%,transparent 47%),
    linear-gradient(290deg,transparent 0 60%,rgba(52,237,255,.045) 61%,transparent 72%);
  opacity:.55;
  mix-blend-mode:screen;
}

.hgp-bottom-console-lights{
  position:absolute;
  left:240px;
  right:280px;
  bottom:38px;
  display:flex;
  justify-content:center;
  gap:16px;
  opacity:.75;
}

.hgp-bottom-console-lights span{
  width:54px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--final-cyan),var(--final-orange));
  box-shadow:
    0 0 14px rgba(52,237,255,.55),
    0 0 18px rgba(255,140,42,.32);
  animation:hgpLightPulse 3.4s ease-in-out infinite;
}

.hgp-bottom-console-lights span:nth-child(2n){
  animation-delay:1s;
  background:linear-gradient(90deg,var(--final-red),var(--final-orange));
}

@keyframes hgpNebulaFloat{
  0%{transform:translate3d(-1.2%,.4%,0) scale(1)}
  100%{transform:translate3d(1.2%,-.8%,0) scale(1.04)}
}

@keyframes hgpPlanetDrift{
  0%{transform:translate(-50%,-50%) scale(1)}
  100%{transform:translate(calc(-50% + 22px),calc(-50% - 10px)) scale(1.04)}
}

@keyframes hgpSpin{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes hgpSpinReverse{
  from{transform:rotate(0)}
  to{transform:rotate(-360deg)}
}

@keyframes hgpLightPulse{
  0%,100%{opacity:.42;filter:brightness(.8)}
  50%{opacity:1;filter:brightness(1.35)}
}

@media(max-width:1180px){
  html,body{
    overflow:auto !important;
  }

  .hgp-orbital-station{
    position:fixed;
  }

  .hgp-cockpit-window{
    inset:80px 24px 120px 24px;
  }

  .hgp-station-ceiling,
  .hgp-station-floor,
  .hgp-light-row,
  .hgp-bottom-console-lights{
    left:24px;
    right:24px;
  }

  .hgp-planet{
    width:230px;
    height:230px;
  }

  .hgp-holo-ring{
    width:320px;
    height:320px;
  }

  .control-row{
    grid-template-columns:1fr !important;
  }
}