:root{
  --bg:#0a0e14; --bg2:#0f141c; --panel:#131a24; --panel2:#182130;
  --line:#212c3d; --line2:#2c3a4f;
  --tx:#e6edf6; --tx2:#93a4bd; --tx3:#647b93;
  --up:#ff4d5e; --dn:#12c48b; --warn:#ffb020; --info:#3d8bff; --purple:#a06cff;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 显式 display 会覆盖 hidden 属性的 UA 样式，故强制生效 */
[hidden]{display:none!important}
body{
  background:var(--bg); color:var(--tx);
  font:400 14px/1.5 Inter,system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1680px;margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column;min-height:100vh}
.wrap{flex:0 0 auto}
.ft{margin-top:auto}

/* HEADER */
.hd{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 82%,transparent);
  z-index:50;flex-wrap:wrap;
}
.hd-l{display:flex;align-items:center;gap:16px}
.logo{
  font:700 22px/1 var(--mono);letter-spacing:-.5px;
  padding:11px 13px;border-radius:9px;
  background:linear-gradient(135deg,#1a2740,#101725);border:1px solid var(--line2);
  color:#fff;
}
.logo span{color:var(--info)}
.hd-title{font-weight:600;font-size:16.5px;letter-spacing:-.2px}
.hd-sub{font:400 12px/1.5 var(--mono);color:var(--tx2);margin-top:3px}
.hd-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;text-align:center;min-width:82px;
}
.stat b{display:block;font:700 18px/1.2 var(--mono)}
.stat span{font-size:11px;color:var(--tx2)}
.stat.a b{color:var(--dn)} .stat.r b{color:var(--warn)}
.btn{
  background:var(--info);color:#fff;border:0;border-radius:8px;
  padding:11px 18px;font:600 13px Inter,sans-serif;cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.5;cursor:default}

/* TABS */
.tabs{display:flex;gap:6px;padding:16px 0 0;flex-wrap:wrap}
.tab{
  background:transparent;border:1px solid var(--line);color:var(--tx2);
  padding:9px 16px;border-radius:8px;cursor:pointer;font:500 13px Inter,sans-serif;
  transition:.15s;display:flex;align-items:center;gap:7px;
}
.tab:hover{border-color:var(--line2);color:var(--tx)}
.tab.on{background:var(--panel2);border-color:var(--info);color:#fff}
.tab i{font-style:normal;font:700 11px var(--mono);background:var(--line);padding:2px 6px;border-radius:4px}
.tab.on i{background:var(--info);color:#fff}

/* INTRO */
.intro{
  margin:14px 0 0;padding:14px 16px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--info);
}
.intro h3{font-size:13.5px;font-weight:600;margin-bottom:6px}
.intro p{font-size:12.5px;color:var(--tx2);line-height:1.65}
.intro code{font:500 12px var(--mono);background:var(--bg2);padding:1px 5px;border-radius:4px;color:var(--info)}

/* CONTROLS */
.ctrl{display:flex;align-items:center;gap:12px;padding:16px 0 12px;flex-wrap:wrap}
#q{
  flex:1;min-width:220px;max-width:340px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;color:var(--tx);font-size:13px;outline:none;
}
#q:focus{border-color:var(--info)}
.fee-toggle{font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:6px;cursor:pointer}
.fees{
  display:flex;gap:14px;flex-wrap:wrap;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
}
.fees label{font-size:11.5px;color:var(--tx2);display:flex;flex-direction:column;gap:5px}
.fees input{
  width:88px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  padding:7px 9px;color:var(--tx);font:500 12px var(--mono);outline:none;
}
.fees input:focus{border-color:var(--info)}
.fees .fnote{font-size:11.5px;color:var(--tx2);align-self:flex-end;line-height:1.6;max-width:290px}

