:root{
  --bg-0:#040712;
  --bg-1:#071221;
  --bg-2:#0b1830;
  --bg-3:#0e1b24;
  --panel:#081720ee;
  --panel-2:#0b1e29f2;
  --panel-3:#0e2635f4;

  --cyan:#3ae7ff;
  --cyan-2:#8ff4ff;
  --blue:#42a5ff;
  --blue-2:#2a73ff;
  --aqua:#4dffe1;
  --green:#72ffb5;
  --lime:#b7ff5a;
  --gold:#ffd24a;
  --orange:#ffab47;
  --pink:#ff5ea8;
  --magenta:#f04cff;
  --red:#ff5b6e;
  --violet:#8f7dff;
  --white:#effbff;
  --text:#eaf7ff;
  --muted:#a8c7d8;

  --line:rgba(58,231,255,.35);
  --line-strong:rgba(143,244,255,.60);
  --line-green:rgba(114,255,181,.35);

  --glow-cyan:0 0 10px rgba(58,231,255,.65),0 0 24px rgba(58,231,255,.35),0 0 48px rgba(58,231,255,.18);
  --glow-green:0 0 10px rgba(114,255,181,.55),0 0 24px rgba(114,255,181,.28),0 0 48px rgba(114,255,181,.12);
  --glow-gold:0 0 10px rgba(255,210,74,.45),0 0 24px rgba(255,210,74,.25);
  --glow-pink:0 0 10px rgba(240,76,255,.45),0 0 24px rgba(240,76,255,.25);

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --font-body:Inter,Segoe UI,Arial,sans-serif;
  --font-hud:Orbitron,Rajdhani,Segoe UI,Arial,sans-serif;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--text);
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 15% 8%, rgba(58,231,255,.18), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(114,255,181,.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(42,115,255,.20), transparent 42%),
    linear-gradient(180deg, #030610 0%, #05101d 36%, #04101a 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(rgba(58,231,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,231,255,.05) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  opacity:.45;
}

body::after{
  content:"HGP COMMAND GRID";
  position:fixed;
  right:-180px;
  top:130px;
  transform:rotate(36deg);
  font-family:var(--font-hud);
  font-size:74px;
  font-weight:900;
  letter-spacing:.18em;
  color:rgba(143,244,255,.05);
  pointer-events:none;
  z-index:-1;
  white-space:nowrap;
}

a{
  color:var(--cyan-2);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

main.shell,
main.gamer-shell,
.shell{
  width:min(1500px, calc(100vw - 36px));
  margin:20px auto 90px;
}

.hero,
.panel,
.card,
section,
article{
  position:relative;
  background:
    linear-gradient(180deg, rgba(11,27,39,.96) 0%, rgba(6,18,27,.96) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 18px rgba(58,231,255,.05),
    0 0 24px rgba(58,231,255,.10),
    0 0 70px rgba(58,231,255,.07);
}

.hero::before,
.panel::before,
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(58,231,255,.65), transparent 18%, transparent 82%, rgba(114,255,181,.55)) top/100% 2px no-repeat,
    linear-gradient(90deg, rgba(114,255,181,.55), transparent 18%, transparent 82%, rgba(58,231,255,.65)) bottom/100% 2px no-repeat;
  opacity:.75;
}

.hero{
  padding:24px 26px;
  margin-bottom:16px;
  overflow:hidden;
}

.hero h1,
h1{
  font-family:var(--font-hud);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1;
  margin:0 0 10px 0;
  color:var(--white);
  text-shadow:
    0 0 12px rgba(58,231,255,.20),
    0 0 28px rgba(58,231,255,.14);
}

h1{font-size:clamp(34px, 4.3vw, 62px)}
h2,h3{
  font-family:var(--font-hud);
  letter-spacing:.01em;
  color:#f4fdff;
}

.eyebrow{
  color:var(--green);
  font-family:var(--font-hud);
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:8px;
  text-shadow:var(--glow-green);
}

.muted,
.small{
  color:var(--muted);
}

