:root {
  color-scheme: dark;
  --bg: #07110f;
  --panel: rgba(11, 27, 23, 0.86);
  --panel-strong: #0e211c;
  --line: rgba(160, 225, 201, 0.16);
  --text: #effbf5;
  --muted: #8ba99e;
  --green: #55e6a5;
  --green-deep: #1a9f70;
  --gold: #f6c866;
  --red: #ff7d79;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 128, 95, 0.18), transparent 33%),
    linear-gradient(145deg, #06100d 0%, #071612 48%, #07100f 100%);
  color: var(--text);
}
button, input, select { font: inherit; }
.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .22; }
.ambient-one { width: 300px; height: 300px; background: #1de18e; left: -130px; top: 30%; }
.ambient-two { width: 360px; height: 360px; background: #b8892b; right: -200px; top: 8%; opacity: .12; }
.shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 34px; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.eyebrow, .section-index { margin: 0 0 8px; color: var(--green); letter-spacing: .17em; font-size: 12px; font-weight: 750; text-transform: uppercase; }
h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; margin: 0; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 20px; letter-spacing: -.015em; }
.subtitle { margin: 12px 0 0; color: var(--muted); }
.network-pill { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 22, 18, .72); color: #cfe8dd; font-size: 13px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(18px); padding: 26px; }
.query-panel { margin-bottom: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.section-heading.small { margin-bottom: 18px; }
.query-form label, .admin-grid label { display: grid; gap: 9px; color: #b5ccc3; font-size: 13px; font-weight: 650; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
input, select { width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid rgba(175, 226, 208, .2); background: rgba(3, 14, 11, .62); color: var(--text); border-radius: 12px; outline: none; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus { border-color: rgba(85, 230, 165, .7); box-shadow: 0 0 0 3px rgba(85, 230, 165, .1); }
input[readonly] { color: #9cb6ac; }
.button { border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; font-weight: 750; transition: transform .16s, opacity .16s, filter .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button-primary { color: #042217; background: linear-gradient(135deg, #6cf1b3, #35c98b); box-shadow: 0 8px 28px rgba(53, 201, 139, .18); }
.button-secondary { color: #f7e9c8; background: rgba(246, 200, 102, .11); border: 1px solid rgba(246, 200, 102, .28); }
.button-ghost { color: #b7d5ca; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.button-danger { color: #fff; background: linear-gradient(135deg, #d95e5a, #b94443); }
.help { color: var(--muted); margin: 10px 0 0; font-size: 12px; }
.status-line { min-height: 22px; margin-top: 17px; padding-left: 13px; border-left: 2px solid rgba(139, 169, 158, .35); color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.status-line[data-type="success"] { border-color: var(--green); color: #9be8c7; }
.status-line[data-type="error"] { border-color: var(--red); color: #ffaaa7; }
.status-line[data-type="warning"] { border-color: var(--gold); color: #f6d99b; }
.status-line[data-type="working"] { border-color: #72c6ef; color: #a9d9ef; }
.hidden { display: none !important; }
.results { display: grid; gap: 20px; margin-bottom: 20px; }
.result-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 18, 14, .65); overflow: hidden; }
.result-meta div { display: grid; gap: 6px; padding: 15px 18px; border-right: 1px solid var(--line); min-width: 0; }
.result-meta div:last-child { border-right: 0; }
.result-meta span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.result-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 170px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 44, 36, .92), rgba(8, 24, 19, .88)); display: flex; flex-direction: column; }
.metric-card.metric-accent { background: linear-gradient(145deg, rgba(26, 97, 70, .72), rgba(9, 34, 27, .94)); }
.metric-label { color: #9ab7ac; font-size: 12px; letter-spacing: .08em; }
.metric-value { margin-top: 22px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.03em; }
.metric-value[data-positive="true"] { color: var(--green); }
.metric-value[data-positive="false"] { color: var(--gold); }
.metric-detail { margin: auto 0 0; color: var(--muted); line-height: 1.55; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
.compact-panel { box-shadow: none; }
.data-list { margin: 0; display: grid; }
.data-list div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(160, 225, 201, .09); }
.data-list div:last-child { border-bottom: 0; }
.data-list dt { color: var(--muted); font-size: 13px; }
.data-list dd { margin: 0; text-align: right; color: #e6f5ef; font-weight: 650; overflow-wrap: anywhere; }
.address-value { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.table-wrap { overflow: auto; max-height: 360px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: var(--muted); text-align: left; font-weight: 600; padding: 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-strong); }
td { padding: 12px 10px; border-bottom: 1px solid rgba(160, 225, 201, .08); white-space: nowrap; }
.empty-cell { text-align: center; color: var(--muted); padding: 34px; }
.admin-panel { margin-bottom: 20px; }
.security-note { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid rgba(246, 200, 102, .18); background: rgba(246, 200, 102, .055); border-radius: 13px; color: #d9c8a2; font-size: 13px; line-height: 1.55; }
.security-note strong { color: var(--gold); white-space: nowrap; }
.admin-grid { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(140px, .5fr) auto; align-items: end; gap: 14px; }
.transaction-preview { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 12px; }
.preview-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
.preview-row span { color: var(--muted); }
.confirm-line { display: flex; align-items: flex-start; gap: 10px; color: #e6d5ad; font-size: 13px; line-height: 1.5; }
.confirm-line input { width: 17px; margin-top: 2px; accent-color: var(--gold); }
footer { text-align: center; color: #617d72; font-size: 11px; padding: 9px 0; }

@media (max-width: 920px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid .button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .shell { width: min(100% - 22px, 1220px); padding-top: 25px; }
  .topbar, .section-heading { align-items: stretch; flex-direction: column; }
  .network-pill { align-self: flex-start; }
  .panel { padding: 19px; border-radius: 17px; }
  .input-row, .metric-grid, .admin-grid { grid-template-columns: 1fr; }
  .result-meta { grid-template-columns: 1fr; }
  .result-meta div { border-right: 0; border-bottom: 1px solid var(--line); }
  .result-meta div:last-child { border-bottom: 0; }
  .metric-card { min-height: 150px; }
  .data-list div { grid-template-columns: 1fr; gap: 5px; }
  .data-list dd { text-align: left; }
  .security-note { flex-direction: column; gap: 6px; }
}