/* ===== NerdCore Core (CLEAN + FIXED) ===== */
* { box-sizing: border-box; }

/* =========================
   BASE
========================= */
body{
  margin:0;
  padding:10px;
  padding-bottom:52px; /* room for floating status bar */
  font-family: Arial, Helvetica, sans-serif;
  color:#eee;

  /* page atmosphere */
  background:
    radial-gradient(circle at 50% 10%, rgba(0,255,255,0.08), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255,43,220,0.06), transparent 70%),
    #000;
}

/* Links */
a{
  color:#00ffff;
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

/* Layout container */
.container{
  max-width:1000px;
  margin:0 auto;
  position:relative;
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,255,255,0.22), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(255,43,220,0.10), transparent 65%),
    #000;
  padding:32px 22px 24px;
  margin:0;
  border-bottom:1px solid #111;
  overflow:hidden;
}

/* fade-out light spill so it doesn’t hard-stop at nav */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-12px;
  height:12px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), #000);
  pointer-events:none;
}

.hero h1{
  color:#eee;
  font-size:3em;
  margin:0 0 6px 0;
  text-shadow:
    0 0 10px rgba(0,255,255,0.40),
    0 0 20px rgba(255,43,220,0.18);
}

.hero p{
  margin:0;
  color:#bdbdbd;
  opacity:0.9;
}

/* =========================
   NAV (neon rainbow always-on)
========================= */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 15px 0;
  padding:14px 0 6px 0;
  border-bottom:1px solid #222;
}

.nav a{
  position:relative;
  display:inline-block;
  padding:10px 18px;

  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-decoration:none;
  color:#ffffff;

  background:#000;
  border-radius:14px;
  overflow:hidden;

  box-shadow:
    0 0 12px rgba(0,255,255,0.9),
    0 0 20px rgba(127,92,255,0.8),
    0 0 30px rgba(255,43,220,0.7);

  text-shadow:
    0 0 8px rgba(0,255,255,1),
    0 0 14px rgba(127,92,255,1),
    0 0 22px rgba(255,43,220,1);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* animated rainbow halo */
.nav a::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:18px;
  background:linear-gradient(
    90deg,
    #ff004c,
    #ff8c00,
    #ffe600,
    #00ff6a,
    #00ffff,
    #7f5cff,
    #ff2bdc,
    #ff004c
  );
  background-size:500% 500%;
  filter:blur(14px);
  opacity:0.95;
  z-index:-1;
  animation: navGlow 6s linear infinite;
}

/* inner plate */
.nav a::after{
  content:"";
  position:absolute;
  inset:4px;
  background:#000;
  border-radius:12px;
  z-index:-1;
}

.nav a:hover{
  transform: scale(1.12);
  box-shadow:
    0 0 30px rgba(255,255,255,1),
    0 0 60px rgba(127,92,255,1),
    0 0 90px rgba(255,43,220,1);

  text-shadow:
    0 0 12px #ffffff,
    0 0 24px #7f5cff,
    0 0 40px #ff2bdc;

  text-decoration:none;
}

@keyframes navGlow{
  from { background-position: 0% 50%; }
  to   { background-position: 500% 50%; }
}

/* =========================
   SECTION + TYPE
========================= */
.section{
  background:#050505;
  border:1px solid #222;
  padding:15px;
  margin:15px 0;
}

h2{
  color:#00ff6a;
  margin:0 0 10px 0;
}

p{
  margin:6px 0;
  line-height:1.4;
}

/* =========================
   TWO COLUMN LAYOUT
========================= */
.twocol{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.leftcol,
.rightcol{
  flex:1;
  min-width:0;
}

.leftcol{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rightcol{ display:block; }

/* =========================
   LATEST TRANSMISSION (dot-matrix)
========================= */
.latest-transmission{
  margin:18px 0 22px;
}

.lt-label{
  font-family:"Courier New", monospace;
  font-size:0.75em;
  letter-spacing:2px;
  color:#b0b0b0;
  text-transform:uppercase;
  margin-bottom:6px;
}

.lt-box{
  position:relative;
  padding:16px 18px 20px;
  background:#0a0a0a;
  border:1px solid #333;
  font-family:"Courier New", monospace;
  font-size:0.95em;
  color:#d0d0d0;

  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
}

.lt-text{
  line-height:1.55;
  white-space:pre-wrap;
}

.lt-time{
  position:absolute;
  bottom:6px;
  right:12px;
  font-size:0.7em;
  color:#999;
  letter-spacing:1px;
}

/* =========================
   NOW IN STOCK (terminal + flicker background)
========================= */
.nowinstock{
  position:relative;
  overflow:hidden;

  background:#020802;
  border:1px solid rgba(0,255,106,0.6);
  padding:14px;

  box-shadow:
    inset 0 0 18px rgba(0,255,106,0.15),
    0 0 12px rgba(0,255,106,0.25);
}

/* flicker layer (background only) */
.nowinstock::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(0,255,106,0.12), rgba(0,255,106,0.05));
  mix-blend-mode:screen;
  opacity:0.9;
  z-index:0;
  animation: screenFlicker 3.2s infinite;
}

