:root{
  --bg:#050807;
  --fg:#bfffe6;
  --muted:rgba(191,255,230,.72);
  --line:rgba(0,255,170,.45);
  --line2:rgba(0,255,170,.22);
  --glow:rgba(0,255,170,.16);
  --glow2:rgba(0,255,170,.08);
  --radius:18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--mono);
    background: radial-gradient(1200px 700px at 25% 15%, rgba(0,255,170,.09), transparent 60%),
              radial-gradient(900px 650px at 70% 30%, rgba(0,255,170,.06), transparent 60%),
              url("./wallpaper333.png") center/cover no-repeat fixed,
              var(--bg);
  color:var(--fg);

  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.scanlines{
  pointer-events:none;
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,.06) 4px
  );
  mix-blend-mode: multiply;
}

.wrap{
   width:min(1900px, 98vw);
  margin: 28px auto 18px;
  flex: 1; /* lets footer sit at bottom */
}

/* Desktop layout: Nodes ~half screen, rail grows */
.hero-grid{
  display:grid;
      grid-template-columns: minmax(520px, 45%) 1fr;
  gap:18px;
  align-items:start;
}

/* <=980: collapse to single column */
@media (max-width: 980px){
  .wrap{
    width: calc(100vw - 32px);
    margin: 18px auto 12px;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* FORCE single column rail so AVAX is below ETH */
  .rail-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .brand-frame,
  .wire-card{
    width: 100%;
  }
}

/* <=760: same single-column stack, plus hide charts */
@media (max-width: 760px){
  .wrap{
    width: calc(100vw - 32px);
    margin: 18px auto 12px;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rail-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Only 3 windows on mobile */
  .wire-card--charts{
    display:none !important;
  }

  .wire-card{
    min-height: 0;
  }

  .foot-inner{
    width: calc(100vw - 32px);
  }
}

/* GOT NODES card */
.brand-frame{
  border:1px solid var(--line);
  border-radius: 22px;
  padding: 18px 18px 14px;
  box-shadow: 0 0 0 1px rgba(0,255,170,.08) inset; /* remove outer glow */
    background: #000;                                /* solid for readability */
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-bottom: 12px;
  border-bottom:1px solid var(--line2);
}

.brand-text{
  text-align:center;
}

.logo-box{
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  box-shadow: 0 0 35px var(--glow2);
}

.brand-text h1{
  margin:0;
  letter-spacing: .22em;
  font-size: 34px;
}

.tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size: 13px;
}

.pitch{ padding-top: 14px; }
.pitch-title{
  color: rgba(0,255,170,.9);
  letter-spacing:.18em;
  font-size: 13px;
  margin-bottom: 10px;
}

.pitch-body p{
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 13px;
  color: var(--muted);
}

.pitch-body .hi{ color: rgba(0,255,170,.95); }
.pitch-body .sub{ margin-top: 10px; }

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.meta-item{
  border:1px solid var(--line2);
  border-radius: 999px;
  padding: 8px 10px;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(0,0,0,.22);
}

.meta-k{ color: rgba(0,255,170,.85); font-size: 12px; }
.meta-v{ color: var(--fg); font-size: 12px; }

.edit-wrap{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line2);
}

.edit-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.edit-title{
  color: rgba(0,255,170,.9);
  letter-spacing:.18em;
  font-size: 13px;
}

.btn{
  font-family:var(--mono);
  letter-spacing:.14em;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 12px;
  border:1px solid var(--line2);
  background: rgba(0,0,0,.22);
  color: var(--fg);
  cursor:pointer;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* RIGHT SIDE rail */
.rail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}

.wire-card{
  min-height: 180px;
  border:1px solid var(--line);
  border-radius: 22px;
    background: #000;
  box-shadow: 0 0 0 1px rgba(0,255,170,.08) inset, 0 0 45px var(--glow2);
  padding: 14px 14px 12px;
}

/* POPULATED cards */
.wire-card--data{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Center titles on ETH / AVAX data cards */
.wire-card--data .wire-head{
  position: relative;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line2);
}

.wire-card--data .wire-title{
  display:block;
  text-align:center;
  color: var(--fg);
}

.wire-badge{
  border:1px solid var(--line2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .14em;
  background: rgba(0,0,0,.22);
  color: var(--fg);
  min-width: 70px;
  text-align:center;
}

.wire-body{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 14px; /* breathing room under title */
}

/* CHART cards (bottom 2) */
.wire-card--charts{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Divider sits under chart title (not under meta) */
.wire-card--charts .wire-head{
  border-bottom: none;
  padding: 12px 0 10px;
}

.wire-card--charts .wire-title{
  display:block;
  text-align:center;
  color: var(--fg);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 10px;
}

.chart-meta{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.chart-meta-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

.chart-meta-row .m{
  font-size: 12px;
  color: var(--fg);
  opacity: .95;
}

.wire-charts{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 12px; /* breathing room under title */
}

.chart-block{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.chart-label{
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--fg);
  text-transform: uppercase;
}

.chart-canvas{
  width: 100%;
  height: 110px;
  border: 1px solid var(--line2);
  border-radius: 14px;
    background: #000;
  box-shadow: 0 0 22px var(--glow2);
}

/* Footer (single clean block) */
.site-foot{
  width:100%;
  margin-top:auto;           /* keep footer attached to bottom of the page */
  padding: 14px 0 22px;
}

.foot-inner{
  width:min(1400px, 94vw);   /* match main wrap width */
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--fg);
}

.foot-links{
  display:flex;
  align-items:center;
  gap: 10px;
  letter-spacing:.14em;
  font-size: 12px;
}

.foot-link{
  color: var(--fg);
  text-decoration:none;
  border-bottom: 1px solid rgba(191,255,230,.18);
  padding-bottom: 2px;
}

.foot-link:hover{
  border-bottom-color: rgba(191,255,230,.55);
}

.foot-sep{
  color: rgba(191,255,230,.55);
}

.foot-mark{
  letter-spacing:.18em;
  font-size: 12px;
  color: rgba(191,255,230,.75);
}
/* --- LEFT COLUMN STACK (Got Nodes box + injected search cards) --- */
.left-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* --- SEARCH CARD INPUTS --- */
.search-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.wire-input{
  flex:1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.22);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  outline: none;
}

.wire-input::placeholder{
  color: rgba(191,255,230,.55);
}

/* --- KV rows (hard right-justify value column) --- */
.wire-body .kv{
  display:flex;
  width:100%;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
}

/* label column stretches, value column stays tight + right aligned */
.wire-body .kv > span:first-child{
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 10px;
}

.wire-body .kv .v{
  flex: 0 0 auto;
  text-align:right;
  margin-left:auto;
  white-space:nowrap;
}

/* --- ACCORDION SEARCH CARDS (collapse outputs until search) --- */
.wire-card--accordion .accordion-out{
  display:none;
}

.wire-card--accordion.is-open .accordion-out{
  display:block;
}

/* --- Accordion toggle button (ETH/AVAX search cards) --- */
.acc-toggle{
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.22);
  color: var(--fg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
}

.acc-toggle:active{
  transform: translateY(-50%) scale(.98);
}