/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:      #000;
  --s0:      #070707;
  --s1:      #0d0d0d;
  --s2:      #141414;
  --b0:      #1a1a1a;
  --b1:      #262626;
  --b2:      #333;

  --txt:     #ebebeb;
  --txt2:    #999;
  --txt3:    #555;

  --orange:  #F7931A;
  --orange2: #c97510;
  --o-bg:    rgba(247,147,26,.07);
  --o-glow:  rgba(247,147,26,.18);

  --red:     #FF4040;
  --r-bg:    rgba(255,64,64,.07);
  --r-glow:  rgba(255,64,64,.15);

  --green:   #00D46A;
  --g-bg:    rgba(0,212,106,.07);

  --yellow:  #F5C542;
  --y-bg:    rgba(245,197,66,.07);

  --blue:    #4499FF;

  --f: 'IBM Plex Mono', 'Cascadia Code', 'Fira Code', monospace;
  --r: 0px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f);
  font-size: 13px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Scanlines overlay ──────────────────────────────────────── */
.scanlines {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px
  );
}

/* ── Header ─────────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 46px;
  background: var(--s0); border-bottom: 1px solid var(--b0);
  position: sticky; top: 0; z-index: 200; flex-shrink: 0;
}
.hdr-l { display: flex; align-items: center; gap: 10px; }
.hdr-icon { font-size: 18px; font-weight: 700; color: var(--orange); }
.hdr-name {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--txt);
  line-height: 1.2;
}
.hdr-domain { font-size: 9px; color: var(--txt3); letter-spacing: .06em; }

.hdr-r { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--txt3); }
.hdr-sep { color: var(--b1); }
.hdr-meta { font-size: 10px; color: var(--txt3); }
.hdr-meta b { color: var(--txt2); font-weight: 500; }
.live-lbl { color: var(--green); font-size: 9px; font-weight: 600; letter-spacing: .1em; }

/* Pulse */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(0,212,106,.5); }
  60%      { opacity:.7; box-shadow: 0 0 0 5px rgba(0,212,106,0); }
}

/* ── Nav ────────────────────────────────────────────────────── */
.nav {
  display: flex; gap: 0; padding: 0 20px;
  background: var(--s0); border-bottom: 1px solid var(--b0);
  flex-shrink: 0; overflow-x: auto;
}
.nb {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--txt3); cursor: pointer;
  font-family: var(--f); font-size: 10px;
  font-weight: 500; letter-spacing: .12em;
  padding: 11px 16px; white-space: nowrap;
  transition: color .14s, border-color .14s;
}
.nb:hover  { color: var(--txt2); }
.nb.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ── Wrapper ─────────────────────────────────────────────────── */
.wrap { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 1100px; width: 100%; margin: 0 auto; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tab { display: none; flex-direction: column; gap: 12px; }
.tab.active { display: flex; animation: fadeUp .2s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Card ───────────────────────────────────────────────────── */
.card {
  background: var(--s0); border: 1px solid var(--b0);
  padding: 14px 16px;
  transition: border-color .2s;
}
.card:hover { border-color: var(--b1); }

/* ── Section label ──────────────────────────────────────────── */
.sec-label {
  display: block; font-size: 9px; font-weight: 500;
  letter-spacing: .14em; color: var(--txt3);
  text-transform: uppercase; margin-bottom: 12px;
}

/* ── OVERVIEW ── Hero ───────────────────────────────────────── */
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .hero-row { grid-template-columns: 1fr; } }

.hero-card {
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 20px;
  background: var(--s0);
  border: 1px solid var(--b0);
  border-bottom: 2px solid var(--orange);
  position: relative; overflow: hidden;
}
.hero-card::before {
  content: ''; position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 120%, var(--o-bg), transparent);
  pointer-events: none;
}
.hero-kicker { font-size: 9px; letter-spacing: .18em; color: var(--txt3); margin-bottom: 8px; }
.hero-val { font-size: 52px; font-weight: 700; color: var(--red); line-height: 1; letter-spacing: -.03em; }
.hero-unit { font-size: 22px; font-weight: 400; color: var(--txt3); }
.hero-sub { font-size: 11px; color: var(--txt3); margin-top: 6px; }

.hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hs-tile { padding: 12px 14px; }

/* Stat tiles */
.st-k { font-size: 8px; letter-spacing: .14em; color: var(--txt3); margin-bottom: 5px; }
.st-v { font-size: 20px; font-weight: 700; line-height: 1.1; }
.st-s { font-size: 9px; color: var(--txt3); margin-top: 3px; }

.st-g { border-left: 2px solid var(--green); background: var(--g-bg); }
.st-g .st-v { color: var(--green); }
.st-r { border-left: 2px solid var(--red); background: var(--r-bg); }
.st-r .st-v { color: var(--red); }
.st-y { border-left: 2px solid var(--yellow); background: var(--y-bg); }
.st-y .st-v { color: var(--yellow); }

