/* Google font для заголовка GGT DYOR */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

/* ===== BASE RESET ===== */

*,

*::before,

*::after {

  box-sizing: border-box;

}

html,

body {

  margin: 0;

  padding: 0;

}

body.ggt-body {

  min-height: 100vh;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",

    "Roboto", sans-serif;

  background: radial-gradient(

    circle at 20% 0,

    #041d16 0,

    #020c09 35%,

    #020407 100%

  );

  color: #e2fff5;

  overflow-x: hidden;

}

/* subtle background grid + noise */

.ggt-grid-overlay {

  pointer-events: none;

  position: fixed;

  inset: 0;

  background-image: linear-gradient(

      rgba(0, 100, 70, 0.18) 1px,

      transparent 1px

    ),

    linear-gradient(90deg, rgba(0, 100, 70, 0.18) 1px, transparent 1px);

  background-size: 32px 32px;

  opacity: 0.35;

  z-index: 0;

}

.ggt-noise {

  pointer-events: none;

  position: fixed;

  inset: 0;

  background-image: url("https://i.ibb.co/6m7yH7q/noise-512.png");

  mix-blend-mode: soft-light;

  opacity: 0.18;

  z-index: 0;

}

/* ===== SHELL / LAYOUT ===== */

.ggt-shell {

  position: relative;

  z-index: 1;

  max-width: 1320px; /* было 1240px — чуть шире общий фрейм */

  margin: 18px auto 28px;

  padding: 18px 18px 24px;

  border-radius: 18px;

  background: radial-gradient(

    circle at 0 0,

    #0c2b21 0,

    #020806 55%,

    #000202 100%

  );

  box-shadow:

    0 0 0 1px rgba(0, 255, 193, 0.12),

    0 0 32px rgba(0, 0, 0, 0.85);

}

/* HEADER */

.ggt-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 12px 16px 14px;

  border-radius: 12px;

  border: 1px solid rgba(0, 255, 193, 0.16);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 193, 0.06),

    transparent 50%

  );

  margin-bottom: 12px; /* чуть меньше, т.к. под ним rpc-row */

}

.ggt-logo-block {

  display: flex;

  align-items: center;

  gap: 12px;

}

.ggt-logo-orb {

  width: 46px;

  height: 46px;

  border-radius: 12px;

  background: radial-gradient(

    circle at 30% 15%,

    #e8ff6b 0,

    #00ff9e 55%,

    #004435 100%

  );

  box-shadow:

    0 0 12px rgba(0, 255, 190, 0.9),

    0 0 26px rgba(0, 0, 0, 1);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

}

.ggt-logo-img {

  width: 82%;

  height: 82%;

  border-radius: 10px;

  object-fit: cover;

}

/* glitch when scanning */

.ggt-logo-orb.glitch-active {

  animation: logoGlitch 0.36s steps(2, end) 1;

}

@keyframes logoGlitch {

  0% {

    transform: translate(0, 0);

  }

  20% {

    transform: translate(-1px, 1px);

    filter: hue-rotate(10deg);

  }

  40% {

    transform: translate(1px, -1px);

    filter: hue-rotate(-10deg);

  }

  60% {

    transform: translate(-1px, -1px);

    filter: hue-rotate(18deg);

  }

  80% {

    transform: translate(1px, 1px);

    filter: hue-rotate(-18deg);

  }

  100% {

    transform: translate(0, 0);

    filter: none;

  }

}

.ggt-logo-text {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.ggt-logo-kicker {

  font-size: 9px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(177, 255, 227, 0.75);

}

/* УНИКАЛЬНЫЙ СТИЛЬ ДЛЯ "GGT DYOR" */

.ggt-logo-title {

  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont,

    "SF Pro Text", "Roboto", sans-serif;

  font-size: 18px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  background: linear-gradient(

    90deg,

    #f6fff4 0%,

    #b7ffe0 30%,

    #62ffd0 65%,

    #f6fff4 100%

  );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  text-shadow:

    0 0 10px rgba(0, 255, 190, 0.55),

    0 0 20px rgba(0, 0, 0, 0.9);

}

.ggt-logo-sub {

  font-size: 10px;

  letter-spacing: 0.11em;

  text-transform: uppercase;

  color: rgba(152, 215, 198, 0.85);

}

.ggt-header-controls {

  display: flex;

  align-items: center;

  gap: 14px;

}

.ggt-badge-stack {

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.ggt-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 8px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 174, 0.2);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 174, 0.12),

    transparent 65%

  );

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

}

.ggt-badge .dot {

  width: 9px;

  height: 9px;

  border-radius: 999px;

  background: radial-gradient(

    circle at 30% 20%,

    #ffd2e0 0,

    #ff7286 40%,

    #6f0010 100%

  );

  box-shadow:

    0 0 8px rgba(0, 255, 167, 0.85),

    0 0 18px rgba(0, 0, 0, 1);

}

.ggt-badge .label {

  color: rgba(185, 255, 226, 0.78);

}

