/* ── ROOT ─────────────────────────────────────────────────────────────────── */
:root {
  --bg:         #080c08;
  --chrome:     #111811;
  --chrome-2:   #192019;
  --chrome-3:   #212821;
  --lcd:        #000500;
  --green:      #00ff41;
  --green-2:    #39d353;
  --green-dim:  #1a5c1a;
  --green-glow: rgba(0,255,65,.4);
  --red:        #ff2848;
  --amber:      #ffaa00;
  --muted:      #3a5c3d;
  --hi:         #2e3e2e;
  --lo:         #040604;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: var(--green);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  color: var(--green);
  background: var(--bg);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: underline; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--green-glow); }
button, input { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 11px; cursor: pointer; }
button, a, input { transition: all .1s; }

/* ── DESKTOP BACKGROUND ─────────────────────────────────────────────────── */
.desktop-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.desktop-bg::before {
  content: '';
  background:
    repeating-linear-gradient(0deg,   rgba(0,255,65,.018) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg,  rgba(0,255,65,.012) 0 1px, transparent 1px 32px),
    radial-gradient(ellipse at 50% 40%, rgba(0,60,15,.3), transparent 65%);
  position: absolute; inset: 0;
}

/* ── PIXEL MILADY ───────────────────────────────────────────────────────── */
.pixel-milady {
  width: 116px; height: 148px;
  image-rendering: pixelated;
  opacity: .88;
  filter: drop-shadow(0 0 14px rgba(0,255,65,.55)) hue-rotate(85deg) saturate(1.3);
  position: fixed; z-index: 2; pointer-events: none;
  animation: 4.6s ease-in-out infinite miladyFloat;
}
.pixel-milady span { image-rendering: pixelated; display: block; position: absolute; }
.pixel-milady .halo {
  background: rgba(0,255,65,.15); border-radius: 50%;
  width: 72px; height: 56px; top: -4px; left: 24px;
  box-shadow: 0 0 0 2px var(--green-dim), 0 0 22px var(--green-glow);
}
.pixel-milady .hair {
  clip-path: polygon(16% 0,82% 0,100% 25%,91% 86%,66% 72%,53% 92%,38% 72%,10% 88%,0 32%);
  background: #1a5c1a; width: 88px; height: 66px; top: 12px; left: 14px;
  box-shadow: -10px 13px #0a3a0a, 9px -4px #39d353, 24px 5px #003300, 38px 20px #111, -12px 45px #1a5c1a;
}
.pixel-milady .face {
  background: #081a08; border-radius: 46% 46% 48% 48%;
  width: 64px; height: 54px; top: 37px; left: 26px;
  box-shadow: inset 11px 8px rgba(0,255,65,.12);
}
.pixel-milady .eyes {
  background: var(--green); border-radius: 50%;
  width: 9px; height: 11px; top: 55px; left: 38px;
  box-shadow: 25px 0 var(--green), 2px 1px 0 1px #000, 27px 1px 0 1px #000;
  filter: drop-shadow(0 0 5px var(--green));
}
.pixel-milady .mouth {
  background: none;
  border-bottom: 3px solid var(--green-dim);
  border-radius: 0 0 50% 50%;
  width: 12px; height: 7px; top: 76px; left: 53px;
}
.pixel-milady .dress {
  background: #0d340d; width: 82px; height: 46px; top: 88px; left: 18px;
  box-shadow: inset 15px 7px rgba(0,255,65,.08), -7px 18px #0a220a, 75px 14px #0a220a, 18px 34px #163d16, 48px 34px #163d16;
}
.pixel-milady b {
  color: var(--green); text-shadow: 0 0 8px var(--green-glow);
  background: #000; border: 1px solid var(--green-dim);
  padding: 1px 4px; font-size: 10px; font-weight: 700;
  position: absolute; top: 134px; left: -8px; right: -8px; text-align: center;
}
.pixel-milady-a { top: 80px; right: 54px; }
.pixel-milady-b { opacity: .7; bottom: 78px; left: 72px; transform: scale(.74); }
@keyframes miladyFloat {
  0%, to { translate: 0; }
  50%     { translate: 0 -7px; }
}