/* ── Safety bar ─────────────────────────────────────────────── */
.safety-card {}
.safety-hdr { display:flex; justify-content:space-between; align-items:center; }
.safety-pct { font-size: 14px; font-weight: 700; color: var(--green); }
.safety-track { height: 16px; background: var(--b0); display:flex; overflow:hidden; margin: 10px 0 8px; }
.sf-fill { height: 100%; transition: width 1.3s cubic-bezier(.16,1,.3,1); }
.sf-safe { background: var(--green); }
.sf-p2pk { background: var(--red); }
.sf-p2tr { background: var(--orange); }
.sf-p2ms { background: var(--yellow); }
.safety-legend { display:flex; gap:16px; flex-wrap:wrap; }
.sl-item { display:flex; align-items:center; gap:5px; font-size:9px; color:var(--txt3); letter-spacing:.06em; }
.sl-dot { display:inline-block; width:8px; height:8px; flex-shrink:0; }

/* ── Two-column ─────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:740px) { .two-col { grid-template-columns:1fr; } }

/* ── Vulnerable list ────────────────────────────────────────── */
.vuln-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--b0);
}
.vuln-row:last-child { border-bottom: none; }
.vr-type { font-size: 11px; font-weight: 600; width: 38px; flex-shrink: 0; color: var(--txt2); }
.vr-bar { flex: 1; height: 6px; background: var(--b0); }
.vr-fill { height: 100%; transition: width 1.4s cubic-bezier(.16,1,.3,1); }
.vr-btc { width: 90px; text-align:right; font-size:12px; font-weight:600; flex-shrink:0; }
.vr-badge { font-size:8px; font-weight:700; letter-spacing:.1em; padding:2px 7px; flex-shrink:0; }
.vc { background:var(--r-bg); color:var(--red); }
.vh { background:var(--o-bg); color:var(--orange); }

.vuln-total { display:flex; justify-content:space-between; padding-top:12px; margin-top:4px; border-top:1px solid var(--b0); font-size:12px; }
.vt-l { color:var(--txt3); }
.vt-v { font-weight:700; color:var(--red); }

/* ── Gauge ──────────────────────────────────────────────────── */
.gauge-card { display:flex; flex-direction:column; }
#gauge-canvas { width:100%; max-width:280px; margin:0 auto; display:block; }
.gauge-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.gs-item { }
.gs-k { font-size:8px; letter-spacing:.1em; color:var(--txt3); }
.gs-v { font-size:12px; font-weight:600; }
.gs-warn { color:var(--orange); }

/* ── Sparkline ──────────────────────────────────────────────── */
.spark-card {}
#spark-canvas { width:100%; display:block; }
.spark-foot { display:flex; gap:20px; margin-top:8px; font-size:10px; color:var(--txt3); }
.sf-down { color:var(--green); }
.sf-up   { color:var(--red); }

/* ── Satoshi card ───────────────────────────────────────────── */
.sat-card {
  border-color: #2a1000;
  background: linear-gradient(135deg, var(--s0) 0%, rgba(40,15,0,.5) 100%);
}
.sat-big { font-size:30px; font-weight:700; color:var(--orange); letter-spacing:-.02em; margin:4px 0 2px; }
.sat-sub { font-size:10px; color:var(--txt3); line-height:1.9; }
.sat-warn { font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--red); margin-top:10px; }
.sat-note { font-size:10px; color:var(--txt3); margin-top:8px; line-height:1.7; }

/* ── ADDRESS CHECK ──────────────────────────────────────────── */
.check-hero { text-align:center; padding:24px 0 20px; }
.ch-title { font-size:14px; font-weight:600; letter-spacing:.12em; margin-bottom:5px; }
.ch-sub { font-size:11px; color:var(--txt3); margin-bottom:20px; }

.ch-search { display:flex; gap:8px; max-width:680px; margin:0 auto; }
.addr-in {
  flex:1; background:var(--s1); border:1px solid var(--b1);
  color:var(--txt); font-family:var(--f); font-size:13px;
  outline:none; padding:11px 14px;
  transition:border-color .15s;
}
.addr-in:focus { border-color:var(--orange); }
.addr-in::placeholder { color:var(--txt3); }

.scan-btn {
  background:var(--orange); border:none; color:#000;
  cursor:pointer; font-family:var(--f); font-size:10px;
  font-weight:700; letter-spacing:.12em; padding:11px 22px;
  transition:opacity .15s;
  flex-shrink:0;
}
.scan-btn:hover  { opacity:.85; }
.scan-btn:active { opacity:.7; }