/* push content above flicker layer */
.nowinstock > *{
  position:relative;
  z-index:1;
}

@keyframes screenFlicker{
  0%   { opacity:0.9; }
  45%  { opacity:0.95; }
  48%  { opacity:0.65; }
  50%  { opacity:1; }
  52%  { opacity:0.7; }
  55%  { opacity:0.95; }
  100% { opacity:0.9; }
}

.nowinstock strong{
  color:#00ff6a;
  font-size:0.85em;
  letter-spacing:1px;
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
  text-shadow:
    0 0 6px rgba(0,255,106,0.9),
    0 0 12px rgba(0,255,106,0.4);
}

/* Stock list */
.stocklist{
  column-count:2;
  column-gap:20px;
}

.stockitem{
  break-inside:avoid;
  padding:6px 0;
  border-bottom:1px dotted rgba(0,255,106,0.4);
  font-size:0.9em;
  line-height:1.4;
  color:#caffdd;
  text-shadow:0 0 3px rgba(0,255,106,0.25);
}

/* =========================
   INVENTORY SCAN BUTTON (aged keycap, outside box)
========================= */
.scan-btn{
  position:relative;
  display:inline-block;
  width:auto;
  align-self:center;
  min-width:180px;
  margin-top:12px;

  padding:8px 10px;
  background: linear-gradient(180deg, #f4efd9, #cfc6a8);
  border:1px solid #9b9272;
  border-radius:2px;

  color:#4a3b2a;
  font-family:"VT323","IBM Plex Mono","Courier New",monospace;
  font-size:0.95em;
  letter-spacing:1.6px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,0.25);

  cursor:pointer;

  /* keycap depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -3px 5px rgba(0,0,0,0.35),
    0 6px 0 #6f6a55,
    0 14px 16px rgba(0,0,0,0.8);

  transition: background 0.12s ease;
}

/* subtle grit/texture */
.scan-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.08),
      rgba(0,0,0,0.08) 1px,
      rgba(255,255,255,0.04) 2px,
      rgba(255,255,255,0.04) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.04),
      rgba(0,0,0,0.04) 1px,
      rgba(255,255,255,0.02) 2px,
      rgba(255,255,255,0.02) 3px
    );
  mix-blend-mode:multiply;
  opacity:0.55;
  pointer-events:none;
}