.pill,
.statusBadge,
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  margin:4px 6px 4px 0;
  border-radius:999px;
  border:1px solid rgba(143,244,255,.48);
  background:
    linear-gradient(180deg, rgba(58,231,255,.16), rgba(8,22,30,.96)),
    radial-gradient(circle at center, rgba(114,255,181,.10), transparent 70%);
  color:var(--cyan-2);
  font-family:var(--font-hud);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:none;
  box-shadow:var(--glow-cyan);
}

.statusBadge::before,
.badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 12px currentColor;
}

.status-hgp,
.status-costed{
  color:var(--green);
  border-color:rgba(114,255,181,.55);
  box-shadow:var(--glow-green);
}

.status-webonly,
.status-other{
  color:var(--pink);
  border-color:rgba(255,94,168,.55);
  box-shadow:var(--glow-pink);
}

.status-image-missing{
  color:var(--gold);
  border-color:rgba(255,210,74,.55);
  box-shadow:var(--glow-gold);
}

#nav,
.navBar,
.topLinks{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center;
  margin:16px 0 18px 0 !important;
  padding:12px 14px !important;
  border:1px solid rgba(58,231,255,.30);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(10,22,31,.96), rgba(7,15,22,.96));
  box-shadow:
    inset 0 0 18px rgba(58,231,255,.05),
    0 0 20px rgba(58,231,255,.08);
}

#nav a,
.nav,
.topLinks a,
button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(143,244,255,.52);
  background:
    linear-gradient(180deg, rgba(51,175,255,.22), rgba(12,28,40,.98)),
    linear-gradient(90deg, rgba(240,76,255,.07), rgba(58,231,255,.08), rgba(114,255,181,.10));
  color:#f4fdff;
  font-family:var(--font-hud);
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:
    0 0 18px rgba(58,231,255,.16),
    inset 0 0 14px rgba(58,231,255,.08);
  transition:all .14s ease;
}

#nav a:hover,
.nav:hover,
.topLinks a:hover,
button:hover,
.btn:hover{
  transform:translateY(-1px) scale(1.01);
  background:
    linear-gradient(180deg, rgba(114,255,181,.28), rgba(10,35,41,.98)),
    linear-gradient(90deg, rgba(58,231,255,.14), rgba(240,76,255,.10));
  box-shadow:
    0 0 22px rgba(58,231,255,.24),
    0 0 14px rgba(114,255,181,.16),
    inset 0 0 16px rgba(114,255,181,.08);
}

.panel{
  padding:18px;
  margin:14px 0;
}

.grid,
.grid-2,
.grid-3,
.grid-4{
  display:grid;
  gap:14px;
}

.grid-2{grid-template-columns:1.1fr 1fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  padding:16px;
  border-radius:20px;
  min-height:100px;
  overflow:hidden;
}

.card::after{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(143,244,255,.35);
  background:
    radial-gradient(circle at 35% 35%, rgba(58,231,255,.35), transparent 50%),
    linear-gradient(180deg, rgba(58,231,255,.12), rgba(114,255,181,.12));
  box-shadow:0 0 16px rgba(58,231,255,.20);
}