.ggt-badge .value {

  color: #edfff7;

}

.ggt-badge-mode {

  background: linear-gradient(

    90deg,

    rgba(0, 255, 174, 0.15),

    rgba(0, 43, 36, 0.7)

  );

}

.ggt-badge-mode .label {

  margin-right: 6px;

}

.ggt-wallet-block {

  display: flex;

  align-items: center;

  gap: 10px;

}

.ggt-wallet-status {

  display: flex;

  flex-direction: column;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

}

.ggt-wallet-status .label {

  color: rgba(169, 232, 211, 0.75);

}

.ggt-wallet-status .value {

  color: #ffffff;

}

/* buttons / chips */

.ggt-btn {

  padding: 7px 16px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 190, 0.7);

  background: radial-gradient(

    circle at 30% 0,

    #00ffbf 0,

    #00795b 50%,

    #00261c 100%

  );

  box-shadow:

    0 0 10px rgba(0, 255, 167, 0.8),

    0 0 22px rgba(0, 0, 0, 0.9);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: #031610;

  cursor: pointer;

  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;

}

.ggt-btn:hover {

  transform: translateY(-1px);

  box-shadow:

    0 0 14px rgba(0, 255, 194, 1),

    0 0 28px rgba(0, 0, 0, 1);

}

.ggt-btn:active {

  transform: translateY(1px) scale(0.98);

  box-shadow:

    0 0 6px rgba(0, 255, 154, 0.8),

    0 0 18px rgba(0, 0, 0, 1);

}

.ggt-chip {

  padding: 3px 9px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 174, 0.3);

  background: rgba(0, 20, 15, 0.85);

  color: rgba(178, 240, 220, 0.9);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  cursor: pointer;

  transition:

    background 0.12s ease,

    color 0.12s ease,

    border-color 0.12s ease;

}

.ggt-chip-small {

  font-size: 9px;

  padding-block: 3px;

}

.ggt-chip:hover {

  border-color: rgba(0, 255, 190, 0.8);

}

.ggt-chip-active {

  background: radial-gradient(

    circle at 20% 0,

    #00ffb9 0,

    #003a2a 52%,

    #000f0b 100%

  );

  color: #04110c;

}

/* eye toggle */

.ggt-eye-toggle {

  font-size: 12px;

  padding: 4px 10px;

  opacity: 0.75;

  margin-left: 4px;

  transition:

    opacity 0.2s ease,

    background 0.2s ease,

    border-color 0.2s ease;

}

.ggt-eye-toggle:hover {

  opacity: 1;

}

/* active state (hints hidden) */

.ggt-eye-toggle.eye-off {

  background: radial-gradient(

    circle at 20% 0,

    #ff9a9a 0,

    #5b0000 60%,

    #000 100%

  );

  border-color: rgba(255, 120, 120, 0.8);

  color: #ffecec;

}

/* ===== RPC STATUS ROW (под хедером) ===== */

.ggt-rpc-status-row {

  margin-bottom: 16px;

  display: flex;

  justify-content: stretch;

}

/* === RPC STATUS BADGE · MAIN STYLE === */

.rpc-status-badge {

  font-family: "JetBrains Mono", "Fira Code", monospace;

  width: 100%;

  background:

    radial-gradient(

      circle at top left,

      rgba(0, 255, 195, 0.18),

      transparent 55%

    ),

    radial-gradient(

      circle at bottom right,

      rgba(0, 180, 255, 0.16),

      transparent 55%

    ),

    rgba(5, 8, 22, 0.96);

  border: 1px solid rgba(0, 255, 195, 0.35);

  border-radius: 14px;

  padding: 10px 14px;

  color: #e5f7ff;

  box-shadow:

    0 0 10px rgba(0, 255, 195, 0.22),

    0 0 35px rgba(0, 120, 255, 0.18);

  backdrop-filter: blur(8px);

  display: flex;

  flex-direction: column;

  gap: 6px;

  box-sizing: border-box;

  position: relative;

  overflow: hidden;

}

/* Верхняя строка: заголовок + endpoint + статус */

.rpc-status-row-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}

.rpc-status-left {

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.rpc-status-kicker {

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(163, 208, 255, 0.78);

}

.rpc-status-title-line {

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: 8px;

}

.rpc-status-title {

  font-size: 11px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(187, 214, 255, 0.95);

}

.rpc-status-endpoint {

  font-size: 10px;

  color: #b7ffe7;

  opacity: 0.9;

}

/* правый блок — капсула состояния */

.rpc-status-right {

  display: flex;

  align-items: center;

}

.rpc-status-state {

  font-size: 10px;

  font-weight: 600;

  padding: 3px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  text-transform: uppercase;

  letter-spacing: 0.2em;

}

/* Низ: метрики */

.rpc-status-row-bottom {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 16px;

  margin-top: 4px;

  font-size: 9px;

}

.rpc-status-metric {

  color: rgba(184, 208, 241, 0.92);

}

/* Подпись */

.rpc-status-hint {

  margin-top: 4px;

  font-size: 8px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(151, 178, 213, 0.7);

  border-top: 1px dashed rgba(80, 114, 157, 0.5);

  padding-top: 5px;

}

/* Лёгкий сканер по низу */

.rpc-status-badge::after {

  content: "";

  position: absolute;

  left: -40%;

  bottom: 0;

  width: 80%;

  height: 1px;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(0, 255, 195, 0.9),

    transparent

  );

  opacity: 0.6;

  transform: translateX(-10%);

  animation: rpcScanLine 6s linear infinite;

}