/* ── LOADER ─────────────────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s;
}
#loader.out { opacity: 0; pointer-events: none; }

.ld-inner {
  background: var(--chrome);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: 0 0 50px rgba(0,255,65,.18), 4px 4px 0 #000;
  width: 320px;
}
.ld-titlebar {
  background: linear-gradient(90deg, #003800, #001800);
  color: var(--green); font-weight: 700; font-size: 11px;
  padding: 4px 6px; display: flex;
  justify-content: space-between; align-items: center;
  user-select: none;
  border-bottom: 1px solid var(--green-dim);
  text-shadow: 0 0 10px var(--green-glow);
  letter-spacing: .04em;
}
.ld-win-btns { display: flex; gap: 2px; }
.ld-win-btn {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  width: 16px; height: 14px;
  font-size: 9px; font-weight: 700; color: var(--green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
}
.ld-win-btn:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

.ld-body {
  padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.ld-logo {
  font-size: 28px; font-weight: 700; letter-spacing: 4px;
  color: var(--green);
  text-shadow: 0 0 24px var(--green-glow), 0 0 50px rgba(0,255,65,.2);
}
.ld-logo span { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.4); }
.ld-art {
  color: var(--green); font-size: 10px; line-height: 1.5;
  border: 1px solid var(--green-dim);
  padding: 6px 12px; background: var(--lcd);
  font-family: 'Courier New', monospace; width: 100%;
  text-shadow: 0 0 6px var(--green-glow);
  position: relative; overflow: hidden;
}
.ld-art::after {
  content: '';
  background: repeating-linear-gradient(0deg, rgba(0,255,65,.04) 0 1px, transparent 1px 2px);
  position: absolute; inset: 0; pointer-events: none;
}
.ld-bar-wrap {
  width: 100%; height: 12px;
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  overflow: hidden;
}
.ld-bar {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, var(--green-dim) 10px 12px);
  animation: ld-fill 3.2s ease forwards;
  box-shadow: 0 0 12px var(--green-glow);
}
@keyframes ld-fill { to { width: 100%; } }
.ld-status {
  font-size: 10px; color: var(--green);
  text-shadow: 0 0 8px var(--green-glow);
  animation: blink 1.2s step-end infinite;
  letter-spacing: .06em;
}
@keyframes blink { 50% { opacity: 0.25; } }
.ld-skip {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--green); font-size: 10px; padding: 4px 14px;
  cursor: pointer; align-self: flex-end; font-family: inherit;
}
.ld-skip:hover { color: #fff; box-shadow: 0 0 10px var(--green-glow); }
.ld-skip:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }

/* ── APP ────────────────────────────────────────────────────────────────── */
#app { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--chrome);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  height: 36px; margin: 14px auto 0;
  width: min(1280px, 100vw - 28px);
  display: flex; align-items: center;
  box-shadow: 0 0 30px rgba(0,255,65,.07), 4px 4px 0 #000;
  position: relative; z-index: 5;
}
.brand { flex: 1; gap: 0; height: 100%; display: flex; align-items: center; }
.brand-name {
  background: linear-gradient(90deg, #003a00, #001800);
  flex: 1; align-items: center; height: calc(100% - 4px);
  margin-left: 2px; padding: 0 10px;
  text-decoration: none; display: flex;
  color: var(--green) !important; font-size: 13px !important; font-weight: 700;
  text-shadow: 0 0 12px var(--green-glow);
  border-right: 1px solid var(--green-dim);
  letter-spacing: .06em;
}
.brand-name::before { content: '▶ '; color: var(--green); margin-right: 6px; }
.brand-name span { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.4); }
.whitepaper-link { color: var(--muted); margin: 0 8px; font-size: 10px; }
.whitepaper-link:hover { color: var(--green); }

