body {

  margin: 0;

  font-family: "Share Tech Mono", monospace;

  background: #000;

  color: #caffd6;

  overflow-x: hidden;

}

/* BACKGROUND LAYERS */

.bg-noise {

  position: fixed;

  inset: 0;

  background: url("https://www.transparenttextures.com/patterns/noise.png");

  opacity: 0.07;

  z-index: 1;

}

.bg-grid {

  position: fixed;

  inset: 0;

  background-image:

    linear-gradient(rgba(60, 255, 140, 0.07) 1px, transparent 1px),

    linear-gradient(90deg, rgba(60, 255, 140, 0.07) 1px, transparent 1px);

  background-size: 40px 40px;

  z-index: 2;

}

.bg-vignette {

  position: fixed;

  inset: 0;

  background: radial-gradient(circle at center, rgba(90, 255, 160, 0.12), #000 80%);

  z-index: 3;

}

/* MAIN PANEL */

.scanner-container {

  position: relative;

  z-index: 10;

  width: 90%;

  max-width: 650px;

  margin: 60px auto;

  padding: 26px;

  background: rgba(10, 12, 11, 0.92);

  border-radius: 28px;

  border: 2px solid #38ff88;

  box-shadow: 0 0 40px #38ff8855, inset 0 0 40px #38ff8822;

  backdrop-filter: blur(8px);

}

/* HEADER */

.scanner-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}

.gorboy-logo {

  width: 56px;

  height: 56px;

  border-radius: 10px;

  box-shadow: 0 0 20px #38ff8877;

  position: relative;

}

/* GLITCH ANIMATION FOR LOGO */

.gorboy-logo.glitch {

  animation: gorboyGlitch 0.18s infinite;

}

@keyframes gorboyGlitch {

  0% {

    transform: translate(0, 0) skewX(0deg);

    filter: drop-shadow(0 0 0 #38ff88);

  }

  20% {

    transform: translate(-3px, 1px) skewX(-8deg);

    filter: drop-shadow(-4px 0 6px #38ff88);

  }

  40% {

    transform: translate(3px, -2px) skewX(5deg);

    filter: drop-shadow(4px 0 6px #ff3c7f);

  }

  60% {

    transform: translate(-2px, 2px) skewX(-5deg);

    filter: drop-shadow(-3px 0 5px #38ff88);

  }

  80% {

    transform: translate(2px, -1px) skewX(3deg);

    filter: drop-shadow(3px 0 5px #ff3c7f);

  }

  100% {

    transform: translate(0, 0) skewX(0deg);

    filter: drop-shadow(0 0 0 #38ff88);

  }

}

.scanner-title h1 {

  margin: 0;

  font-size: 22px;

  color: #38ff88;

}

.subtitle {

  margin: 0;

  font-size: 13px;

  color: #9dffc1aa;

}

/* RPC CHIP */

.rpc-status {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  border: 1px solid #38ff8866;

  background: #0c130e;

  border-radius: 12px;

}

.rpc-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: #ff3c3c;

}

.rpc-label {

  font-size: 13px;

}

/* INPUT */

.input-row {

  display: flex;

  margin-top: 18px;

  gap: 12px;

}

.input-row input {

  flex: 1;

  padding: 14px;

  font-size: 16px;

  background: #0c160f;

  border: 1px solid #38ff88;

  border-radius: 14px;

  color: #caffd6;

  outline: none;

}

.send-btn {

  padding: 14px 20px;

  font-size: 15px;

  background: #38ff88;

  color: #032312;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  font-weight: bold;

  transition: 0.2s;

}

.send-btn:hover {

  background: #4fff9c;

}

/* QUICK CMDS */

.cmd-row {

  display: flex;

  gap: 10px;

  margin-top: 16px;

}

.cmd-btn {

  flex: 1;

  padding: 10px;

  background: #0e1a12;

  border: 1px solid #38ff8855;

  border-radius: 10px;

  color: #38ff88;

  font-size: 14px;

  cursor: pointer;

  transition: 0.2s;

}

.cmd-btn:hover {

  background: #153f28;

}

/* METRICS */

.metrics-row {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 14px;

}

.metric-chip {

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid #38ff8850;

  background: rgba(6, 20, 12, 0.9);

  font-size: 12px;

  min-width: 80px;

  text-align: center;

}

/* TABS */

.tabs-row {

  display: flex;

  gap: 8px;

  margin-top: 16px;

}

.tab-btn {

  flex: 1;

  padding: 8px 10px;

  border-radius: 999px;

  border: 1px solid #38ff8844;

  background: #050b07;

  color: #8bffba;

  font-size: 12px;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  transition: 0.2s;

}

.tab-btn.active {

  background: #38ff88;

  color: #032312;

  border-color: #38ff88;

}

/* TERMINAL */

.terminal-box {

  margin-top: 14px;

  height: 350px;

  background: #050b07;

  border-radius: 16px;

  border: 1px solid #38ff8850;

  box-shadow: inset 0 0 35px #38ff8855;

  overflow: hidden;

}

.terminal-pane {

  height: 100%;

  padding: 20px;

  overflow-y: auto;

  white-space: pre-wrap;

  font-size: 15px;

  line-height: 1.55;

}

.terminal-placeholder {

  opacity: 0.45;

  font-size: 14px;

  color: #9fffb3;

}

.hidden {

  display: none;

}

/* FOOTER */

.scanner-footer {

  text-align: center;

  margin-top: 18px;

  font-size: 13px;

  color: #85ffb8aa;

}

/* MOBILE */

@media (max-width: 480px) {

  .scanner-container {

    margin: 24px auto;

    padding: 18px;

  }

  .scanner-title h1 {

    font-size: 18px;

  }

  .terminal-box {

    height: 300px;

  }

}