@keyframes rpcScanLine {

  0% {

    transform: translateX(-120%);

    opacity: 0;

  }

  20% {

    opacity: 0.7;

  }

  50% {

    transform: translateX(120%);

  }

  80% {

    opacity: 0.2;

  }

  100% {

    transform: translateX(200%);

    opacity: 0;

  }

}

/* Общий мягкий пульс */

.rpc-status-badge {

  animation: rpcBadgePulse 5s ease-in-out infinite;

}

@keyframes rpcBadgePulse {

  0%,

  100% {

    box-shadow:

      0 0 10px rgba(0, 255, 195, 0.18),

      0 0 26px rgba(0, 120, 255, 0.18);

  }

  50% {

    box-shadow:

      0 0 16px rgba(0, 255, 195, 0.35),

      0 0 40px rgba(0, 120, 255, 0.28);

  }

}

/* Состояния через data-атрибут + цвет капсулы */

.rpc-status-badge[data-rpc-state="online"] {

  border-color: rgba(0, 255, 195, 0.6);

}

.rpc-status-badge[data-rpc-state="degraded"] {

  border-color: rgba(255, 193, 7, 0.9);

  animation-duration: 3.5s;

}

.rpc-status-badge[data-rpc-state="offline"] {

  border-color: rgba(255, 82, 122, 0.95);

  animation: rpcBadgeAlert 1.4s ease-in-out infinite;

}

@keyframes rpcBadgeAlert {

  0%,

  100% {

    box-shadow:

      0 0 8px rgba(255, 82, 122, 0.35),

      0 0 20px rgba(255, 0, 51, 0.35);

    transform: translateY(0);

  }

  50% {

    box-shadow:

      0 0 14px rgba(255, 82, 122, 0.75),

      0 0 32px rgba(255, 0, 51, 0.75);

    transform: translateY(-1px);

  }

}

/* Цвет самой капсулы статуса */

.rpc-status-badge[data-rpc-state="online"] .rpc-status-state {

  color: #02140d;

  background: linear-gradient(135deg, #00ffc3, #72ff9f);

  border-color: rgba(0, 255, 195, 0.8);

  text-shadow: 0 0 8px rgba(2, 72, 53, 0.7);

}

.rpc-status-badge[data-rpc-state="degraded"] .rpc-status-state {

  color: #130f02;

  background: linear-gradient(135deg, #ffd54a, #ffb300);

  border-color: rgba(255, 193, 7, 0.9);

  text-shadow: 0 0 6px rgba(94, 66, 3, 0.8);

}

.rpc-status-badge[data-rpc-state="offline"] .rpc-status-state {

  color: #170205;

  background: linear-gradient(135deg, #ff4a6a, #ff0033);

  border-color: rgba(255, 82, 122, 0.95);

  text-shadow: 0 0 8px rgba(93, 6, 23, 0.9);

}

.rpc-status-badge[data-rpc-state="unknown"] .rpc-status-state {

  color: #e5f7ff;

  background: rgba(20, 26, 52, 0.9);

  border-style: dashed;

  border-color: rgba(148, 163, 184, 0.7);

  text-shadow: 0 0 4px rgba(148, 163, 184, 0.5);

}

/* MAIN GRID */

.ggt-main {

  display: grid;

  grid-template-columns: minmax(0, 3.6fr) minmax(0, 2fr) minmax(0, 1.3fr);

  /* левая колонка шире → больше места под Neon Field */

  gap: 16px;

}

/* PANEL BASE */

.ggt-panel {

  position: relative;

  border-radius: 14px;

  border: 1px solid rgba(0, 255, 175, 0.18);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 175, 0.08),

    #020a07 70%

  );

  box-shadow:

    0 0 0 1px rgba(0, 0, 0, 0.9),

    0 0 18px rgba(0, 0, 0, 0.95);

  padding: 12px 13px 12px;

  overflow: hidden;

}

.ggt-panel-header {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  margin-bottom: 8px;

}

.panel-title {

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: rgba(205, 255, 238, 0.98);

}

.panel-subtitle {

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(139, 202, 184, 0.9);

}

/* PANEL SPECIFICS */

.ggt-panel-neon {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

/* meta row */

.ggt-neon-meta {

  display: grid;

  grid-template-columns: minmax(0, 1.9fr) auto auto;

  gap: 10px;

  align-items: flex-end;

}

.meta-item {

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.meta-item .label {

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: rgba(150, 219, 198, 0.85);

}

.meta-item .value {

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #f0fff9;

}

.meta-intensity {

  max-width: 140px;

}

/* Scan Intensity badge */

.scan-intensity-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 2px 10px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 190, 0.4);

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  min-width: 76px;

  box-shadow: 0 0 0 transparent;

}

.scan-intensity-idle {

  background: rgba(0, 20, 15, 0.85);

  color: rgba(181, 241, 221, 0.9);

}

.scan-intensity-scanning {

  background: radial-gradient(

    circle at 30% 0,

    #00ffbf 0,

    #005b44 60%,

    #000f0b 100%

  );

  color: #031610;

  box-shadow: 0 0 10px rgba(0, 255, 190, 0.8);

}

.scan-intensity-low {

  background: rgba(0, 30, 20, 0.9);

  color: rgba(183, 255, 231, 0.96);

}

.scan-intensity-mid {

  background: radial-gradient(

    circle at 20% 0,

    #ffe28a 0,

    #5a3a00 60%,

    #000b06 100%

  );

  color: #120a00;

}

.scan-intensity-high {

  background: radial-gradient(

    circle at 20% 0,

    #ff8f8f 0,

    #5b0000 60%,

    #000304 100%

  );

  color: #ffe8e8;

}

/* hint under token input */

.ggt-meta-hint {

  margin-top: 3px;

  font-size: 9px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(150, 219, 198, 0.8);

  opacity: 0.9;

}

/* input */

.ggt-input {

  width: 100%;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 193, 0.24);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 193, 0.12),

    #020806 75%

  );

  font-size: 11px;

  color: #f4fff9;

  outline: none;

}