.scan-btn:hover{
  background: linear-gradient(180deg, #fff6dc, #ddd2af);
}

.scan-btn:active{
  transform: translateY(4px);
  box-shadow: none !important;
}

/* =========================
   FORMS (sexy + readable + checkboxes aligned)
========================= */
form{
  background:#2b2b2b;
  border:1px solid #222;
  padding:18px;
  box-shadow:
    0 0 20px rgba(255,43,220,0.10),
    inset 0 0 30px rgba(0,0,0,0.75);
}

form p{ margin:12px 0; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width:100%;
  background:#1a1320;
  border:1px solid #3a2a44;
  color:#fff;
  padding:10px 12px;
  font-size:0.95em;
  border-radius:10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder,
textarea::placeholder{
  color: rgba(255,255,255,0.55);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus{
  outline:none;
  background:#22112b;
  border-color:#ff2bdc;
  box-shadow: 0 0 10px rgba(255,43,220,0.55);
}

/* Checkboxes aligned */
input[type="checkbox"]{
  width:auto;
  margin:0 10px 0 0;
  vertical-align:middle;
  accent-color:#ff2bdc;
}

form label{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* General buttons */
button{
  background: linear-gradient(135deg, #ff2bdc, #8f00ff);
  border:none;
  color:#000;
  padding:12px 18px;
  font-weight:bold;
  letter-spacing:1px;
  cursor:pointer;
  border-radius:12px;
  box-shadow: 0 0 18px rgba(255,43,220,0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:hover{
  box-shadow: 0 0 28px rgba(255,43,220,0.75);
  transform: translateY(-1px);
}

/* make sure scan-btn never inherits hover transforms */
.scan-btn:hover{
  transform:none !important;
}

/* =========================
   TABLES
========================= */
table{
  width:100%;
  border-collapse:collapse;
  background:#050505;
}
th{
  background:#111;
  color:#00ff6a;
}
td, th{
  border:1px solid #333;
  padding:6px;
}

/* =========================
   DISCORD NEON SIGN
========================= */
.discord-neon{
  display:block;
  margin-top:14px;
  padding:26px 14px;
  text-align:center;
  text-decoration:none;

  color:#00ffff;
  background:#000;

  font-weight:900;
  letter-spacing:3px;
  font-size:1.1em;

  border:3px solid #00ffff;
  border-radius:16px;

  box-shadow:
    0 0 10px rgba(0,255,255,0.75),
    0 0 22px rgba(0,255,255,0.45),
    0 0 44px rgba(0,255,255,0.20),
    inset 0 0 10px rgba(0,255,255,0.15);

  text-shadow:
    0 0 6px rgba(0,255,255,0.95),
    0 0 18px rgba(0,255,255,0.55);

  position:relative;
  overflow:hidden;
  animation: neon-flicker 3.2s infinite;
}

.discord-neon::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 6px
  );
  opacity:0.30;
  pointer-events:none;
  animation: scan-move 1.6s linear infinite;
}

.discord-neon::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 40% 35%, rgba(0,255,255,0.18), transparent 60%);
  pointer-events:none;
  transform: rotate(12deg);
}

.discord-neon:hover{
  color:#ff2bdc;
  border-color:#ff2bdc;
  box-shadow:
    0 0 12px rgba(255,43,220,0.75),
    0 0 26px rgba(255,43,220,0.45),
    0 0 52px rgba(255,43,220,0.22),
    inset 0 0 12px rgba(255,43,220,0.16);

  text-shadow:
    0 0 6px rgba(255,43,220,0.95),
    0 0 18px rgba(255,43,220,0.55);

  text-decoration:none;
}

@keyframes scan-move{
  from { transform: translateY(0); }
  to   { transform: translateY(18px); }
}

@keyframes neon-flicker{
  0%   { filter: brightness(1); }
  42%  { filter: brightness(1.05); }
  48%  { filter: brightness(0.97); }
  52%  { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

/* =========================
   STORE RADIO (monitor frame + label inside)
========================= */
.store-radio{
  margin-top:14px;
  padding:14px;
  background:#000;
  border-radius:16px;
  position:relative;
  box-shadow:
    0 0 40px rgba(0,0,0,0.9),
    inset 0 0 40px rgba(0,0,0,0.9);
}

/* overlays behind content */
.store-radio::before,
.store-radio::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.store-radio::before{
  inset:8px;
  border-radius:12px;
  background:#0a0a0a;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.9),
    inset 0 0 60px rgba(0,0,0,0.8);
}

.store-radio::after{
  inset:0;
  border-radius:16px;
  box-shadow:
    0 0 24px rgba(0,255,255,0.25),
    0 0 48px rgba(255,43,220,0.15);
}

.store-radio .radio-label,
.store-radio iframe{
  position:relative;
  z-index:1;
}

.radio-label{
  margin:0 0 10px 0;
  padding:6px 0 8px 0;
  color:#7f5cff;
  font-size:1.25em;
  line-height:1.15;
  letter-spacing:3px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;

  text-shadow:
    0 0 6px rgba(127,92,255,0.8),
    0 0 18px rgba(127,92,255,0.45),
    0 0 36px rgba(127,92,255,0.2);
}

.store-radio iframe{
  width:100%;
  border:none;
  border-radius:10px;
  display:block;
}

/* =========================
   FLOATING STATUS BAR (amber)
========================= */
.status-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);

  border-top:1px solid rgba(255,180,60,0.6);
  box-shadow:
    0 -2px 10px rgba(255,180,60,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);

  font-size:0.85em;
  color:#ffcf7a;
  z-index:999;
}

.status-left,
.status-center,
.status-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.status-center{
  color:#ffb347;
  text-shadow:
    0 0 6px rgba(255,180,60,0.9),
    0 0 14px rgba(255,180,60,0.4);
}

.status-right a{
  color:#ffd58a;
  text-decoration:none;
  font-weight:bold;
}

.status-right a:hover{
  color:#ff2bdc;
  text-shadow:0 0 10px rgba(255,43,220,0.7);
  text-decoration:none;
}

/* Right column H2 (neon gold) */
.rightcol h2{
  color:#ffd35a;
  text-shadow:
    0 0 6px rgba(255,211,90,0.8),
    0 0 18px rgba(255,211,90,0.4);
}

/* =========================
   PHOTOS (if used)
========================= */
.photo-grid{
  column-count:3;
  column-gap:18px;
}
@media (max-width: 900px){
  .photo-grid{ column-count:2; }
}
@media (max-width: 600px){
  .photo-grid{ column-count:1; }
}

.photo-item{
  break-inside:avoid;
  margin-bottom:18px;
  background:#000;
  border:1px solid #222;
  box-shadow:
    0 0 20px rgba(0,0,0,0.9),
    0 0 30px rgba(127,92,255,0.15);
  overflow:hidden;
}
.photo-item img{
  width:100%;
  display:block;
  filter: contrast(1.05) saturate(1.15);
}

.photo-jukebox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:720px;
  margin:0 auto;
}
.photo-frame{
  width:100%;
  max-width:800px;
  max-height:420px;
  overflow:hidden;
  background:#000;
  border:1px solid #222;
  box-shadow:
    0 0 30px rgba(0,0,0,0.8),
    0 0 40px rgba(127,92,255,0.15);
}
.photo-frame img{
  width:100%;
  display:block;
  object-fit:cover;
  height:420px;
}
.jukebox-controls{
  display:flex;
  gap:16px;
}
.jukebox-controls button{
  background:#111;
  border:1px solid #444;
  color:#eee;
  padding:10px 18px;
  font-family:monospace;
  cursor:pointer;
}
.jukebox-controls button:hover{
  background:#222;
}

/* =========================
   TRANSMISSIONS FEED (ROYGBIV neon boxes)
========================= */
.transmissions-feed{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:20px;
}

.transmission-box{
  font-family:"Courier New", monospace;
  padding:18px;
  border:4px solid;
  position:relative;
  background: rgba(0,0,0,0.85);
  box-shadow: 0 0 20px currentColor;
}

/* cycle neon colors */
.transmission-box:nth-child(6n+1){ color:#00ffff; }
.transmission-box:nth-child(6n+2){ color:#00ff6a; }
.transmission-box:nth-child(6n+3){ color:#ffd35a; }
.transmission-box:nth-child(6n+4){ color:#7f5cff; }
.transmission-box:nth-child(6n+5){ color:#ff2bdc; }
.transmission-box:nth-child(6n+6){ color:#4fa3ff; }

.transmission-text{
  font-size:1em;
  line-height:1.5;
  color:#eee;
}

.transmission-time{
  position:absolute;
  bottom:6px;
  right:10px;
  font-size:0.7em;
  opacity:0.7;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 820px){
  .twocol{ flex-direction:column; }
}

@media (max-width: 800px){
  .hero{
    padding-bottom:18px;
  }
  .hero::after{
    display:none;
  }
}
.map-terminal {
  margin-top: 20px;
  background: #000;
  border: 2px solid rgba(0,255,255,0.35);
  box-shadow:
    0 0 25px rgba(0,255,255,0.25),
    inset 0 0 30px rgba(0,0,0,0.9);
  padding: 12px;
  border-radius: 12px;
}

.map-terminal img {
  width: 100%;
  display: block;
  border-radius: 6px;
  filter: contrast(1.15) saturate(1.1);
}

.map-label {
  font-family: "Courier New", monospace;
  color: #00ffff;
  letter-spacing: 2px;
  font-size: 0.8em;
  margin-bottom: 8px;
  text-shadow:
    0 0 6px rgba(0,255,255,0.8),
    0 0 12px rgba(0,255,255,0.4);
}
/* ===== NerdCore Rainbow Admin Buttons ===== */

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-action {
  position: relative;
  padding: 12px 18px;
  background: #050505;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .04em;
  border: 2px solid #222;
  overflow: hidden;
  z-index: 0;
}

.admin-action::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    90deg,
    #ff2bdc,
    #00ffff,
    #00ff6a,
    #ffe600,
    #ff2bdc
  );
  z-index: -2;
  opacity: .7;
}

.admin-action::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #050505;
  z-index: -1;
}

.admin-action:hover::before {
  opacity: 1;
  filter: blur(4px);
}

.admin-action:hover {
  color: #fff;
  border-color: transparent;
  text-decoration: none;
}

.admin-action.ghost::before {
  opacity: .3;
}
/* ===== Admin: Wishlist table ===== */
.admin-search {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.admin-search input[type="text"] {
  flex: 1;
  max-width: 520px;
  padding: 10px;
  background: #000;
  color: #eee;
  border: 2px solid #333;
}

.admin-search button {
  padding: 10px 14px;
  border: 2px solid #333;
  background: #0a0a0a;
  color: #eee;
  font-weight: bold;
}

.admin-search button:hover {
  border-color: #00ffff;
}

.table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #0a0a0a;
}

.admin-table th,
.admin-table td {
  border: 1px solid #222;
  padding: 10px;
  vertical-align: top;
}

.admin-table th {
  color: #00ff6a;
  text-align: left;
  background: #050505;
}

.admin-table tr:hover td {
  background: #070707;
}

.kw-del {
  opacity: 0.85;
}

.kw-del:hover {
  opacity: 1;
  color: #ff2bdc;
  text-decoration: none;
}
.vendor-balance {
  font-size: 3em;
  font-weight: bold;
  margin: 10px 0;
}

.vendor-balance.pos {
  color: #00ff6a;
  text-shadow: 0 0 10px #00ff6a;
}

.vendor-balance.neg {
  color: #ff3355;
  text-shadow: 0 0 10px #ff3355;
}

.balance-label {
  opacity: 0.8;
  font-size: 0.9em;
}
