@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

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

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

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

.hgp-cockpit-native-app:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.026) 2px,rgba(255,255,255,.026) 4px),
    radial-gradient(ellipse at center,transparent 34%,rgba(0,0,18,.62) 100%);
}

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

.hgp-app-shell{
  position:fixed;
  inset:0;
  z-index:5;
  display:grid;
  grid-template-columns:178px minmax(0,1fr) 220px;
  grid-template-rows:62px minmax(0,1fr) 104px;
  grid-template-areas:
    "left top right"
    "left center right"
    "left bottom right";
  color:var(--hgp-text);
  pointer-events:none;
}

.hgp-app-left,
.hgp-app-top,
.hgp-app-right,
.hgp-app-bottom,
.hgp-app-center-wrap{
  pointer-events:auto;
}

.hgp-app-left{
  grid-area:left;
  padding:12px 10px;
  background:
    linear-gradient(90deg,rgba(1,7,22,.96),rgba(4,16,32,.82)),
    radial-gradient(circle at top left,rgba(47,232,255,.12),transparent 38%);
  border-right:1px solid rgba(47,232,255,.32);
  box-shadow:0 0 28px rgba(47,232,255,.10);
  overflow:auto;
}

.hgp-app-right{
  grid-area:right;
  padding:12px 10px;
  background:
    linear-gradient(270deg,rgba(24,0,10,.95),rgba(11,8,20,.84)),
    radial-gradient(circle at top right,rgba(255,59,104,.14),transparent 38%);
  border-left:1px solid rgba(255,59,104,.32);
  overflow:auto;
}

.hgp-app-top{
  grid-area:top;
  display:grid;
  grid-template-columns:1fr 230px 180px;
  align-items:center;
  gap:16px;
  padding:8px 14px;
  background:linear-gradient(180deg,rgba(2,8,24,.94),rgba(3,14,28,.58));
  border-bottom:1px solid rgba(47,232,255,.36);
}

.hgp-app-bottom{
  grid-area:bottom;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  padding:10px 14px;
  background:linear-gradient(0deg,rgba(2,8,24,.96),rgba(3,14,28,.70));
  border-top:1px solid rgba(47,232,255,.34);
}

.hgp-app-center-wrap{
  grid-area:center;
  position:relative;
  min-width:0;
  min-height:0;
  padding:14px;
}

.hgp-app-center-wrap:before{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid rgba(47,232,255,.34);
  box-shadow:
    inset 0 0 44px rgba(47,232,255,.08),
    0 0 38px rgba(47,232,255,.08);
  pointer-events:none;
}

.hgp-app-center-wrap:after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  background:
    linear-gradient(rgba(47,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,232,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
  opacity:.40;
}

.hgp-app-center{
  position:relative;
  z-index:2;
  height:100%;
  overflow:auto;
  padding:18px;
  scrollbar-gutter:stable;
}

.hgp-corner{
  position:fixed;
  z-index:20;
  width:32px;
  height:32px;
  pointer-events:none;
}

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

.hgp-shell-title{
  font-family:var(--hgp-font-hud);
  font-size:24px;
  font-weight:900;
  letter-spacing:5px;
  line-height:1;
  color:#fff;
  text-shadow:0 0 16px rgba(47,232,255,.55);
}

.hgp-shell-sub{
  margin-top:4px;
  font-family:var(--hgp-font-hud);
  font-size:10px;
  letter-spacing:4px;
  color:rgba(47,232,255,.72);
}

.hgp-sys{
  text-align:center;
  font-family:var(--hgp-font-hud);
  font-size:11px;
  color:var(--hgp-green);
  text-shadow:0 0 10px rgba(66,255,157,.55);
}

.hgp-live{
  color:var(--hgp-red);
  letter-spacing:3px;
  font-size:10px;
}

.hgp-orbit{
  text-align:right;
  font-family:var(--hgp-font-hud);
  color:var(--hgp-green);
  font-size:11px;
}

.hgp-section{
  color:rgba(47,232,255,.76);
  font-family:var(--hgp-font-hud);
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(47,232,255,.25);
  padding-bottom:7px;
  margin:16px 0 10px;
}

.hgp-section:first-child{
  margin-top:0;
}

.hgp-side-nav{
  display:grid;
  gap:8px;
}

.hgp-side-nav a,
.hgp-side-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:9px 8px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:1px solid rgba(47,232,255,.34);
  background:linear-gradient(180deg,rgba(47,232,255,.14),rgba(3,16,30,.82));
  color:#fff;
  font-family:var(--hgp-font-hud);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 13px rgba(47,232,255,.12);
}

.hgp-side-nav a:hover,
.hgp-side-button:hover{
  background:linear-gradient(180deg,rgba(66,255,157,.22),rgba(3,24,30,.92));
  box-shadow:0 0 20px rgba(47,232,255,.25);
}

.hgp-stat-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;
}

.hgp-stat-key{
  color:rgba(180,218,255,.62);
  text-transform:uppercase;
}

.hgp-stat-val{
  font-family:var(--hgp-font-hud);
  font-weight:900;
}