.ggt-input::placeholder {

  color: rgba(139, 202, 184, 0.75);

}

/* field mode */

.ggt-field-mode {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 8px;

  margin-top: 3px;

  margin-bottom: 6px;

}

.ggt-field-mode .label {

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(144, 214, 193, 0.85);

}

.ggt-field-mode-chips {

  display: inline-flex;

  gap: 6px;

}

.ggt-field-chip-active {

  background: radial-gradient(

    circle at 20% 0,

    #00ffb9 0,

    #003a2a 52%,

    #000f0b 100%

  );

  color: #04110c;

}

/* NEON FIELD */

.ggt-neon-field-viewport {

  position: relative;

  margin-top: 4px;

  border-radius: 12px;

  border: 1px solid rgba(0, 255, 181, 0.28);

  background:

    radial-gradient(

      circle at 20% 0,

      rgba(0, 255, 152, 0.16),

      transparent 40%

    ),

    radial-gradient(circle at 90% 100%, rgba(0, 101, 80, 0.7), #000807 60%);

  overflow: hidden;

  min-height: 320px; /* было 260px — поле выше на десктопе */

}.ggt-neon-grid {

  position: absolute;

  inset: 0;

  background-image: linear-gradient(

      rgba(0, 100, 70, 0.22) 1px,

      transparent 1px

    ),

    linear-gradient(90deg, rgba(0, 100, 70, 0.22) 1px, transparent 1px);

  background-size: 20px 20px;

  opacity: 0.8;

}

/* hint inside field */

.ggt-field-hint {

  position: absolute;

  top: 6px;

  left: 10px;

  padding: 2px 8px;

  border-radius: 999px;

  background: rgba(0, 15, 11, 0.92);

  border: 1px solid rgba(0, 255, 177, 0.4);

  font-size: 8px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(193, 255, 234, 0.92);

  z-index: 5;

  pointer-events: none;

}

/* HOLDER RELATION LAYER (SVG) */

.ggt-relation-layer {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  mix-blend-mode: screen;

  z-index: 2;

}

/* слой глифов */

.ggt-neon-node-layer {

  position: absolute;

  inset: 0;

  pointer-events: none; /* дети сами кликаемы */

  z-index: 3;

}

/* скан-пульс */

.neon-pulse {

  position: absolute;

  inset: 0;

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 255, 193, 0.15),

    transparent 55%

  );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.18s ease;

  mix-blend-mode: screen;

}

.neon-pulse-active {

  animation: neonPulseSweep 1.3s ease-out infinite;

}

@keyframes neonPulseSweep {

  0% {

    opacity: 0.15;

    transform: translateX(-40%);

  }

  50% {

    opacity: 0.36;

    transform: translateX(0%);

  }

  100% {

    opacity: 0;

    transform: translateX(40%);

  }

}

/* легенда: ноды */

.ggt-neon-legend {

  position: absolute;

  left: 10px;

  bottom: 7px;

  display: inline-flex;

  gap: 6px;

  z-index: 4;

}

.legend-item {

  padding: 2px 8px;

  border-radius: 999px;

  font-size: 9px;

  text-transform: lowercase;

  letter-spacing: 0.12em;

  border: 1px solid rgba(0, 255, 174, 0.2);

  background: rgba(1, 12, 9, 0.82);

}