nav { gap: 3px; padding-right: 4px; display: flex; align-items: center; }
nav a, nav button {
  color: var(--green);
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  border-radius: 0; text-decoration: none;
  padding: 3px 10px; font-size: 10px; min-height: 22px;
  text-transform: lowercase; font-family: inherit;
}
nav a:hover, nav button:hover { color: #fff; box-shadow: 0 0 8px var(--green-glow); }
nav a:active, nav button:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }
nav .connect.connected { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* ── TICKER ─────────────────────────────────────────────────────────────── */
.ticker {
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  width: min(1280px, 100vw - 28px);
  margin: 8px auto 0;
  padding: 5px 10px; font-size: 10px; color: var(--green);
  white-space: nowrap; overflow-x: auto;
  display: flex; position: relative; z-index: 4;
  text-shadow: 0 0 6px var(--green-glow);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,65,.04) 0 1px, transparent 1px 2px),
    linear-gradient(var(--lcd), var(--lcd));
}
.ticker span { display: inline-flex; gap: 4px; }
.ticker b { color: var(--muted); font-weight: 700; }
.ticker em { color: var(--green); font-style: normal; }

/* ── APP CONTENT ────────────────────────────────────────────────────────── */
.app {
  z-index: 2;
  width: min(1280px, 100vw - 28px);
  margin: 10px auto 44px;
  position: relative;
}
.hero-grid {
  grid-template-columns: minmax(0, 1fr) 378px;
  gap: 12px; display: grid;
}

/* ── CARD (Winamp window) ────────────────────────────────────────────────── */
.card {
  background: var(--chrome);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: 0 0 20px rgba(0,255,65,.05), 4px 4px 0 #000;
  position: relative;
}

