:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: rgba(255,255,255,.92);
  --panel-solid: #fff;
  --soft: #f0f4f9;
  --text: #142033;
  --muted: #6e7b8f;
  --line: #dfe6ef;
  --primary: #315efb;
  --primary-soft: #e9efff;
  --green: #16a36a;
  --red: #d94b58;
  --amber: #db8a16;
  --shadow: 0 12px 36px rgba(20,32,51,.07);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1019;
  --panel: rgba(20,28,42,.9);
  --panel-solid: #141c2a;
  --soft: #1a2434;
  --text: #eef3fb;
  --muted: #91a0b5;
  --line: #263347;
  --primary: #7092ff;
  --primary-soft: #202f5d;
  --green: #42cc91;
  --red: #ff7180;
  --amber: #f4ad49;
  --shadow: 0 18px 46px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 0%, rgba(49,94,251,.08), transparent 28rem), var(--bg); color: var(--text); font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; display: grid; grid-template-columns: 250px minmax(260px,680px) auto; gap: 24px; align-items: center; padding: 12px max(24px, calc((100vw - 1420px)/2)); border-bottom: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { display:block; width:39px; height:39px; flex:0 0 39px; border-radius:12px; object-fit:contain; filter:drop-shadow(0 7px 12px rgba(49,94,251,.28)); }
.brand strong,.brand small { display:block; white-space:nowrap; }
.brand strong { font-size: 15px; letter-spacing: .1px; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: .6px; }
.search { height: 46px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:var(--soft); transition:.2s; }
.search:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(49,94,251,.12); background:var(--panel-solid); }
.search svg { width:20px; fill:none; stroke:var(--muted); stroke-width:2; }
.search input { flex:1; min-width:0; border:0; outline:0; color:var(--text); background:transparent; }
.search kbd { padding:2px 7px; color:var(--muted); border:1px solid var(--line); border-radius:6px; background:var(--panel-solid); font-size:10px; }
.header-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.connection { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel-solid); white-space:nowrap; font-size:12px; }
.connection i { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 15%,transparent); }
.connection.connected i { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 15%,transparent); }
.connection.disconnected i { background:var(--red); }
.icon-button { width:39px; height:39px; border:1px solid var(--line); border-radius:11px; cursor:pointer; color:var(--text); background:var(--panel-solid); font-size:20px; }
.language-button { height:39px; min-width:42px; padding:0 10px; border:1px solid var(--line); border-radius:11px; cursor:pointer; color:var(--text); background:var(--panel-solid); font-size:12px; font-weight:750; }
.container { width:min(1420px,calc(100% - 48px)); min-height:calc(100vh - 145px); margin:28px auto 42px; }
.error-banner { padding:10px 24px; color:#fff; background:var(--red); text-align:center; }
.hidden { display:none!important; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin:6px 0 22px; }
.eyebrow { margin:0 0 4px; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(25px,3vw,38px); line-height:1.2; letter-spacing:-.8px; }
h2 { margin:0; font-size:18px; }
.subtle { color:var(--muted); }
.network-meta { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(6,1fr); gap:13px; margin-bottom:22px; }
.stat { min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.stat .label { display:block; color:var(--muted); font-size:12px; }
.stat strong { display:block; overflow:hidden; margin-top:7px; font-size:clamp(17px,1.6vw,24px); white-space:nowrap; text-overflow:ellipsis; }
.stat .unit { color:var(--muted); font-size:11px; font-weight:500; }
.progress { height:5px; margin-top:12px; overflow:hidden; border-radius:5px; background:var(--soft); }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--primary),#7a4cf5); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--panel); box-shadow:var(--shadow); }
.panel + .panel { margin-top:18px; }
.panel-head { min-height:61px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 18px; border-bottom:1px solid var(--line); }
.panel-head p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.view-all { white-space:nowrap; font-size:12px; font-weight:600; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); background:color-mix(in srgb,var(--soft) 55%,transparent); font-size:11px; font-weight:650; letter-spacing:.3px; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:color-mix(in srgb,var(--primary-soft) 30%,transparent); }
.hash { display:inline-block; max-width:150px; overflow:hidden; vertical-align:bottom; text-overflow:ellipsis; }
.mono { font-family:"Cascadia Mono",Consolas,monospace; font-size:12px; }
.positive { color:var(--green); }
.negative { color:var(--red); }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:650; }
.badge.success { color:var(--green); background:color-mix(in srgb,var(--green) 13%,transparent); }
.badge.failed { color:var(--red); background:color-mix(in srgb,var(--red) 13%,transparent); }
.badge.type { color:var(--primary); background:var(--primary-soft); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-row { min-width:0; display:grid; grid-template-columns:155px minmax(0,1fr); gap:18px; padding:15px 18px; border-bottom:1px solid var(--line); }
.detail-row:nth-child(odd) { border-right:1px solid var(--line); }
.detail-row .key { color:var(--muted); }
.detail-row .value { min-width:0; overflow-wrap:anywhere; }
.address-head { padding:22px; }
.address-value { margin-top:6px; overflow-wrap:anywhere; font:13px "Cascadia Mono",Consolas,monospace; color:var(--muted); }
.address-stats { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); }
.address-stat { padding:16px; border-right:1px solid var(--line); }
.address-stat:last-child { border-right:0; }
.address-stat span { display:block; color:var(--muted); font-size:11px; }
.address-stat strong { display:block; margin-top:5px; font-size:16px; overflow:hidden; text-overflow:ellipsis; }
.empty { padding:42px 20px; color:var(--muted); text-align:center; }
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.button { padding:8px 13px; border:1px solid var(--line); border-radius:9px; cursor:pointer; color:var(--text); background:var(--panel-solid); }
.button:disabled { opacity:.4; cursor:not-allowed; }
.button.disabled { opacity:.4; pointer-events:none; }
.loading-card { padding:70px; color:var(--muted); text-align:center; border:1px solid var(--line); border-radius:17px; background:var(--panel); }
.skeleton { min-height:16px; border-radius:6px; background:linear-gradient(90deg,var(--soft),var(--panel-solid),var(--soft)); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.toast { position:fixed; right:22px; bottom:22px; z-index:40; max-width:390px; padding:12px 16px; border-radius:11px; color:#fff; background:#172033; box-shadow:var(--shadow); }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px max(24px,calc((100vw - 1420px)/2)); border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media (max-width:1100px) { .stats{grid-template-columns:repeat(3,1fr)} .address-stats{grid-template-columns:repeat(3,1fr)} .address-stat:nth-child(3){border-right:0} .topbar{grid-template-columns:220px 1fr auto} .connection span{display:none} }
@media (max-width:780px) { .topbar{position:relative;grid-template-columns:1fr auto;gap:10px;padding:12px 16px}.search{grid-column:1/-1;grid-row:2}.container{width:calc(100% - 24px);margin-top:18px}.stats{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.network-meta{justify-content:flex-start}.detail-grid{grid-template-columns:1fr}.detail-row:nth-child(odd){border-right:0}.address-stats{grid-template-columns:repeat(2,1fr)}.address-stat:nth-child(2n){border-right:0}.address-stat:nth-child(3){border-right:1px solid var(--line)}footer{padding:18px 14px;flex-direction:column}.brand strong{font-size:14px}}
@media (max-width:480px) { .stats{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:14px}.stat strong{font-size:17px}.search kbd{display:none}.detail-row{grid-template-columns:1fr;gap:4px}.header-actions .connection{display:none} }