.legend-safe {

  color: #aefee4;

  border-color: rgba(0, 255, 190, 0.5);

}

.legend-mid {

  color: #ffeaa6;

  border-color: rgba(255, 204, 77, 0.6);

}

.legend-high {

  color: #ffc3c3;

  border-color: rgba(255, 112, 112, 0.7);

}

/* легенда: линии */

.ggt-line-legend {

  position: absolute;

  right: 8px;

  bottom: 7px;

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding: 4px 6px;

  border-radius: 8px;

  background: rgba(0, 9, 7, 0.9);

  border: 1px solid rgba(0, 255, 186, 0.18);

  z-index: 4;

}

.line-legend-row {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 8px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(186, 243, 222, 0.9);

}

.line-legend-swatch {

  width: 22px;

  height: 4px;

  border-radius: 999px;

  display: inline-block;

}

.line-swatch-critical {

  background: linear-gradient(90deg, #ff8f9c, #5b0000);

  box-shadow: 0 0 6px rgba(255, 143, 156, 0.8);

}

.line-swatch-major {

  background: linear-gradient(90deg, #ffd58a, #5b3c00);

  box-shadow: 0 0 6px rgba(255, 213, 138, 0.8);

}

.line-swatch-dashed {

  background-image: linear-gradient(

    90deg,

    #8fffe0 0,

    #8fffe0 40%,

    transparent 40%,

    transparent 60%,

    #8fffe0 60%,

    #8fffe0 100%

  );

  background-size: 10px 4px;

  box-shadow: 0 0 6px rgba(143, 255, 224, 0.8);

}

.line-legend-text {

  white-space: nowrap;

}

/* ===== CLUSTER AURAS (E) ===== */

.glyph-cluster-aura {

  position: absolute;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  filter: blur(18px);

  opacity: 0.55;

  pointer-events: none;

  mix-blend-mode: screen;

  z-index: 1;

}

.glyph-cluster-tail {

  background: radial-gradient(

    circle at 50% 50%,

    rgba(0, 255, 198, 0.2),

    rgba(0, 82, 60, 0) 70%

  );

}

.glyph-cluster-mid {

  background: radial-gradient(

    circle at 50% 50%,

    rgba(255, 215, 110, 0.22),

    rgba(84, 54, 0, 0) 70%

  );

}

.glyph-cluster-whale {

  background: radial-gradient(

    circle at 50% 50%,

    rgba(255, 102, 120, 0.28),

    rgba(81, 0, 7, 0) 72%

  );

}

/* ===== SIG-16 ASCII GLYPH NODES (style A) ===== */

.neon-node-glyph {

  position: absolute;

  transform: translate(-50%, -50%);

  width: var(--g-size, 32px);

  height: var(--g-size, 32px);

  display: grid;

  grid-template-columns: repeat(16, 1fr);

  grid-template-rows: repeat(16, 1fr);

  gap: 0;

  padding: 1px;

  border-radius: 4px;

  background: radial-gradient(

    circle at 50% 0,

    rgba(0, 255, 160, 0.08),

    #020907 80%

  );

  border: 1px solid rgba(138, 233, 205, 0.55);

  box-shadow:

    0 0 6px rgba(0, 0, 0, 0.95);

  opacity: 0.95;

  pointer-events: auto;

  cursor: pointer;

  overflow: hidden;

  z-index: 3;

}

/* базовый пиксель */

.glyph-pixel {

  width: 100%;

  height: 100%;

  background: #020805;

  opacity: 0.35;

}

/* активный бит */

.glyph-pixel.on {

  background: #c4ffe8;

  opacity: 1;

}

/* элитные рамки */

.glyph-elite {

  border-color: rgba(255, 222, 140, 0.9);

}

.glyph-elite-top1 {

  border-color: rgba(255, 130, 130, 0.96);

}

/* лёгкий глитч */

.glyph-glitch {

  animation: glyphGlitch 2s steps(3, end) infinite;

}

@keyframes glyphGlitch {

  0% {

    filter: none;

  }

  50% {

    filter: contrast(1.05);

  }

  100% {

    filter: none;

  }

}

/* hover state */

.neon-node-glyph.glyph-hover {

  transform: translate(-50%, -50%) scale(1.14) !important;

  box-shadow:

    0 0 10px rgba(184, 255, 224, 0.9),

    0 0 24px rgba(0, 0, 0, 1);

  z-index: 4;

}

/* ==== GLYPH HOVER TOOLTIP (clamped) ==== */

.glyph-tooltip {

  position: absolute;

  z-index: 5;

  min-width: 130px;

  max-width: 200px;

  padding: 6px 8px;

  border-radius: 8px;

  background: rgba(0, 12, 9, 0.98);

  border: 1px solid rgba(120, 255, 203, 0.9);

  box-shadow:

    0 0 10px rgba(0, 255, 154, 0.5),

    0 0 20px rgba(0, 0, 0, 0.95);

  font-size: 9px;

  line-height: 1.4;

  color: #e9fff3;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.15s ease;

  display: none;

}

.glyph-tooltip strong {

  font-weight: 600;

}

.glyph-tooltip .gt-line + .gt-line {

  margin-top: 2px;

}

/* ===== TOKEN INTEL ===== */

.ggt-token-intel {

  margin-top: 10px;

  padding: 9px 10px 8px;

  border-radius: 11px;

  border: 1px solid rgba(0, 255, 175, 0.26);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 167, 0.12),

    #020a07 72%

  );

}