/* Result card */
.res-card {
  background:var(--s0); border:1px solid var(--b0);
  padding:20px; margin-bottom:16px; max-width:680px; margin-left:auto; margin-right:auto;
  animation:fadeUp .2s ease;
}
.res-hdr { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.risk-badge {
  font-size:8px; font-weight:700; letter-spacing:.14em;
  padding:4px 10px; flex-shrink:0; text-transform:uppercase;
}
.rb-CRITICAL { background:var(--r-bg); color:var(--red); border:1px solid var(--red); }
.rb-HIGH     { background:var(--o-bg); color:var(--orange); border:1px solid var(--orange); }
.rb-MEDIUM   { background:var(--y-bg); color:var(--yellow); border:1px solid var(--yellow); }
.rb-LOW      { background:var(--g-bg); color:var(--green); border:1px solid var(--green); }
.rb-UNKNOWN  { background:var(--s2); color:var(--txt3); border:1px solid var(--b1); }
.res-type { font-size:9px; color:var(--txt3); letter-spacing:.08em; }
.res-addr { font-size:10px; word-break:break-all; margin-top:2px; color:var(--txt2); }

.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:540px) { .res-grid { grid-template-columns:1fr; } }
.res-box { background:var(--s2); border:1px solid var(--b0); padding:10px 12px; }
.res-box.full { grid-column:1/-1; }
.rb-k { font-size:8px; letter-spacing:.1em; color:var(--txt3); margin-bottom:4px; }
.rb-v { font-size:11px; line-height:1.6; }
.res-warn { color:var(--yellow); font-size:10px; margin-top:5px; }

/* Tiers */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:700px) { .tiers { grid-template-columns:repeat(2,1fr); } }
.tier { background:var(--s0); border:1px solid var(--b0); padding:14px; }
.tier-c { border-top:2px solid var(--red); }
.tier-h { border-top:2px solid var(--orange); }
.tier-m { border-top:2px solid var(--yellow); }
.tier-l { border-top:2px solid var(--green); }
.tier-badge { font-size:8px; font-weight:700; letter-spacing:.12em; margin-bottom:5px; }
.tier-c .tier-badge { color:var(--red); }
.tier-h .tier-badge { color:var(--orange); }
.tier-m .tier-badge { color:var(--yellow); }
.tier-l .tier-badge { color:var(--green); }
.tier-types { font-size:11px; font-weight:600; margin-bottom:7px; }
.tier-desc { font-size:10px; color:var(--txt3); line-height:1.65; }

/* ── DISTRIBUTION ───────────────────────────────────────────── */
.four-stat { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:600px) { .four-stat { grid-template-columns:repeat(2,1fr); } }
.st-tile { padding:12px 14px; }

#dist-bar { width:100%; height:40px; display:block; }
.dist-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.dl-item { display:flex; align-items:center; gap:5px; font-size:9px; color:var(--txt3); }
.dl-swatch { width:8px; height:8px; flex-shrink:0; }

.tbl-wrap { overflow-x:auto; }
.dtbl { width:100%; border-collapse:collapse; font-size:11px; white-space:nowrap; }
.dtbl th {
  background:var(--s1); border:1px solid var(--b0);
  color:var(--txt3); font-size:8px; font-weight:500;
  letter-spacing:.1em; padding:7px 10px; text-align:left;
}
.dtbl th.r { text-align:right; }
.dtbl td { border:1px solid var(--b0); padding:7px 10px; vertical-align:middle; }
.dtbl td.r { text-align:right; font-variant-numeric:tabular-nums; }
.dtbl tr:hover td { background:var(--s1); }

.ibar { width:70px; height:5px; background:var(--b0); }
.ibar-f { height:100%; }

/* ── TIMELOCKS ──────────────────────────────────────────────── */
.inh-card { border-color:#292000; }
.code-blk {
  background:var(--s2); border:1px solid var(--b0);
  color:var(--txt3); font-size:10px; line-height:1.9;
  padding:10px 12px; white-space:pre; margin-bottom:10px;
  font-family:var(--f);
}
.inh-desc { font-size:10px; color:var(--txt3); line-height:1.7; margin-bottom:10px; }
.inh-count { font-size:13px; font-weight:600; color:var(--yellow); }
.inh-count span { font-size:20px; }
.tl-status { font-size:11px; color:var(--txt3); line-height:2; }
.tl-ok   { color:var(--green); }
.tl-run  { color:var(--yellow); }
.tl-none { color:var(--txt3); }

/* ── Footer ─────────────────────────────────────────────────── */
.foot {
  background:var(--s0); border-top:1px solid var(--b0);
  display:flex; justify-content:space-between;
  font-size:9px; color:var(--txt3); padding:8px 20px;
  flex-shrink:0; letter-spacing:.04em;
}

/* ── Loader ─────────────────────────────────────────────────── */
.spin {
  display:inline-block; width:10px; height:10px;
  border:1.5px solid var(--b1); border-top-color:var(--orange);
  border-radius:50%; animation:spin .5s linear infinite;
  vertical-align:middle; margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:540px) { .hd-hide { display:none; } }
