:root {
  --bg: #070c16;
  --bg2:#0b1220;
  --panel: rgba(15, 23, 42, 0.78);
  --panel2: rgba(17, 24, 39, 0.82);
  --text: #eaf0ff;
  --muted: #a7b7d6;
  --line: rgba(255,255,255,0.10);
  --line2: rgba(255,255,255,0.14);
  --accent: #4da3ff;
  --accent2:#7c5cff;
  --good:#36d399;
  --warn:#fbbf24;
  --bad:#fb7185;
  --shadow: 0 14px 40px rgba(0,0,0,0.45);
  --shadow2: 0 10px 24px rgba(0,0,0,0.35);
  --radius: 18px;
  --radius2: 14px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(77,163,255,0.18), transparent 55%),
    radial-gradient(1000px 700px at 90% 15%, rgba(124,92,255,0.14), transparent 55%),
    radial-gradient(900px 700px at 50% 95%, rgba(54,211,153,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, #050813 100%);
}
a { color: inherit; text-decoration: none; opacity: 0.95; }
a:hover { opacity: 1; text-decoration: none; }

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 14, 26, 0.65);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(77,163,255,0.18)); }
.title { font-size: 18px; font-weight: 900; letter-spacing: 0.6px; }
.subtitle { font-size: 12px; color: var(--muted); font-weight: 650; }
.nav { display: flex; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; justify-content: flex-end; }
.nav a{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.nav a:hover{
  border-color: rgba(77,163,255,0.35);
  background: rgba(77,163,255,0.10);
}

/* Layout */
.container { max-width: 1180px; margin: 0 auto; padding: 18px; }
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.card.glow{
  box-shadow: var(--shadow), 0 0 0 1px rgba(77,163,255,0.06) inset;
}
.grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; margin-top: 16px; }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }

h1 { margin: 0 0 10px 0; font-size: 32px; letter-spacing: -0.7px; }
h2 { margin: 0 0 12px 0; font-size: 20px; letter-spacing: -0.2px; }
h3 { margin: 0 0 10px 0; font-size: 16px; letter-spacing: -0.1px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 2px 8px;
  border-radius: 999px;
  color: #dbe7ff;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 980px){ .hero{ grid-template-columns: 1fr; } }

.heroTitle{
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 10px 0;
  letter-spacing: -1px;
}
.heroSub{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.heroCtas{
  display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.btn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 11px 14px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}
.btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btnPrimary{
  border-color: rgba(77,163,255,0.45);
  background: linear-gradient(180deg, rgba(77,163,255,0.22), rgba(124,92,255,0.16));
  box-shadow: 0 10px 26px rgba(77,163,255,0.14);
}
.btnGhost{
  background: rgba(0,0,0,0.18);
}
.btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }

.pills{
  display:flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.pill{
  font-size: 12px;
  font-weight: 850;
  color: #dbe7ff;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.pill b{ color: #ffffff; }

/* Form */
.row { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: center; margin: 10px 0; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }
label { color: var(--muted); font-size: 13px; font-weight: 700; }
input, select {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text);
  width: 100%;
}
input::placeholder { color: rgba(167,183,214,0.55); }

.divider { height: 1px; background: var(--line); margin: 14px 0; opacity: 0.9; }

/* Segmented */
.segmented { display:flex; gap: 8px; }
.seg {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 850;
}
.seg.active {
  border-color: rgba(77,163,255,0.50);
  background: rgba(77,163,255,0.14);
  box-shadow: 0 10px 26px rgba(77,163,255,0.10);
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px){ .steps{ grid-template-columns: 1fr 1fr; } }
.step{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.16);
}
.step b{ display:block; font-size: 12px; letter-spacing: .4px; }
.step span{ display:block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Score */
.score-wrap { display:flex; align-items: center; justify-content: space-between; gap: 14px; }
.score {
  font-size: 62px;
  font-weight: 950;
  letter-spacing: -2px;
}
.score-label { color: var(--muted); font-weight: 850; }

.gauge{
  width: 120px; height: 120px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at 30% 30%, rgba(77,163,255,0.16), rgba(0,0,0,0.10));
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.03), 0 18px 40px rgba(0,0,0,0.35);
}
.gaugeRing{
  width: 92px; height: 92px; border-radius: 999px;
  border: 10px solid rgba(255,255,255,0.08);
  position: relative;
}
.gaugeFill{
  position:absolute; inset:-10px;
  border-radius: 999px;
  border: 10px solid rgba(77,163,255,0.55);
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
  transform: rotate(0deg);
  opacity: 0.0;
}
.gaugeTxt{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  letter-spacing: -0.5px;
}

/* Breakdown/Flags */
.breakdown { display:flex; flex-direction: column; gap: 10px; }
.metric {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(2,6,23,0.26);
}
.metricTop{ display:flex; justify-content: space-between; align-items: center; }
.metric b { font-size: 13px; }
.metric span { color: var(--muted); font-size: 13px; font-weight: 700; }
.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 8px;
}
.bar > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(77,163,255,0.80), rgba(54,211,153,0.70));
}

.flags { display:flex; flex-direction: column; gap: 10px; }
.flag {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,0.26);
  color: var(--muted);
}
.flag.bad { border-color: rgba(251,113,133,0.35); color: #fecaca; }

.badge-row img { width: 100%; max-width: 520px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(2,6,23,0.28); }

.footer { max-width: 1180px; margin: 18px auto; padding: 0 18px 24px 18px; color: var(--muted); display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Tiny animation */
@media (prefers-reduced-motion: no-preference){
  .card { animation: fadeUp .25s ease-out both; }
  @keyframes fadeUp { from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
}


/* Mobile-safe nav */
.nav { display:flex; }
@media (max-width: 980px){
  .nav { display:none; } /* replaced by bottom nav */
}

/* Bottom nav for mobile */
.bottomnav{
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  display:none;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(9,14,26,0.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  z-index: 20;
}
.bottomnav a{
  flex:1;
  text-align:center;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  font-weight: 850;
}
.bottomnav a:active{ transform: translateY(1px); }
@media (max-width: 980px){
  .bottomnav{ display:flex; }
  body{ padding-bottom: 86px; }
}

/* Token info blocks */
.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,0.26);
  margin-top: 10px;
}
.kv code{ border-radius: 12px; padding: 6px 10px; display:inline-block; max-width: 100%; overflow-wrap:anywhere; }
.btnMini{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
  cursor:pointer;
}
.btnMini:hover{ filter: brightness(1.08); }
.linksRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.linksRow a{ padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); font-weight: 850; font-size: 13px; }
.linksRow a:hover{ border-color: rgba(77,163,255,0.35); background: rgba(77,163,255,0.10); }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: 96px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(9,14,26,0.80);
  color: var(--text);
  font-weight: 850;
  opacity: 0;
  transition: all .18s ease-out;
  z-index: 30;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0px); }

/* --- Registry additions --- */
.split{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.split{grid-template-columns:0.9fr 1.1fr}}
.list{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;background:rgba(255,255,255,0.03)}
.row .left{min-width:0}
.token{font-weight:900}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.small{font-size:0.9rem}
.wrap{word-break:break-word}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,0.35);padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,0.10)}
.pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.03);font-weight:800}

.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}