.intel-header-row {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  margin-bottom: 6px;

}

.intel-title {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: rgba(201, 255, 235, 0.94);

}

.intel-mint-status {

  font-size: 9px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  padding: 2px 8px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 177, 0.5);

  background: rgba(0, 18, 13, 0.95);

}

.intel-mint-open {

  border-color: rgba(255, 112, 112, 0.8);

  color: #ffbcbc;

  background: rgba(34, 3, 3, 0.95);

}

.intel-mint-locked {

  border-color: rgba(147, 255, 201, 0.8);

  color: #d9fff1;

}

.intel-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 6px 14px;

  margin-bottom: 8px;

}

.intel-item {

  display: flex;

  flex-direction: column;

  gap: 1px;

}

.intel-item .label {

  font-size: 9px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(140, 206, 188, 0.9);

}

.intel-item .value {

  font-size: 12px;

  color: #f6fff9;

}

.intel-section-label {

  font-size: 9px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(166, 227, 204, 0.78);

  margin-top: 4px;

  margin-bottom: 4px;

}

/* HOLDERS LITE */

.holders-lite {

  margin-top: 4px;

}

.holders-lite-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 16px;

  font-size: 9px;

  color: rgba(185, 242, 223, 0.9);

}

.holders-lite-stats span span {

  color: #f0fff9;

}

.holders-lite-graph {

  margin-top: 6px;

  display: flex;

  gap: 4px;

}

.holders-lite-segment {

  flex: 1;

  height: 8px;

  border-radius: 999px;

  background: linear-gradient(

    90deg,

    #00ffb2 0%,

    rgba(0, 10, 7, 0.95) 80%

  );

  box-shadow: 0 0 8px rgba(0, 255, 174, 0.75);

}

/* HOLDERS PRO */

.holders-pro {

  display: none;

  margin-top: 6px;

}

.holders-pro-header-row {

  display: flex;

  justify-content: space-between;

  margin-bottom: 4px;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: rgba(170, 233, 210, 0.9);

}

.holders-pro-title {

  color: rgba(201, 255, 235, 0.96);

}

.holders-pro-mode {

  color: rgba(152, 218, 198, 0.86);

}

.holders-pro-table-wrap {

  max-height: 152px;

  border-radius: 8px;

  border: 1px solid rgba(0, 255, 177, 0.28);

  overflow: auto;

}

/* кастомный скролл */

.holders-pro-table-wrap::-webkit-scrollbar {

  width: 6px;

}

.holders-pro-table-wrap::-webkit-scrollbar-track {

  background: rgba(0, 10, 7, 0.9);

}

.holders-pro-table-wrap::-webkit-scrollbar-thumb {

  background: linear-gradient(to bottom, #00ffb2, #007a57);

  border-radius: 999px;

}

.holders-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 10px;

}

.holders-table thead {

  position: sticky;

  top: 0;

  background: rgba(0, 15, 10, 0.98);

}

.holders-table th,

.holders-table td {

  padding: 4px 8px;

  text-align: left;

}

.holders-table th {

  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  font-size: 9px;

  color: rgba(170, 233, 210, 0.95);

  border-bottom: 1px solid rgba(0, 255, 185, 0.3);

}

.holders-table tbody tr {

  border-bottom: 1px solid rgba(0, 40, 29, 0.85);

  cursor: pointer;

}

.holders-table tbody tr:nth-child(2n) {

  background: rgba(0, 18, 13, 0.9);

}

.holders-table tbody tr:hover {

  background: radial-gradient(

      circle at 0 0,

      rgba(0, 255, 177, 0.2),

      #000c08 70%

    );

}

.holders-table td:nth-child(1) {

  width: 24px;

  color: rgba(191, 249, 230, 0.96);

}

.holders-table td:nth-child(2) {

  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas,

    "Liberation Mono", "Courier New", monospace;

  color: rgba(207, 255, 240, 0.98);

}

.holders-table td:nth-child(3) {

  text-align: right;

  color: rgba(201, 255, 235, 0.94);

}

/* linked row highlight (glyph ↔ table) */

.holders-table tbody tr.row-linked {

  background: radial-gradient(

      circle at 0 0,

      rgba(0, 255, 190, 0.28),

      rgba(0, 7, 5, 0.96) 70%

    );

  border-left: 1px solid rgba(0, 255, 196, 0.9);

}

/* ===== TERMINAL PANEL ===== */

.ggt-panel-terminal {

  display: flex;

  flex-direction: column;

}

