:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#111b28;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --border:rgba(255,255,255,.08);
  --chip:rgba(255,255,255,.04);
  --blue:#2e7bff;
  --orange:#f0a61a;

  --crosshair: rgba(255,255,255,.22);
  --crosshairW: 2;
}

:root[data-theme="light"]{
  --bg:#f3f5f8;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:rgba(14,18,24,.92);
  --muted:rgba(14,18,24,.60);
  --border:rgba(14,18,24,.10);
  --chip:rgba(14,18,24,.05);

  --crosshair: rgba(14,18,24,.18);
  --crosshairW: 2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 500px at 30% 0%, rgba(46,123,255,.10), transparent 60%),
              radial-gradient(900px 450px at 90% 10%, rgba(240,166,26,.08), transparent 55%),
              var(--bg);
  color:var(--text);
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

a{color:inherit;text-decoration:none}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.wrap{max-width:1200px;margin:0 auto;padding:14px}
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.topbar__in{max-width:1200px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:18px;height:18px;object-fit:contain;border-radius:6px}
.brand .t{display:flex;flex-direction:column;min-width:0}
.brand .t strong{font-size:13px;letter-spacing:.2px}
.brand .t span{font-size:12px;color:var(--muted);margin-top:1px}

.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--text);
  opacity:.86;
  cursor:pointer;
  user-select:none;
}
.chip:hover{opacity:1}
.chip svg{width:14px;height:14px;opacity:.70}
.badge{
  margin-left:6px;
  padding:2px 6px;border-radius:999px;
  background:rgba(127,127,127,.16);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

.surface{
  background:color-mix(in oklab, var(--panel) 96%, transparent);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-top:12px;
}
.surface__head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.surface__head h1{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.hint{color:var(--muted);font-size:12px}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left}
tr.row{cursor:pointer}
tr.row:hover{background:rgba(127,127,127,.06)}

.coincell{display:flex;align-items:center;gap:10px}
.coinico img{width:16px;height:16px;object-fit:contain;display:block}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 14px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:color-mix(in oklab, var(--panel2) 96%, transparent);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card .ttl{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;letter-spacing:.10em;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:10px 12px}
.k{color:var(--muted);font-size:12px}
.v{font-weight:650}

.wallet{
  padding:0 14px 12px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
.wallet label{color:var(--muted);font-size:12px}
.wallet input{
  flex:1;min-width:260px;
  background:transparent;border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;border-radius:10px;
}
.btn{
  padding:8px 12px;border-radius:10px;
  border:1px solid color-mix(in oklab, var(--blue) 60%, var(--border));
  background:color-mix(in oklab, var(--blue) 22%, transparent);
  color:var(--text);cursor:pointer
}
.btn:hover{background:color-mix(in oklab, var(--blue) 30%, transparent)}

.exp{margin:0 14px 14px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.exp__h{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.exp__h span{font-weight:700}
.exp[aria-expanded="false"] .exp__b{display:none}
.chart{position:relative;height:250px;background:rgba(127,127,127,.03);border-top:1px solid var(--border)}
.chart canvas{width:100%;height:100%;display:block}
.tip{
  position:absolute;display:none;
  min-width:180px;
  background:color-mix(in oklab, var(--panel) 96%, transparent);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.xlbl{
  position:absolute;display:none;
  bottom:6px;transform:translateX(-50%);
  font-size:11px;color:var(--muted);
  background:color-mix(in oklab, var(--panel) 96%, transparent);
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
}

.tabs{display:flex;gap:8px;justify-content:center;padding:10px 14px}
.tab{
  padding:7px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--chip);opacity:.78;cursor:pointer;font-size:12px;letter-spacing:.08em
}
.tab:hover{opacity:1}
.tab.is{opacity:1;background:rgba(127,127,127,.08)}
.footer{padding:14px;text-align:center;color:var(--muted);font-size:12px}
.up{color:#26d07c}.down{color:#ff5c5c}