:root{
  --hgp-cyan:#2fe8ff;
  --hgp-cyan2:#9cf7ff;
  --hgp-blue:#2889ff;
  --hgp-red:#ff3b68;
  --hgp-pink:#ff58bd;
  --hgp-green:#42ff9d;
  --hgp-gold:#ffd35a;
  --hgp-bg:#020610;
  --hgp-panel:rgba(4,16,28,.86);
  --hgp-panel2:rgba(9,29,43,.88);
  --hgp-line:rgba(47,232,255,.36);
  --hgp-redline:rgba(255,59,104,.32);
  --hgp-text:#edfaff;
  --hgp-muted:#91b6ca;
  --hgp-font-hud:Orbitron,Rajdhani,Segoe UI,Arial,sans-serif;
  --hgp-font-mono:"Share Tech Mono",Consolas,monospace;
}

html{
  background:#000 !important;
}

body.hgp-native-cockpit{
  min-height:100vh !important;
  overflow-x:hidden !important;
  color:var(--hgp-text) !important;
  background:#000 !important;
  font-family:var(--hgp-font-mono) !important;
}

#hgp-cockpit-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-10;
  background:#000;
}

.hgp-native-cockpit::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-8;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.028) 2px,rgba(255,255,255,.028) 4px),
    radial-gradient(ellipse at center,transparent 40%,rgba(0,0,15,.58) 100%);
}

.hgp-native-cockpit::after{
  content:"HGP ORBITAL COMMAND";
  position:fixed;
  right:-160px;
  top:130px;
  transform:rotate(38deg);
  z-index:-7;
  pointer-events:none;
  font-family:var(--hgp-font-hud);
  font-size:72px;
  font-weight:900;
  letter-spacing:.18em;
  color:rgba(47,232,255,.045);
  white-space:nowrap;
}

.hgp-cockpit-frame{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hgp-cockpit-frame .hgp-edge-left,
.hgp-cockpit-frame .hgp-edge-right{
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  background:
    linear-gradient(90deg,rgba(1,7,22,.95),rgba(5,22,36,.38),transparent);
  border-right:1px solid rgba(47,232,255,.24);
  box-shadow:0 0 28px rgba(47,232,255,.10);
}

.hgp-cockpit-frame .hgp-edge-right{
  right:0;
  left:auto;
  background:
    linear-gradient(270deg,rgba(24,0,10,.92),rgba(35,6,18,.38),transparent);
  border-left:1px solid rgba(255,59,104,.24);
  border-right:0;
}

.hgp-cockpit-frame .hgp-edge-left{
  left:0;
}

.hgp-cockpit-frame .hgp-top-rail,
.hgp-cockpit-frame .hgp-bottom-rail{
  position:absolute;
  left:72px;
  right:72px;
  height:42px;
  background:
    linear-gradient(180deg,rgba(2,8,24,.96),rgba(3,14,28,.72),transparent);
  border-bottom:1px solid rgba(47,232,255,.28);
}

.hgp-cockpit-frame .hgp-top-rail{
  top:0;
}

.hgp-cockpit-frame .hgp-bottom-rail{
  bottom:0;
  background:
    linear-gradient(0deg,rgba(2,8,24,.96),rgba(3,14,28,.72),transparent);
  border-top:1px solid rgba(47,232,255,.28);
  border-bottom:0;
}

.hgp-cockpit-frame .hgp-corner{
  position:absolute;
  width:42px;
  height:42px;
}

.hgp-cockpit-frame .tl{top:0;left:0;border-top:3px solid var(--hgp-cyan);border-left:3px solid var(--hgp-cyan)}
.hgp-cockpit-frame .tr{top:0;right:0;border-top:3px solid var(--hgp-cyan);border-right:3px solid var(--hgp-cyan)}
.hgp-cockpit-frame .bl{bottom:0;left:0;border-bottom:3px solid var(--hgp-cyan);border-left:3px solid var(--hgp-cyan)}
.hgp-cockpit-frame .br{bottom:0;right:0;border-bottom:3px solid var(--hgp-cyan);border-right:3px solid var(--hgp-cyan)}

.hgp-cockpit-dock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  pointer-events:none;
  padding:10px 14px;
  border:1px solid rgba(47,232,255,.35);
  background:
    linear-gradient(180deg,rgba(9,29,43,.82),rgba(2,8,18,.88));
  color:var(--hgp-cyan2);
  font-family:var(--hgp-font-hud);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:
    0 0 18px rgba(47,232,255,.18),
    inset 0 0 16px rgba(47,232,255,.06);
}

body.hgp-native-cockpit main,
body.hgp-native-cockpit .shell,
body.hgp-native-cockpit main.shell,
body.hgp-native-cockpit main.gamer-shell{
  position:relative !important;
  z-index:5 !important;
  width:min(1500px,calc(100vw - 120px)) !important;
  margin:56px auto 72px auto !important;
}