.ggt-terminal-output {

  margin-top: 6px;

  border-radius: 10px;

  border: 1px solid rgba(0, 255, 174, 0.28);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 149, 0.06),

    #020806 70%

  );

  padding: 8px 10px;

  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;

  font-size: 10px;

  max-height: 280px;

  overflow: auto;

  color: #dffcf3;

}

.ggt-terminal-output::-webkit-scrollbar {

  width: 6px;

}

.ggt-terminal-output::-webkit-scrollbar-thumb {

  background: linear-gradient(to bottom, #00ffb2, #007a57);

  border-radius: 999px;

}

.log-line {

  margin-bottom: 2px;

  white-space: pre-wrap;

}

.log-system {

  color: #a7f1de;

}

.log-success {

  color: #aefac3;

}

.log-error {

  color: #ffb7b7;

}

.log-hint {

  color: #9ad7ff;

}

/* ===== RIGHT COLUMN ===== */

.ggt-right-column {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.ggt-panel-alerts,

.ggt-panel-replay {

  min-height: 120px;

}

.ggt-alert-list {

  margin-top: 6px;

  border-radius: 10px;

  border: 1px solid rgba(0, 255, 174, 0.28);

  background: rgba(0, 12, 9, 0.96);

  padding: 6px 8px;

  font-size: 10px;

  max-height: 130px;

  overflow: auto;

}

.alert-item {

  padding: 3px 4px;

  border-radius: 6px;

  margin-bottom: 3px;

  background: rgba(2, 33, 25, 0.95);

  color: #ddfff4;

}

.alert-item.alert-critical {

  background: rgba(48, 4, 4, 0.96);

  border: 1px solid rgba(255, 96, 96, 0.9);

  color: #ffe2e2;

}

.alert-empty {

  opacity: 0.7;

  font-style: italic;

}

.ggt-alert-list::-webkit-scrollbar {

  width: 6px;

}

.ggt-alert-list::-webkit-scrollbar-thumb {

  background: linear-gradient(to bottom, #00ffb2, #007a57);

  border-radius: 999px;

}

.ggt-replay-timeline {

  margin-top: 6px;

  border-radius: 10px;

  border: 1px solid rgba(0, 255, 174, 0.28);

  background: rgba(0, 12, 9, 0.96);

  padding: 6px 8px;

  font-size: 10px;

  max-height: 130px;

  overflow: auto;

}

.ggt-replay-timeline::-webkit-scrollbar {

  width: 6px;

}

.ggt-replay-timeline::-webkit-scrollbar-thumb {

  background: linear-gradient(to bottom, #00ffb2, #007a57);

  border-radius: 999px;

}

.replay-empty {

  opacity: 0.7;

  font-style: italic;

}

.replay-item {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 3px 3px;

  margin-bottom: 3px;

}

.replay-dot {

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: radial-gradient(

    circle at 40% 20%,

    #bfffe3 0,

    #00ff9d 50%,

    #005b3a 100%

  );

  box-shadow: 0 0 9px rgba(0, 255, 167, 0.9);

}

.replay-meta {

  color: #e5fff6;

}

/* ===== GGT · NETWORK LINE ===== */

.ggt-network-line {

  font-family: "JetBrains Mono", "Fira Code", monospace;

  font-size: 10px;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(204, 232, 255, 0.75);

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 4px 6px;

  margin-top: 10px;

  border-top: 1px dashed rgba(120, 150, 200, 0.4);

  opacity: 0.85;

}

.ggt-network-line .ggt-net-label {

  color: rgba(149, 184, 255, 0.85);

}

.ggt-network-line .ggt-net-state {

  font-weight: 600;

  letter-spacing: 0.2em;

}

.ggt-network-line[data-net-state="online"] .ggt-net-state {

  color: #00ffc3;

  text-shadow: 0 0 4px rgba(0, 255, 195, 0.7);

}

.ggt-network-line[data-net-state="degraded"] .ggt-net-state {

  color: #ffb300;

  text-shadow: 0 0 4px rgba(255, 193, 7, 0.8);

}

.ggt-network-line[data-net-state="offline"] .ggt-net-state {

  color: #ff3366;

  text-shadow: 0 0 4px rgba(255, 0, 51, 0.8);

}

.ggt-network-line[data-net-state="unknown"] .ggt-net-state {

  color: rgba(158, 176, 202, 0.6);

}

.ggt-net-latency {

  color: rgba(160, 200, 255, 0.65);

}

/* FOOTER */

.ggt-footer {

  margin-top: 16px;

  padding-top: 6px;

  border-top: 1px solid rgba(0, 255, 182, 0.18);

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(156, 222, 202, 0.8);

}

/* ===== HINTS HIDE MODE (eye toggle) ===== */

.field-hints-hidden .ggt-field-hint,

.field-hints-hidden .ggt-neon-legend,

.field-hints-hidden .ggt-line-legend {

  display: none !important;

}

/* ===== RESPONSIVE ===== */

@media (max-width: 1040px) {

  .ggt-main {

    grid-template-columns: minmax(0, 1fr);

  }

  .ggt-panel-terminal {

    order: 3;

  }

  .ggt-right-column {

    order: 2;

  }

  .ggt-header {

    flex-direction: column;

    align-items: flex-start;

  }

  .ggt-header-controls {

    width: 100%;

    justify-content: space-between;

  }

  .ggt-rpc-status-row {

    justify-content: stretch;

  }

}

@media (max-width: 640px) {

  .ggt-shell {

    margin: 8px;

    padding-inline: 10px;

  }

  .ggt-neon-meta {

    grid-template-columns: minmax(0, 1fr);

  }

  .meta-intensity {

    max-width: none;

  }

  .ggt-header {

    padding-inline: 10px;

  }

  .ggt-footer {

    flex-direction: column;

    gap: 4px;

  }

  .ggt-field-mode {

    flex-wrap: wrap;

  }

  .rpc-status-row-top {

    align-items: flex-start;

  }

}/* ============================

   GORBOY AI MODE · PANELS

   ============================ */

/* Body highlight when AI mode active */

body.ggt-ai-mode .ggt-logo-title {

  text-shadow:

    0 0 12px rgba(0, 255, 190, 0.9),

    0 0 22px rgba(0, 0, 0, 1);

}

body.ggt-ai-mode .ggt-shell {

  box-shadow:

    0 0 0 1px rgba(0, 255, 193, 0.28),

    0 0 36px rgba(0, 255, 193, 0.25),

    0 0 60px rgba(0, 0, 0, 1);

}

/* AI CHAT PANEL */

.ggt-panel-ai-chat {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.ai-chat-log {

  margin-top: 4px;

  border-radius: 10px;

  border: 1px solid rgba(0, 255, 174, 0.28);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 149, 0.08),

    #020806 70%

  );

  padding: 8px 10px;

  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;

  font-size: 10px;

  max-height: 260px;

  overflow-y: auto;

  color: #dffcf3;

}

.ai-chat-log::-webkit-scrollbar {

  width: 6px;

}

.ai-chat-log::-webkit-scrollbar-thumb {

  background: linear-gradient(to bottom, #00ffb2, #007a57);

  border-radius: 999px;

}

.ai-message {

  margin-bottom: 6px;

  padding: 4px 6px;

  border-radius: 8px;

  background: rgba(0, 18, 13, 0.9);

  border: 1px solid rgba(0, 255, 174, 0.18);

}

.ai-message-meta {

  font-size: 8px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(150, 219, 198, 0.8);

  margin-bottom: 2px;

}

.ai-message-text {

  font-size: 10px;

  color: #e9fff3;

}

/* role-based tint */

.ai-message-ai {

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 174, 0.12),

    rgba(0, 10, 7, 0.98) 70%

  );

}

.ai-message-user {

  background: radial-gradient(

    circle at 100% 0,

    rgba(107, 191, 255, 0.18),

    rgba(0, 10, 16, 0.98) 70%

  );

}

/* tone hint (optional, via data-tone) */

.ai-message[data-tone="alert"] {

  border-color: rgba(255, 214, 102, 0.9);

}

.ai-message[data-tone="danger"] {

  border-color: rgba(255, 112, 135, 0.95);

}

/* input row */

.ai-input-row {

  margin-top: 6px;

  display: flex;

  gap: 8px;

  align-items: center;

}

.ai-input {

  flex: 1;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(0, 255, 193, 0.24);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 193, 0.12),

    #020806 75%

  );

  font-size: 11px;

  color: #f4fff9;

  outline: none;

}