/* TABLE */
.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.tbl thead th{
  background:var(--bg2);color:var(--tx2);font:600 11.5px Inter,sans-serif;
  text-align:right;padding:11px 12px;border-bottom:1px solid var(--line2);
  position:sticky;top:0;cursor:pointer;user-select:none;
}
.tbl thead th:first-child,.tbl thead th.l{text-align:left}
.tbl thead th:hover{color:var(--tx)}
.tbl thead th.sorted{color:var(--info)}
.tbl tbody td{padding:11px 12px;text-align:right;border-bottom:1px solid #1a2231;font:500 12.5px var(--mono)}
.tbl tbody td.l{text-align:left;font-family:Inter,sans-serif}
.tbl tbody tr{cursor:pointer;transition:background .1s}
.tbl tbody tr:hover{background:var(--panel2)}
.nm{font:600 13px Inter,sans-serif;color:var(--tx)}
.cd{font:400 11px var(--mono);color:var(--tx2);margin-top:2px}
.sub{font:400 11px var(--mono);color:var(--tx2);margin-top:2px}
.up{color:var(--up)} .dn{color:var(--dn)} .flat{color:var(--tx2)}
.warn{color:var(--warn)} .info{color:var(--info)} .pp{color:var(--purple)}
.big{font-size:14px;font-weight:700}

/* BADGES */
.bg{
  display:inline-block;padding:3px 8px;border-radius:5px;
  font:600 11px Inter,sans-serif;white-space:nowrap;
}
.bg-strong{background:rgba(18,196,139,.16);color:var(--dn);border:1px solid rgba(18,196,139,.3)}
.bg-watch{background:rgba(255,176,32,.14);color:var(--warn);border:1px solid rgba(255,176,32,.3)}
.bg-danger{background:rgba(255,77,94,.15);color:var(--up);border:1px solid rgba(255,77,94,.32)}
.bg-info{background:rgba(61,139,255,.14);color:var(--info);border:1px solid rgba(61,139,255,.3)}
.bg-purple{background:rgba(160,108,255,.14);color:var(--purple);border:1px solid rgba(160,108,255,.3)}
.bg-mute{background:var(--line);color:var(--tx2)}
.rt{font:600 11px var(--mono);padding:2px 6px;border-radius:4px;background:var(--line);color:var(--tx2)}
.rt.hi{background:rgba(18,196,139,.14);color:var(--dn)}
.rt.lo{background:rgba(255,176,32,.14);color:var(--warn)}
.rt.jk{background:rgba(255,77,94,.16);color:var(--up)}

.empty{padding:56px 20px;text-align:center;color:var(--tx2);font-size:13.5px}

/* DRAWER */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;backdrop-filter:blur(2px)}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:100;
  background:var(--bg2);border-left:1px solid var(--line2);
  overflow-y:auto;padding:22px 24px 40px;
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
}
.dr-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dr-hd h2{font-size:19px;font-weight:700;letter-spacing:-.3px}
.dr-hd .cd{font-size:12px;margin-top:4px}
.x{background:var(--panel);border:1px solid var(--line);color:var(--tx2);width:32px;height:32px;border-radius:7px;cursor:pointer;font-size:16px;flex:none}
.x:hover{color:var(--tx);border-color:var(--line2)}
.dr-px{display:flex;gap:22px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dr-px div span{display:block;font-size:11px;color:var(--tx2);margin-bottom:4px}
.dr-px div b{font:700 19px var(--mono)}
.sec{padding:18px 0;border-bottom:1px solid var(--line)}
.sec h4{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kv{display:grid;grid-template-columns:1fr auto;gap:7px 16px;font-size:12.5px}
.kv dt{color:var(--tx2)}
.kv dd{font:500 12.5px var(--mono);text-align:right}
.rsn{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:11px}
.rsn li{
  font-size:12.5px;line-height:1.6;color:var(--tx2);
  padding:9px 12px;background:var(--panel);border-radius:7px;border-left:2px solid var(--line2);
}
.rsn li.k{border-left-color:var(--info);color:var(--tx)}
.rsn li.d{border-left-color:var(--up);color:#ffd9dd}
.rsn li.g{border-left-color:var(--dn);color:#c8f5e6}
.act{
  margin-top:13px;padding:13px 15px;border-radius:9px;font-size:13px;line-height:1.6;
  background:var(--panel2);border:1px solid var(--line2);
}
.act b{display:block;margin-bottom:5px;font-size:13.5px}
.steps{counter-reset:s;list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:11px}
.steps li{
  counter-increment:s;font-size:12.5px;line-height:1.6;color:var(--tx2);
  padding-left:31px;position:relative;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:21px;height:21px;border-radius:5px;background:var(--info);color:#fff;
  font:700 11px var(--mono);display:grid;place-items:center;
}
.clause{font-size:12px;line-height:1.7;color:var(--tx2);max-height:150px;overflow-y:auto;padding:11px 13px;background:var(--panel);border-radius:7px;margin-top:10px}

/* FOOTER */
.ft{padding:26px 0 0;color:var(--tx2);font-size:11.5px;line-height:1.7}
.ft .disclaimer{margin-top:8px;color:#6b7b93;max-width:940px}

@media(max-width:860px){
  .hd{gap:14px}
  .hd-r{width:100%;justify-content:space-between}
  #app{padding:0 13px 40px}
}