body.hgp-native-cockpit .hero,
body.hgp-native-cockpit .panel,
body.hgp-native-cockpit .card,
body.hgp-native-cockpit section.panel{
  background:
    linear-gradient(180deg,rgba(8,24,38,.90),rgba(2,8,18,.86)) !important;
  border:1px solid rgba(47,232,255,.34) !important;
  box-shadow:
    0 0 22px rgba(47,232,255,.18),
    inset 0 0 24px rgba(47,232,255,.05) !important;
  backdrop-filter:blur(7px) !important;
}

body.hgp-native-cockpit .hero{
  border-radius:0 0 22px 22px !important;
  border-top:2px solid rgba(47,232,255,.45) !important;
}

body.hgp-native-cockpit h1,
body.hgp-native-cockpit h2,
body.hgp-native-cockpit h3,
body.hgp-native-cockpit .hud-title{
  font-family:var(--hgp-font-hud) !important;
  text-shadow:0 0 16px rgba(47,232,255,.45) !important;
}

body.hgp-native-cockpit .eyebrow,
body.hgp-native-cockpit label,
body.hgp-native-cockpit th,
body.hgp-native-cockpit .label{
  color:var(--hgp-cyan2) !important;
  font-family:var(--hgp-font-hud) !important;
  letter-spacing:.14em !important;
}

body.hgp-native-cockpit #nav{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  width:100% !important;
  margin:16px 0 18px 0 !important;
  padding:12px 14px !important;
  border:1px solid rgba(47,232,255,.35) !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg,rgba(8,24,38,.92),rgba(2,8,18,.90)) !important;
  box-shadow:
    0 0 20px rgba(47,232,255,.12),
    inset 0 0 18px rgba(47,232,255,.05) !important;
}

body.hgp-native-cockpit #nav a,
body.hgp-native-cockpit .nav,
body.hgp-native-cockpit button,
body.hgp-native-cockpit .btn{
  min-height:46px !important;
  padding:12px 18px !important;
  white-space:nowrap !important;
  border-radius:12px !important;
  border:1px solid rgba(47,232,255,.42) !important;
  background:
    linear-gradient(180deg,rgba(47,232,255,.16),rgba(3,16,30,.90)) !important;
  color:#fff !important;
  font-family:var(--hgp-font-hud) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-decoration:none !important;
  box-shadow:0 0 16px rgba(47,232,255,.15) !important;
}

body.hgp-native-cockpit #nav a:hover,
body.hgp-native-cockpit .nav:hover,
body.hgp-native-cockpit button:hover,
body.hgp-native-cockpit .btn:hover{
  background:
    linear-gradient(180deg,rgba(66,255,157,.22),rgba(3,24,30,.92)) !important;
  box-shadow:
    0 0 22px rgba(47,232,255,.28),
    0 0 16px rgba(66,255,157,.15) !important;
  transform:translateY(-1px);
}

body.hgp-native-cockpit input,
body.hgp-native-cockpit select,
body.hgp-native-cockpit textarea{
  background:#071827 !important;
  color:#fff !important;
  border:1px solid rgba(47,232,255,.40) !important;
  font-family:var(--hgp-font-mono) !important;
  box-shadow:
    inset 0 0 16px rgba(47,232,255,.06),
    0 0 8px rgba(47,232,255,.08) !important;
}

body.hgp-native-cockpit select option{
  background:#0d2032 !important;
  color:#fff !important;
}

body.hgp-native-cockpit .product-img,
body.hgp-native-cockpit img.product-img{
  background:#fff !important;
  box-shadow:
    0 0 20px rgba(47,232,255,.20),
    0 0 50px rgba(47,232,255,.10) !important;
}

body.hgp-native-cockpit table{
  background:rgba(2,8,18,.40) !important;
}

body.hgp-native-cockpit thead th{
  background:rgba(47,232,255,.08) !important;
  color:var(--hgp-green) !important;
}

body.hgp-native-cockpit td,
body.hgp-native-cockpit th{
  border-bottom:1px solid rgba(47,232,255,.16) !important;
}

body.hgp-native-cockpit .green{color:var(--hgp-green) !important;text-shadow:0 0 12px rgba(66,255,157,.55) !important}
body.hgp-native-cockpit .amber{color:var(--hgp-gold) !important;text-shadow:0 0 12px rgba(255,211,90,.55) !important}
body.hgp-native-cockpit .red{color:var(--hgp-red) !important;text-shadow:0 0 12px rgba(255,59,104,.55) !important}
body.hgp-native-cockpit .cyan{color:var(--hgp-cyan) !important;text-shadow:0 0 12px rgba(47,232,255,.55) !important}

@media(max-width:980px){
  body.hgp-native-cockpit main,
  body.hgp-native-cockpit .shell,
  body.hgp-native-cockpit main.shell,
  body.hgp-native-cockpit main.gamer-shell{
    width:min(100vw - 18px,1500px) !important;
    margin:48px auto 60px auto !important;
  }
  .hgp-cockpit-frame .hgp-edge-left,
  .hgp-cockpit-frame .hgp-edge-right{
    width:24px;
  }
  .hgp-cockpit-frame .hgp-top-rail,
  .hgp-cockpit-frame .hgp-bottom-rail{
    left:24px;
    right:24px;
  }
}