.ai-input::placeholder {

  color: rgba(139, 202, 184, 0.75);

}

.ai-send-btn {

  white-space: nowrap;

  padding-inline: 14px;

}

/* NEON FIELD INTERPRETER */

.ggt-panel-ai-interpreter {

  display: flex;

  flex-direction: column;

}

.ai-interp-body {

  margin-top: 6px;

  border-radius: 10px;

  border: 1px solid rgba(0, 255, 174, 0.28);

  background: radial-gradient(

    circle at 0 0,

    rgba(0, 255, 167, 0.12),

    #020a07 72%

  );

  padding: 8px 10px;

  font-size: 10px;

  color: #e7fff4;

}

.ai-interp-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px 10px;

}

.ai-interp-item {

  padding: 4px 6px;

  border-radius: 8px;

  background: rgba(0, 15, 11, 0.96);

  border: 1px solid rgba(0, 255, 174, 0.2);

}

.ai-interp-item .label {

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: rgba(150, 219, 198, 0.85);

  margin-bottom: 2px;

}

.ai-interp-item .value {

  font-size: 11px;

  color: #f4fff9;

}

.ai-interp-item .note {

  margin-top: 2px;

  font-size: 9px;

  color: rgba(178, 233, 211, 0.86);

}

/* responsive tweak */

@media (max-width: 640px) {

  .ai-interp-grid {

    grid-template-columns: minmax(0, 1fr);

  }

}