/* Title bars */
.curve-card, .trade-card, .data-card, .flows-card, .manifesto {
  padding-top: 26px;
}
.curve-card::before,
.trade-card::before,
.data-card::before,
.flows-card::before,
.manifesto::before {
  color: var(--green); pointer-events: none;
  background: linear-gradient(90deg, #003800, #001600);
  height: 20px; padding: 2px 6px; font-weight: 700;
  position: absolute; top: 2px; left: 2px; right: 2px;
  display: block; font-size: 10px; letter-spacing: .04em;
  text-shadow: 0 0 10px var(--green-glow);
  border-bottom: 1px solid var(--green-dim);
}
.curve-card::before  { content: '▶ TOKEN0_CURVE.EXE  ──  supply / price'; }
.trade-card::before  { content: '▶ MINT_BURN.EXE  ──  contract call'; }
.data-card::before   { content: '▶ TOKEN0_DATA.INI'; }
.flows-card::before  { content: '▶ FLOWS_24H.BAT'; }
.manifesto::before   { content: '▶ README.TXT'; }

/* Close button on cards */
.curve-card::after,
.trade-card::after {
  content: '×';
  z-index: 5; color: var(--green); text-align: center;
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  width: 14px; height: 13px; font-size: 11px; font-weight: 700;
  line-height: 11px; position: absolute; top: 5px; right: 5px;
}

.curve-card { min-height: 432px; padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
.trade-card { min-height: 432px; padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }

/* ── CURVE CARD ─────────────────────────────────────────────────────────── */
.curve-head {
  min-height: 28px; color: var(--green);
  justify-content: space-between; align-items: flex-start;
  gap: 10px; display: flex; margin-bottom: 8px;
  background: var(--lcd); border: 1px solid var(--green-dim);
  padding: 4px 6px;
  text-shadow: 0 0 6px var(--green-glow);
}
.curve-head b { font-weight: 700; color: var(--green); }
.curve-head i {
  vertical-align: middle; width: 18px; height: 2px;
  margin: 0 5px 2px 10px; display: inline-block;
}
.supply-key { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.price-key  { background: var(--amber); box-shadow: 0 0 6px rgba(255,170,0,.4); }
.curve-stats { flex-wrap: wrap; gap: 10px; font-size: 10px; display: flex; }
.curve-stats b { font-weight: 700; }

.chart-box {
  border: 1px solid var(--green-dim);
  cursor: crosshair; background: #000;
  height: 320px; padding: 10px 48px 28px;
  position: relative; overflow: visible;
  color: var(--green);
}
.chart-box::before {
  content: '';
  background-image:
    linear-gradient(rgba(0,255,65,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,.04) 1px, transparent 1px);
  background-size: 25% 25%;
  position: absolute; inset: 10px 48px 28px;
}
.chart-box svg { z-index: 1; pointer-events: none; width: 100%; height: 100%; position: relative; overflow: visible; }
.supply-fill { fill: rgba(0,255,65,.1); }
.supply-line { fill: none; stroke: var(--green); stroke-width: 1.5px; filter: drop-shadow(0 0 5px var(--green)); }
.supply-dot  { fill: var(--green); filter: drop-shadow(0 0 10px var(--green)); }

.axis {
  z-index: 2; pointer-events: none;
  flex-direction: column; justify-content: space-between;
  font-size: 9px; line-height: 1; display: flex;
  position: absolute; top: 8px; bottom: 24px; color: var(--muted);
}
.axis.left  { text-align: right; left: 8px; }
.axis.right { right: 7px; }
.xaxis {
  z-index: 2; pointer-events: none;
  justify-content: space-between; font-size: 9px; display: flex;
  position: absolute; bottom: 8px; left: 48px; right: 48px; color: var(--muted);
}
.dynamic-guide {
  z-index: 5; top: 10px; bottom: 28px;
  pointer-events: none;
  border-left: 1px dashed rgba(0,255,65,.45);
  position: absolute;
}
.dynamic-dot {
  z-index: 6; background: var(--amber); pointer-events: none;
  border-radius: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; position: absolute;
  box-shadow: 0 0 12px var(--amber);
  left: var(--x); top: var(--y);
}
.chart-readout {
  z-index: 45;
  border: 1px solid var(--green-dim);
  pointer-events: none; background: var(--lcd);
  width: 210px; padding: 8px 10px;
  position: absolute; transform: translate(-50%);
  box-shadow: 0 0 18px rgba(0,255,65,.2); color: var(--green);
  text-shadow: 0 0 5px var(--green-glow);
}
.chart-readout div { justify-content: space-between; gap: 18px; line-height: 1.65; display: flex; }
.chart-readout span { color: var(--muted); }
.chart-readout b { color: var(--green); font-weight: 700; }
.fineprint { color: var(--muted); margin: 8px 1px 0; font-size: 10px; }

/* ── TABS ───────────────────────────────────────────────────────────────── */
.tabs {
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  grid-template-columns: 1fr 1fr; display: grid;
  margin-bottom: 10px;
}
.tabs button {
  border: 0; border-right: 1px solid var(--green-dim);
  height: 30px; color: var(--muted); background: none;
  font-size: 11px; text-transform: lowercase; font-family: inherit;
}
.tabs button:last-child { border-right: 0; }
.tabs button:hover { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.tabs button.active {
  color: var(--green); background: rgba(0,255,65,.04);
  box-shadow: inset 0 -2px var(--green);
  text-shadow: 0 0 8px var(--green-glow);
}
.tabs button.active.burn {
  color: var(--red); box-shadow: inset 0 -2px var(--red);
  text-shadow: 0 0 8px rgba(255,40,72,.4);
}

.trade-body { display: flex; flex-direction: column; }
.trade-body.hidden { display: none; }

.field-label {
  color: var(--muted); justify-content: space-between;
  margin-bottom: 4px; display: flex; font-size: 10px;
}
.amount-row, .recipient-row {
  border: 1px solid var(--green-dim);
  background: var(--lcd); color: var(--green);
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px;
  height: 50px; padding: 0 10px; display: grid;
}
.amount-row:focus-within, .recipient-row:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(0,255,65,.18);
}
.amount-row input, .recipient-row input {
  width: 100%; min-width: 0;
  color: var(--green); background: none; border: 0; outline: 0;
  font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 22px;
  text-shadow: 0 0 10px var(--green-glow);
}
.recipient-row { grid-template-columns: 1fr; height: 34px; margin-top: -1px; }
.recipient-row input { font-size: 10px; font-family: inherit; }
.recipient-label { margin-top: 8px; }
.amount-row button {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--green); min-height: 20px; padding: 1px 8px; font-size: 10px; font-family: inherit;
}
.amount-row button:hover { box-shadow: 0 0 8px var(--green-glow); }
.amount-row button:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }
.amount-row span { color: var(--muted); font-size: 10px; }

.hint { color: var(--muted); margin: 5px 0 8px; font-size: 10px; }

.preview {
  border: 1px solid var(--green-dim);
  min-height: 90px; color: var(--green);
  background: var(--lcd); padding: 8px; line-height: 1.7;
  position: relative; overflow: hidden;
}
.preview::after {
  content: '';
  background: repeating-linear-gradient(0deg, rgba(0,255,65,.035) 0 1px, transparent 1px 2px);
  position: absolute; inset: 0; pointer-events: none;
}
.preview:hover { border-color: var(--green); box-shadow: 0 0 8px rgba(0,255,65,.1); }
.preview p { margin: 0; display: flex; justify-content: space-between; }
.preview span { color: var(--muted); }
.preview b { color: var(--green); font-weight: 600; text-shadow: 0 0 5px var(--green-glow); }

.primary {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--green); font-size: 11px; font-weight: 700;
  width: 100%; height: 40px; margin-top: 10px;
  text-transform: lowercase; font-family: inherit; letter-spacing: .04em;
}
.primary:hover { color: #fff; box-shadow: 0 0 14px var(--green-glow); text-shadow: 0 0 8px rgba(255,255,255,.4); }
.primary:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }
.burn-primary:hover { color: var(--red); box-shadow: 0 0 14px rgba(255,40,72,.3); }

