:root {
  /* Default: dark theme (original colors) */
  --bg:#0b1220; --bg-soft:#0d1526; --fg:#e5e7eb; --mut:#9aa4b2;
  --card:#0f172a; --card-2:#0e1628; --border:#1f2a44; --accent:#3b82f6;
  --ok:#22c55e; --err:#ef4444; --shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Light theme overrides (applied when body has .theme-light) */
body.theme-light {
  --bg:#f5f7fb;
  --bg-soft:#ffffff;
  --fg:#0f172a;
  --mut:#64748b;
  --card:#ffffff;
  --card-2:#ffffff;
  --border:#e5eaf1;
  --accent:#1d4ed8;
  --ok:#16a34a; --err:#ef4444;
  --shadow: 0 10px 24px rgba(15,23,42,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:radial-gradient(1200px 600px at 70% -300px, #0f1a34 0%, rgba(15,26,52,0) 60%), linear-gradient(180deg, var(--bg) 0%, #081020 100%); color:var(--fg); font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body.theme-light { background:linear-gradient(180deg, var(--bg) 0%, #eef2f9 100%); }

.wrap { max-width: 1680px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; position:sticky; top:0; background:rgba(9,14,28,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); z-index: 10; color:var(--fg); }
.topbar .right { display:flex; align-items:center; gap:8px; }
.brand { font-size:18px; font-weight:700; letter-spacing:.2px; }
.brand { display:flex; align-items:center; gap:8px; }
.brand .logo { width:28px; height:28px; object-fit:contain; border-radius:6px; }
.nav { display:flex; gap:8px; }
.nav-link { color: var(--fg); text-decoration:none; padding:6px 10px; border:1px solid transparent; border-radius:10px; background:transparent; font-size:13px; }
.nav-link:hover { background:#0e1a32; border-color:#243453; }
.nav-link.active { background:#0e1a32; border-color:#29446f; box-shadow: 0 0 0 1px rgba(41,68,111,.35) inset; }
/* External nav links: no active/border styling */
.nav .nav-link[target="_blank"],
.nav .nav-link[href^="http"],
.nav .nav-link[href^="../"] { border:none !important; background:transparent !important; box-shadow:none !important; }
.nav .nav-link[target="_blank"]:hover,
.nav .nav-link[href^="http"]:hover,
.nav .nav-link[href^="../"]:hover { background:transparent; }

/* Hero search band */
.hero { background: radial-gradient(1400px 700px at 65% -280px, #0e2248 0%, rgba(14,34,72,0) 60%), linear-gradient(180deg, #0b1730, #0a1326); border-bottom: 1px solid var(--border); }
.hero-wrap { padding: 28px 0 20px; }
.hero-title { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.hero .searchbar { background:linear-gradient(180deg, #0e1b36, #0c1830); padding:8px; border-radius:12px; border:1px solid #1f2a44; box-shadow: var(--shadow); }
.searchbar { display:flex; gap:8px; align-items:center; }
.select { appearance:none; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:130px; }
.input { flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background: var(--bg-soft); color:var(--fg); outline:none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.btn { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(180deg, #10223f, #0f1e38); color:var(--fg); cursor:pointer; box-shadow: var(--shadow); }
.btn:hover { background:linear-gradient(180deg, #102846, #10223f); border-color:#29446f; }
.btn.sm { padding:6px 10px; font-size:12px; }
.searchbar .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.searchbar .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.status { margin-top: 8px; color: var(--mut); font-size: 12px; }
.pill { display:inline-block; padding:2px 8px; border-radius:9999px; border:1px solid var(--border); background:#0f172a; }

/* Header actions */
.toggle { padding:6px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg-soft); color:var(--fg); cursor:pointer; }

/* Responsive nav */
@media (max-width: 980px) {
  .nav { display:none; position:absolute; right:16px; top:56px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px; flex-direction:column; gap:6px; }
  .nav.open { display:flex; }
  .nav-link { display:block; }
}

/* Layout panels */
.grid { display:grid; gap:14px; grid-template-columns: 1fr 1fr; margin: 14px 0; }
.grid-3 { display:grid; gap:12px; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
@media (max-width: 1200px) {
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
}
.section-overview { margin-bottom: 14px; }
.panel.mini { padding:10px; border-radius:10px; }
.panel.mini .mut { font-size:12px; }
.panel.mini .big { font-size:18px; }
/* Small glyphs and breadcrumbs */
.glyph { margin-right:6px; opacity:.85; color: var(--mut); }
.crumbs { font-size:12px; color:var(--mut); }
.crumbs a { color:#93c5fd; text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.panel { background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid rgba(45,68,116,.75); border-radius:12px; padding:12px; box-shadow: var(--shadow); }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 6px; }
.panel h3 { margin:0; font-size:14px; font-weight:700; letter-spacing:.2px; }

.kv { display:flex; align-items:baseline; gap:8px; margin:4px 0; }
.k { color:var(--mut); min-width:160px; }
.kv .k::after { content: ":"; margin-left:6px; opacity:.85; }
.mono { font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin-top: 5px; }
.mut { color:var(--mut); }
.hr { height:1px; background:var(--border); margin:8px 0; }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(45,68,116,.6); font-size:13px; }
.table th { color: var(--mut); font-weight:600; }
.table thead tr th { background: #0b152a; }
.table tr:hover td { background: #0c1a35; }

/* Compact table variant */
.table.compact th, .table.compact td { padding:10px 10px; font-size:12.5px; }

.panel-footer { display:none; }
.link-btn { display:none; }

/* Tags/badges */
.tag { font-size:11px; color:#c3dafe; background:#0b1936; border:1px solid #1e3a8a; padding:3px 8px; border-radius:999px; box-shadow: 0 0 0 1px rgba(30,58,138,.25) inset; }
.badge { font-size:11px; color:#a7f3d0; background:#053f33; border:1px solid #0b6b57; padding:3px 8px; border-radius:999px; box-shadow: 0 0 0 1px rgba(11,107,87,.25) inset; }

/* Detail boxes */
.result { border:1px solid var(--border); border-radius:10px; padding:12px; margin:10px 0; background:#0f172a; box-shadow: var(--shadow); }
.result h4 { margin:0 0 6px 0; font-size:14px; }

/* Tabs */
.tabs { display:flex; gap:8px; margin: 6px 0 10px; }
.tab { padding:6px 10px; border:1px solid rgba(45,68,116,.65); border-radius:10px; background:#0e1628; color:var(--fg); font-size:12px; cursor:pointer; }
.tab.active { border-color:#2b3e64; background:linear-gradient(180deg, #10223f, #0f1e38); box-shadow: 0 0 0 1px rgba(43,62,100,.35) inset; }
/* Light theme tab chips */
body.theme-light .tab { background:#e9efff; border-color:#c7d2fe; color:#1e3a8a; }
body.theme-light .tab.active { background:#2563eb; border-color:#1d4ed8; color:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.05) inset; }

/* Utilities */
a { color:#93c5fd; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Scrollbars */
.scroll { max-height: 520px; overflow:auto; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: #122038; border-radius: 6px; }
.scroll::-webkit-scrollbar-thumb:hover { background: #182a4a; }

/* Emphasis */
.big { font-size: 18px; font-weight: 700; }

/* Spacing below hero for first card */
#view { margin-top: 16px; }

/* Pager */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px; }
.pager .btn { padding:6px 10px; }
.pager .mut { font-size:12px; }

/* Icon badges + chips */
.icon-block, .icon-tx { display:inline-block; width:18px; height:18px; border-radius:6px; margin-right:8px; vertical-align:middle; }
.icon-block { background: linear-gradient(180deg, #13213f, #0f1b36); border:1px solid #243453; }
.icon-tx { background: linear-gradient(180deg, #0a2d1f, #072619); border:1px solid #0b6b57; }
.chip { display:inline-block; padding:0; border-radius:0; background:transparent; border:none; color: var(--mut); font-size:12px; }

/* Pill (status) */
/* Light-theme component overrides */
body.theme-light .topbar { background:rgba(255,255,255,.85); color:#0f172a; }
body.theme-light .nav-link:hover { background:#eef2f9; border-color:var(--border); }
body.theme-light .nav-link.active { background:#e9efff; border-color:#c7d2fe; box-shadow: 0 0 0 1px rgba(59,130,246,.25) inset; }
body.theme-light .hero { background: radial-gradient(1200px 600px at 55% -220px, #e3edff 0%, rgba(227,237,255,0) 70%), linear-gradient(180deg, #eaf1ff, #f4f7fe); }
body.theme-light .hero-title { color:#0f1b3d; }
body.theme-light .hero .searchbar { background:#ffffff; border:1px solid var(--border); }
body.theme-light .btn { border-color:#c7d2fe; background:linear-gradient(180deg, #2563eb, #1d4ed8); color:#fff; }
body.theme-light .btn:hover { background:linear-gradient(180deg, #1e40af, #1d4ed8); border-color:#93c5fd; }
body.theme-light .panel { border-color: var(--border); }
body.theme-light .table thead tr th { background:#f8fafc; }
body.theme-light .table tr:hover td { background:#f3f6fc; }
body.theme-light .result { background:#ffffff; }
body.theme-light .tag { color:#1e3a8a; background:#e0e7ff; border-color:#c7d2fe; box-shadow:none; }
body.theme-light .badge { color:#065f46; background:#d1fae5; border-color:#a7f3d0; box-shadow:none; }
body.theme-light a { color:#1d4ed8; }
body.theme-light a:hover { color:#1e40af; }
body.theme-light .scroll::-webkit-scrollbar-thumb { background:#cbd5e1; }
body.theme-light .scroll::-webkit-scrollbar-thumb:hover { background:#b6c2d6; }
body.theme-light .pill { background:#f1f5f9; color:#0f172a; }
body.theme-light .icon-block { background: linear-gradient(180deg, #eef2ff, #dbeafe); border-color:#c7d2fe; }
body.theme-light .icon-tx { background: linear-gradient(180deg, #f0fdf4, #dcfce7); border-color:#bbf7d0; }
body.theme-light .chip { background:transparent; color: var(--mut); border:none; }

/* Raw JSON textarea styling */
.rawarea { width:100%; height:420px; background:#0b152a; color:var(--fg); border:1px solid var(--border); border-radius:8px; font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding:10px; }
body.theme-light .rawarea { background:#ffffff; color:#0f172a; }