:root {
  color-scheme: dark;
  --bg: #07090d;
  --panel: #0d1118;
  --line: #202733;
  --text: #eef3f8;
  --muted: #8490a0;
  --accent: #b7ff52;
  --good: #77ef9a;
  --warn: #ffc766;
  --bad: #ff7d7d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 18% -10%, rgba(183,255,82,.12), transparent 30%), var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 30px; }
.hero { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .16em; font-weight: 800; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); margin-right:7px; }
h1 { margin: 8px 0 4px; font-size: clamp(42px, 7vw, 80px); line-height: .95; letter-spacing: -.055em; }
h1 span { color: var(--accent); }
h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.03em; }
p { color: var(--muted); max-width: 650px; margin: 14px 0 0; font-size: 17px; }
.header-actions { text-align:right; min-width:190px; }
button, input { background:#111720; color:var(--text); border:1px solid var(--line); border-radius:10px; }
button { padding:10px 15px; cursor:pointer; font-weight:700; }
button:hover { border-color:#465267; }
button:disabled { opacity:.55; cursor:default; }
.muted { color:var(--muted); font-size:12px; margin-top:10px; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 0; }
.card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),var(--panel); border-radius:14px; padding:20px; }
.card.good { border-color:rgba(119,239,154,.35); }
.label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; display:block; }
.value { font-size:36px; font-weight:800; letter-spacing:-.04em; margin-top:8px; }
.meta { color:var(--muted); font-size:12px; margin-top:3px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:16px; }
.panel-head { display:flex; justify-content:space-between; gap:18px; align-items:end; padding:22px; border-bottom:1px solid var(--line); }
input { width:min(380px,100%); padding:11px 13px; outline:none; }
input:focus { border-color:#59667a; }
.chart-wrap { height:250px; padding:20px 20px 8px; }
#networkChart, #validatorChart { width:100%; height:100%; overflow:visible; }
.chart-line { fill:none; stroke-width:3; vector-effect:non-scaling-stroke; }
.chart-signing { stroke:var(--accent); }
.chart-total { stroke:#607086; stroke-dasharray:7 7; }
.chart-axis { stroke:#27303d; stroke-width:1; }
.chart-guide { stroke:#27303d; stroke-width:1; stroke-dasharray:4 5; }
.svg-muted { fill:var(--muted); font: 13px ui-sans-serif, system-ui, sans-serif; }
.legend { display:flex; gap:18px; color:var(--muted); font-size:12px; padding:0 22px 18px; }
.legend-line { display:inline-block; width:22px; height:2px; margin-right:6px; vertical-align:middle; }
.signing-line { background:var(--accent); }
.total-line { background:#607086; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th,td { text-align:left; padding:14px 18px; border-bottom:1px solid #171d26; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.validator-row { cursor:pointer; }
.validator-row:hover { background:#101620; }
.address-button { padding:0; border:0; background:none; color:#b9c7ff; border-radius:0; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.address-button:hover { color:#fff; }
.muted-cell { color:var(--muted); font-size:12px; }
.badge { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.badge.signing,.badge.active { color:var(--good); border-color:rgba(119,239,154,.35); }
.badge.dormant { color:var(--bad); border-color:rgba(255,125,125,.35); }
.badge.idle,.badge.pending { color:var(--warn); border-color:rgba(255,199,102,.35); }
.empty { color:var(--muted); text-align:center; padding:30px; }
footer { color:var(--muted); text-align:center; font-size:12px; padding:8px 0 0; }
dialog { width:min(860px,calc(100% - 28px)); color:var(--text); background:#0b0f15; border:1px solid #2b3442; border-radius:18px; padding:0; box-shadow:0 30px 90px rgba(0,0,0,.65); }
dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(4px); }
.dialog-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:22px; border-bottom:1px solid var(--line); }
.dialog-head h2 { max-width:720px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:17px; }
.icon-button { width:38px; height:38px; padding:0; font-size:24px; line-height:1; }
.detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.detail-grid > div { background:#0d1118; padding:18px; }
.detail-grid strong { display:block; margin-top:7px; font-size:18px; }
.detail-chart-head { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 22px 0; }
.detail-chart-head .muted { margin:0; }
.detail-chart-wrap { height:210px; padding:18px 22px 24px; }
@media (max-width:850px) {
  .hero,.panel-head { align-items:flex-start; flex-direction:column; }
  .header-actions { text-align:left; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .detail-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px) {
  .shell { width:min(100% - 20px,1180px); padding-top:30px; }
  .cards { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .chart-wrap { height:210px; }
}