.hgp-blue{color:var(--hgp-cyan);text-shadow:0 0 10px rgba(47,232,255,.65)}
.hgp-green{color:var(--hgp-green);text-shadow:0 0 10px rgba(66,255,157,.65)}
.hgp-red{color:var(--hgp-red);text-shadow:0 0 10px rgba(255,59,104,.65)}
.hgp-amber{color:var(--hgp-gold);text-shadow:0 0 10px rgba(255,211,90,.60)}

.hgp-progress{
  height:7px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin:6px 0 9px;
}

.hgp-progress span{
  display:block;
  height:100%;
  width:50%;
  background:linear-gradient(90deg,var(--hgp-blue),var(--hgp-cyan));
  box-shadow:0 0 12px rgba(47,232,255,.35);
}

.hgp-progress.green span{
  background:linear-gradient(90deg,#0ba850,var(--hgp-green));
}

.hgp-progress.red span{
  background:linear-gradient(90deg,var(--hgp-red),var(--hgp-pink));
}

.hgp-category-mini,
.hgp-alert-mini{
  padding:8px;
  margin:4px 0;
  background:rgba(47,232,255,.045);
  border-left:3px solid transparent;
  font-size:11px;
}

.hgp-category-mini:hover{
  border-left-color:var(--hgp-cyan);
  background:rgba(47,232,255,.12);
}

.hgp-alert-mini{
  border-left-color:var(--hgp-red);
  color:var(--hgp-red);
  font-weight:900;
}

.hgp-mini-bars{
  height:54px;
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.hgp-mini-bars span{
  flex:1;
  min-width:6px;
  background:rgba(47,232,255,.28);
  border-top:1px solid var(--hgp-cyan);
  box-shadow:0 0 8px rgba(47,232,255,.18);
}

.hgp-log{
  height:72px;
  overflow:hidden;
  color:rgba(140,210,255,.74);
  font-size:11px;
  line-height:1.45;
}

.hgp-finance-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.hgp-mini-card{
  border:1px solid rgba(47,232,255,.24);
  background:rgba(2,12,20,.62);
  padding:10px;
}

.hgp-mini-card .k{
  font-family:var(--hgp-font-hud);
  font-size:9px;
  letter-spacing:2px;
  color:rgba(47,232,255,.8);
  text-transform:uppercase;
}

.hgp-mini-card .v{
  margin-top:6px;
  font-family:var(--hgp-font-hud);
  font-size:18px;
  font-weight:900;
}

/* Existing app content becomes cockpit-native */
body.hgp-cockpit-native-app main,
body.hgp-cockpit-native-app .shell,
body.hgp-cockpit-native-app main.shell,
body.hgp-cockpit-native-app main.gamer-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  z-index:3 !important;
}

body.hgp-cockpit-native-app .hero,
body.hgp-cockpit-native-app .panel,
body.hgp-cockpit-native-app .card,
body.hgp-cockpit-native-app 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;
  border-radius:0 !important;
}

body.hgp-cockpit-native-app .hero{
  margin-bottom:14px !important;
  border-top:2px solid rgba(47,232,255,.45) !important;
}

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

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

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

body.hgp-cockpit-native-app #nav a,
body.hgp-cockpit-native-app .nav,
body.hgp-cockpit-native-app button,
body.hgp-cockpit-native-app .btn{
  min-height:38px !important;
  padding:9px 14px !important;
  white-space:nowrap !important;
  border-radius:0 !important;
  border:1px solid rgba(47,232,255,.42) !important;
  background:linear-gradient(180deg,rgba(47,232,255,.16),rgba(3,16,30,.88)) !important;
  color:#fff !important;
  font-family:var(--hgp-font-hud) !important;
  font-size:11px !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-cockpit-native-app #nav a:hover,
body.hgp-cockpit-native-app .nav:hover,
body.hgp-cockpit-native-app button: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;
}

body.hgp-cockpit-native-app input,
body.hgp-cockpit-native-app select,
body.hgp-cockpit-native-app 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-cockpit-native-app select option{
  background:#0d2032 !important;
  color:#fff !important;
}

body.hgp-cockpit-native-app .product-img,
body.hgp-cockpit-native-app 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-cockpit-native-app table{
  background:rgba(2,8,18,.40) !important;
}

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

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

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

body.hgp-cockpit-native-app .grid-2{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
}

body.hgp-cockpit-native-app .grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

body.hgp-cockpit-native-app .grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

@media(max-width:1180px){
  .hgp-app-shell{
    position:relative;
    min-height:100vh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
      "top"
      "left"
      "center"
      "right"
      "bottom";
    overflow:auto;
  }

  html,
  body.hgp-cockpit-native-app{
    overflow:auto !important;
  }

  .hgp-app-left,
  .hgp-app-right,
  .hgp-app-bottom,
  .hgp-app-top{
    margin:8px;
  }

  .hgp-app-center-wrap{
    padding:8px;
  }

  .hgp-app-center{
    height:auto;
    min-height:70vh;
  }

  body.hgp-cockpit-native-app .grid-2,
  body.hgp-cockpit-native-app .grid-3,
  body.hgp-cockpit-native-app .grid-4{
    grid-template-columns:1fr !important;
  }
}