.label,
label,
th{
  color:var(--cyan-2);
  font-family:var(--font-hud);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.value{
  margin-top:8px;
  font-size:18px;
  font-weight:900;
  font-family:var(--font-hud);
  letter-spacing:.01em;
}

.metricValue{
  font-size:18px;
  font-family:var(--font-hud);
  font-weight:900;
}

.bigValue{
  font-size:38px;
  font-family:var(--font-hud);
  font-weight:900;
}

.green{color:var(--green);text-shadow:var(--glow-green)}
.cyan{color:var(--cyan);text-shadow:var(--glow-cyan)}
.amber{color:var(--gold);text-shadow:var(--glow-gold)}
.red{color:var(--pink);text-shadow:var(--glow-pink)}
.blue{color:var(--blue);text-shadow:0 0 18px rgba(66,165,255,.28)}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

thead th{
  background:linear-gradient(180deg, rgba(58,231,255,.10), rgba(114,255,181,.05));
  color:var(--green);
  border-bottom:1px solid rgba(58,231,255,.28);
}

th,td{
  padding:12px 10px;
  border-bottom:1px solid rgba(143,244,255,.14);
  text-align:left;
  vertical-align:top;
  font-size:13px;
}

tbody tr{
  transition:background .12s ease, transform .12s ease;
}
tbody tr:hover td{
  background:rgba(58,231,255,.08);
}

input,
select,
textarea{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid rgba(143,244,255,.45);
  background:
    linear-gradient(180deg, rgba(7,18,27,.98), rgba(5,14,22,.98));
  color:#f2fbff;
  padding:11px 14px;
  font-size:14px;
  outline:none;
  box-shadow:
    inset 0 0 16px rgba(58,231,255,.06),
    0 0 8px rgba(58,231,255,.08);
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(114,255,181,.70);
  box-shadow:
    0 0 0 1px rgba(114,255,181,.22),
    0 0 18px rgba(114,255,181,.16),
    inset 0 0 14px rgba(58,231,255,.08);
}

select{
  color:#ffffff !important;
  background-color:#0a1721 !important;
}

select option{
  color:#ffffff !important;
  background:#102537 !important;
  font-size:14px !important;
  padding:10px !important;
}

select option:checked,
select option:hover{
  background:#2b6fdf !important;
  color:#ffffff !important;
}

textarea{
  min-height:100px;
  resize:vertical;
}

.product-img,
img.product-img{
  width:100%;
  max-height:480px;
  object-fit:contain;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,250,255,.97));
  box-shadow:
    0 0 20px rgba(58,231,255,.18),
    0 0 50px rgba(58,231,255,.10);
}

.placeholder{
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:18px;
  border:1px dashed rgba(114,255,181,.45);
  background:
    linear-gradient(135deg, rgba(58,231,255,.07), rgba(114,255,181,.05)),
    repeating-linear-gradient(45deg, rgba(58,231,255,.03) 0 8px, transparent 8px 16px);
  color:#dcfff3;
  padding:24px;
}

.alert{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  margin:3px;
  border-radius:999px;
  border:1px solid rgba(255,210,74,.45);
  background:rgba(255,210,74,.08);
  color:var(--gold);
  font-size:11px;
  font-family:var(--font-hud);
  font-weight:900;
}

.focusNote,
.formHint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(114,255,181,.30);
  background:linear-gradient(180deg, rgba(114,255,181,.10), rgba(58,231,255,.06));
  color:#f0fff8;
}

.legendRow,
.filterBar,
.editActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

.editGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.statsStrip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:14px 0 18px 0;
}

.statsChip{
  position:relative;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(143,244,255,.32);
  background:
    linear-gradient(180deg, rgba(10,24,35,.95), rgba(8,18,28,.98));
  box-shadow:
    inset 0 0 16px rgba(58,231,255,.05),
    0 0 20px rgba(58,231,255,.08);
}

.statsChip .k{
  font-size:11px;
  color:var(--cyan-2);
  font-family:var(--font-hud);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.statsChip .v{
  margin-top:8px;
  font-size:24px;
  font-family:var(--font-hud);
  font-weight:900;
}

.footerDock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:20;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(143,244,255,.38);
  background:
    linear-gradient(180deg, rgba(13,29,39,.96), rgba(8,18,28,.98));
  box-shadow:
    0 0 18px rgba(58,231,255,.18),
    inset 0 0 14px rgba(58,231,255,.05);
  color:var(--cyan-2);
  font-family:var(--font-hud);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:#06111b;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--cyan), var(--green), var(--blue));
  border-radius:999px;
  border:2px solid #06111b;
}

@media (max-width: 1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  .statsStrip{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 760px){
  .shell, main.shell, main.gamer-shell{
    width:min(100vw - 18px, 1500px);
    margin-top:10px;
  }
  #nav,.navBar,.topLinks{
    gap:8px !important;
    padding:10px !important;
  }
  #nav a,.nav,.topLinks a,button,.btn{
    width:100%;
  }
  .grid-4,.grid-3,.grid-2,.editGrid,.statsStrip{
    grid-template-columns:1fr;
  }
  .footerDock{display:none}
}