.status {
  min-height: 14px; color: var(--red);
  text-align: center; margin-top: 5px; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status.ok { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* ── DATA CARD ──────────────────────────────────────────────────────────── */
.data-card { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
.data-grid { grid-template-columns: repeat(5,1fr); gap: 8px; display: grid; }
.data-group {
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  padding: 6px;
}
.data-title { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; font-size: 9px; }
.data-row { color: var(--green); display: flex; flex-direction: column; gap: 2px; }
.data-row b { color: var(--green); font-weight: 700; font-size: 12px; text-shadow: 0 0 6px var(--green-glow); }
.data-row small { color: var(--muted); font-size: 9px; }

/* ── FLOWS CARD ─────────────────────────────────────────────────────────── */
.flows-card { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
.flows-head {
  color: var(--green); justify-content: space-between;
  gap: 10px; margin-bottom: 8px; display: flex; font-size: 10px;
}
.flows-head b { font-weight: 700; text-shadow: 0 0 6px var(--green-glow); }
.flows-head em { font-style: normal; }
.flows-head div { display: flex; gap: 12px; }

.flow-bars {
  border: 1px solid var(--green-dim);
  background: var(--lcd);
  grid-template-columns: repeat(24,1fr);
  gap: 3px; height: 110px; padding: 8px;
  display: grid; position: relative;
}
.flow-bars::before {
  content: ''; background: var(--green-dim); height: 1px; opacity: .5;
  position: absolute; top: 50%; left: 8px; right: 8px;
}
.bar-slot { cursor: help; justify-content: center; align-items: center; display: flex; position: relative; }
.bar-slot i { width: 100%; max-width: 18px; min-height: 2px; display: block; }
.bar-slot:hover i { filter: brightness(1.5); }
.bar-slot .pos {
  background: var(--green);
  box-shadow: 0 0 4px var(--green-glow);
  align-self: flex-start;
  transform: translateY(calc(55px - 100%));
}
.bar-slot .neg {
  background: var(--red);
  box-shadow: 0 0 4px rgba(255,40,72,.4);
  align-self: flex-end;
  transform: translateY(calc(100% - 55px));
}
.time { color: var(--muted); justify-content: space-between; margin-top: 4px; display: flex; font-size: 9px; }

/* ── CONTRACT NODES ─────────────────────────────────────────────────────── */
.contract-node {
  background: var(--lcd); color: var(--green);
  border: 1px solid var(--green-dim);
  grid-template-rows: 28px auto auto;
  align-items: center; margin-top: 8px;
  display: grid; position: relative; cursor: pointer;
}
.contract-node .node-title {
  border-bottom: 1px solid var(--green-dim);
  min-height: 28px; color: var(--green);
  background: linear-gradient(90deg, #003800, #001600);
  justify-content: center; align-items: center;
  font-size: 11px; font-weight: 700; display: flex;
  text-shadow: 0 0 10px var(--green-glow); letter-spacing: .04em;
}
.contract-node .node-caption { color: var(--muted); padding: 6px 8px 2px; font-size: 9px; line-height: 1.35; display: block; }
.contract-node .node-address { color: var(--green); word-break: break-all; padding: 0 8px 8px; font-size: 9px; display: block; }
.contract-node:hover { border-color: var(--green); box-shadow: 0 0 14px rgba(0,255,65,.18); }
.contract-node:hover .node-title { background: linear-gradient(90deg, #004800, #002200); }

.contract-link { color: var(--muted); text-underline-offset: 2px; margin-top: 6px; margin-right: 10px; font-size: 10px; text-decoration: underline; display: inline-block; }
.contract-link:hover { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* ── MANIFESTO ──────────────────────────────────────────────────────────── */
.manifesto {
  background: var(--lcd); color: var(--green);
  min-height: 46px;
  margin-top: 10px; padding-left: 12px; padding-right: 12px; padding-bottom: 10px;
  font-size: 10px; line-height: 1.9;
  text-shadow: 0 0 4px rgba(0,255,65,.25);
  position: relative; overflow: hidden;
}
.manifesto::after {
  content: '';
  background: repeating-linear-gradient(0deg, rgba(0,255,65,.03) 0 1px, transparent 1px 2px);
  position: absolute; inset: 0; pointer-events: none;
}

/* ── TOOLTIP ────────────────────────────────────────────────────────────── */
.data-tooltip { position: relative; }
.data-tooltip::after {
  content: attr(data-tip);
  z-index: 300;
  color: var(--green); background: var(--lcd);
  border: 1px solid var(--green-dim);
  min-width: max-content; max-width: min(340px,80vw);
  white-space: nowrap; pointer-events: none; opacity: 0;
  padding: 4px 7px; font-size: 10px;
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 16px rgba(0,255,65,.2);
  text-shadow: 0 0 5px var(--green-glow);
}
.data-tooltip:hover::after { opacity: 1; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer { text-align: center; color: var(--muted); margin-top: 14px; font-size: 10px; padding-bottom: 24px; }

/* ── COLOR UTILS ────────────────────────────────────────────────────────── */
.green  { color: var(--green)  !important; text-shadow: 0 0 6px var(--green-glow); }
.yellow { color: var(--amber)  !important; }
.red    { color: var(--red)    !important; }
.blue   { color: #4fc3f7       !important; }
.muted  { color: var(--muted)  !important; }

/* ── WALLET BAR ─────────────────────────────────────────────────────────── */
.wallet-bar {
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  border-top: none;
  width: min(1280px, 100vw - 28px);
  margin: 0 auto;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--green);
  text-shadow: 0 0 5px var(--green-glow);
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wb-addr { color: var(--green); font-weight: 700; letter-spacing: .04em; }
.wb-sep  { color: var(--green-dim); }
.wallet-bar b { font-weight: 700; }
.wb-disconnect {
  margin-left: auto;
  background: none;
  border: 1px solid var(--green-dim);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.wb-disconnect:hover { color: var(--red); border-color: var(--red); }

/* ── POPUP WINDOWS ──────────────────────────────────────────────────────── */
.pw {
  position: fixed;
  z-index: 800;
  background: var(--chrome);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: 0 0 28px rgba(0,255,65,.14), 6px 6px 0 #000;
  min-width: 300px;
  user-select: none;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
}
.pw.pw-video { min-width: 340px; }
.pw.pw-amber {
  border-color: #3a2800 var(--lo) var(--lo) #3a2800;
  box-shadow: 0 0 28px rgba(255,170,0,.12), 6px 6px 0 #000;
}
.pw.pw-red {
  border-color: #3a0010 var(--lo) var(--lo) #3a0010;
  box-shadow: 0 0 28px rgba(255,40,72,.12), 6px 6px 0 #000;
}
.pw.pw-on-top { box-shadow: 0 0 48px rgba(0,255,65,.28), 8px 8px 0 #000; }
.pw.pw-amber.pw-on-top { box-shadow: 0 0 48px rgba(255,170,0,.22), 8px 8px 0 #000; }

.pw-bar {
  background: linear-gradient(90deg, #003800, #001600);
  padding: 4px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  border-bottom: 1px solid var(--green-dim);
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 8px var(--green-glow);
  letter-spacing: .04em;
}
.pw-bar:active { cursor: grabbing; }
.pw-amber .pw-bar {
  background: linear-gradient(90deg, #2a1600, #160b00);
  border-bottom-color: #5c3800;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255,170,0,.45);
}
.pw-red .pw-bar {
  background: linear-gradient(90deg, #2a0010, #160008);
  border-bottom-color: #5c0020;
  color: var(--red);
  text-shadow: 0 0 8px rgba(255,40,72,.45);
}

.pw-btns { display: flex; gap: 2px; }
.pw-btn {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  width: 14px; height: 13px;
  font-size: 10px; font-weight: 700;
  color: var(--green); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
}
.pw-btn:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }
.pw-btn:hover { color: #fff; }

.pw-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pw-body.minimized { display: none; }

.pw-lcd {
  background: var(--lcd);
  border: 1px solid var(--green-dim);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--green);
  text-shadow: 0 0 5px var(--green-glow);
  line-height: 1.9;
  position: relative;
  overflow: hidden;
}
.pw-lcd::after {
  content: '';
  background: repeating-linear-gradient(0deg, rgba(0,255,65,.04) 0 1px, transparent 1px 2px);
  position: absolute; inset: 0; pointer-events: none;
}
.pw-row { display: flex; justify-content: space-between; gap: 16px; }
.pw-row span { color: var(--muted); }
.pw-row b { font-weight: 700; }

.pw-art {
  font-size: 6.5px;
  line-height: 1.25;
  color: var(--green);
  text-shadow: 0 0 5px var(--green-glow);
  font-family: 'Courier New', monospace;
  background: var(--lcd);
  padding: 7px 8px;
  border: 1px solid var(--green-dim);
  overflow: hidden;
  white-space: pre;
}

.pw-txt {
  font-size: 12px;
  color: var(--green);
  text-shadow: 0 0 4px rgba(0,255,65,.28);
  margin: 0;
  line-height: 1.7;
}
.pw-txt.muted { color: var(--muted); text-shadow: none; }
.pw-txt.red   { color: var(--red);   text-shadow: 0 0 6px rgba(255,40,72,.4); font-weight: 700; }

.pw-divider {
  height: 1px;
  background: var(--green-dim);
  opacity: .5;
  margin: 2px 0;
}

.pw-body-video {
  padding: 6px;
}
.pw-vid {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--green-dim);
  background: #000;
}

.pw-action {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--green);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 0;
  width: 100%;
  text-transform: lowercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.pw-action:hover { color: #fff; box-shadow: 0 0 10px var(--green-glow); }
.pw-action:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); transform: translate(1px,1px); }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--chrome-2);
  border: 1px solid var(--hi);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}
::-webkit-scrollbar-thumb:hover { background: var(--chrome-3); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .trade-card { min-height: 0; }
  .data-grid { grid-template-columns: repeat(2,1fr); }
  .pixel-milady { display: none; }
}
@media (max-width: 760px) {
  .topbar { flex-direction: column; height: auto; padding: 4px; }
  .chart-box { height: 240px; padding-left: 42px; padding-right: 42px; }
  .data-grid { grid-template-columns: 1fr; }
}