/* ============================================================
   Web3 热度榜 · Heat Radar
   ============================================================ */
:root{
  --bg:#070a12;
  --bg-soft:#0b1019;
  --panel:#0d131e;
  --panel2:#121a27;
  --line:#1d2838;
  --line-soft:#16202e;
  --text:#e8eef7;
  --muted:#8a99b0;
  --faint:#5f6d82;
  --accent:#4d9fff;
  --accent-soft:rgba(77,159,255,.14);
  --heat:#ff9f43;
  --heat-soft:rgba(255,159,67,.13);
  --up:#35d07f;
  --down:#ff5f6d;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --radius:14px;
  --header-h:62px;
}
[data-theme="light"]{
  --bg:#f4f7fb;
  --bg-soft:#eef2f8;
  --panel:#ffffff;
  --panel2:#f5f8fc;
  --line:#dde5ef;
  --line-soft:#e8eef6;
  --text:#0f172a;
  --muted:#5d6b80;
  --faint:#8a97a8;
  --accent:#0b6bdc;
  --accent-soft:rgba(11,107,220,.10);
  --heat:#c2620a;
  --heat-soft:rgba(194,98,10,.10);
  --up:#0f8a4a;
  --down:#d32431;
  --shadow:0 18px 40px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(77,159,255,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(255,159,67,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font:14px/1.55 "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .2s,color .2s;
}
body.lock{overflow:hidden}
::selection{background:var(--accent-soft)}

/* ---------- 顶栏 ---------- */
header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  height:var(--header-h);padding:0 26px;
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo{
  width:34px;height:34px;display:grid;place-items:center;
  font-size:17px;border-radius:10px;
  background:linear-gradient(140deg,var(--heat-soft),var(--accent-soft));
  border:1px solid var(--line);
}
.brand-text{
  display:flex;flex-direction:column;line-height:1.1;
  font-size:15px;font-weight:700;letter-spacing:.2px;
}
.brand-text small{
  font-size:9.5px;font-weight:600;letter-spacing:2.2px;color:var(--faint);
  margin-top:3px;
}
.stats{color:var(--muted);font-size:12.5px;letter-spacing:.2px}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:12px;text-decoration:none;
  transition:.15s;
}
.social svg{width:14px;height:14px;fill:currentColor;flex:none}
.social a.tg svg{fill:#29a9eb}
.social a:hover{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.head-right{margin-left:auto;display:flex;gap:10px;align-items:center}

.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:0 12px;height:36px;
  transition:.15s;
}
.search-box svg{width:15px;height:15px;fill:var(--faint);flex:none}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#search{
  background:transparent;border:0;color:var(--text);
  width:210px;height:100%;outline:none;font-size:13px;
}
#search::placeholder{color:var(--faint)}

.theme-btn{
  display:flex;align-items:center;gap:6px;height:36px;
  background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:0 13px;cursor:pointer;font-size:12.5px;
  transition:.15s;
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 周期标签 ---------- */
nav{
  position:sticky;top:var(--header-h);z-index:29;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:12px 26px;
  background:var(--bg-soft);
  background:color-mix(in srgb,var(--bg-soft) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav::-webkit-scrollbar{display:none}
nav a{
  flex:none;color:var(--muted);text-decoration:none;
  font-size:13px;padding:7px 14px;border-radius:9px;
  border:1px solid transparent;white-space:nowrap;transition:.15s;
}
nav a:hover{color:var(--text);background:var(--panel2)}
nav a.on{
  color:var(--text);background:var(--panel);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ---------- 主体 ---------- */
main{max-width:1500px;margin:0 auto;padding:26px 26px 90px}
.board-head{display:flex;align-items:baseline;gap:16px;margin:0 0 14px;flex-wrap:wrap}
.board-head h1{
  font-size:22px;margin:0;font-weight:700;letter-spacing:.2px;
  display:flex;align-items:center;gap:10px;
}
.board-head h1::before{
  content:"";width:4px;height:20px;border-radius:3px;
  background:linear-gradient(180deg,var(--heat),var(--accent));
}
.muted{color:var(--muted)}
.board-head .muted{font-size:12.5px}

/* ---------- 表格 ---------- */
.table-wrap{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;background:var(--panel);
  box-shadow:var(--shadow);
  max-height:calc(100vh - 190px);
}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px}
thead th{
  position:sticky;top:0;z-index:3;
  background:var(--panel2);
  background:color-mix(in srgb,var(--panel2) 94%,transparent);
  backdrop-filter:blur(8px);
  color:var(--faint);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:11px 12px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--text)}
tbody td{
  padding:11px 12px;border-bottom:1px solid var(--line-soft);
  font-size:13px;white-space:nowrap;
  transition:background .12s;
}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--panel2)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tbody tr:last-child td{border-bottom:0}

.r{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.rank{
  color:var(--faint);width:52px;
  font-variant-numeric:tabular-nums;font-size:12px;
}
tbody tr:nth-child(-n+3) .rank{color:var(--heat);font-weight:700}
.summary{
  max-width:360px;overflow:hidden;text-overflow:ellipsis;
  color:var(--muted);font-size:12.5px;
}
.strong{font-weight:600}
.heat{
  color:var(--heat);font-weight:700;
  background:var(--heat-soft);border-radius:7px;
  padding:2px 8px;display:inline-block;min-width:46px;
}
.up{color:var(--up);font-weight:600}
.down{color:var(--down);font-weight:600}
.delta{color:var(--accent);font-weight:600}
.spark-cell svg{display:block;margin:0 auto}
.pj{font-weight:600;letter-spacing:.1px}
.tk{color:var(--faint);font-size:11.5px;letter-spacing:.3px}
.empty{color:var(--muted);padding:48px;text-align:center;font-size:13px}

/* ---------- 抽屉 ---------- */
.drawer{
  position:fixed;top:0;right:0;height:100%;width:720px;max-width:96vw;
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  backdrop-filter:blur(16px);
  border-left:1px solid var(--line);
  z-index:40;overflow-y:auto;padding:0 26px 70px;
  box-shadow:-30px 0 80px rgba(0,0,0,.45);
  animation:slideIn .22s ease-out;
}
@keyframes slideIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{
  position:sticky;top:0;z-index:2;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:22px 0 14px;margin-bottom:4px;
  background:linear-gradient(var(--panel) 70%,transparent);
  border-bottom:1px solid var(--line-soft);
}
.drawer h2{margin:0 0 4px;font-size:21px;font-weight:700;letter-spacing:.2px}
.drawer h3{
  font-size:11.5px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase;
  margin:26px 0 10px;font-weight:600;
}
#d-close{
  flex:none;background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:13px;
  transition:.15s;
}
#d-close:hover{color:var(--text);border-color:var(--accent)}
.scrim{position:fixed;inset:0;background:rgba(3,7,14,.55);backdrop-filter:blur(2px);z-index:35}

.summary-box{
  background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--heat);border-radius:10px;
  padding:14px 16px;margin:14px 0 18px;line-height:1.75;font-size:13.5px;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;transition:.15s;
}
.card:hover{border-color:var(--accent)}
.card-h{color:var(--faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.card-big{
  font-size:24px;font-weight:800;margin:4px 0 2px;letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--heat),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.card-sub{color:var(--muted);font-size:11.5px;line-height:1.5}

.linechart{
  width:100%;height:200px;display:block;background:var(--panel2);
  border:1px solid var(--line);border-radius:11px;
}
.linechart .grid{stroke:var(--line);stroke-width:1}
.linechart .axis{fill:var(--faint);font-size:9px}
.linechart .line-h{fill:none;stroke:var(--heat);stroke-width:2.2;stroke-linejoin:round}
.linechart .line-k{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 3}
.linechart .dot-h{fill:var(--heat)}
.legend{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-top:8px}
.lg-h::before,.lg-k::before{
  content:"";display:inline-block;width:14px;height:3px;margin-right:6px;
  vertical-align:middle;border-radius:2px;
}
.lg-h::before{background:var(--heat)}
.lg-k::before{background:var(--accent)}

.mini{min-width:0}
.mini thead th{position:static;background:transparent;border-bottom:1px solid var(--line)}
.mini td{padding:8px 10px;font-size:12.5px}

.tweets{list-style:none;margin:0;padding:0}
.tweets li{
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:9px;
  background:var(--panel2);transition:.15s;
}
.tweets li:hover{border-color:var(--accent)}
.tw-head{display:flex;gap:10px;font-size:12px;margin-bottom:5px;flex-wrap:wrap;align-items:center}
.tw-body{color:var(--text);white-space:pre-wrap;word-break:break-word;font-size:13px;opacity:.92;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:11.5px;color:var(--muted);
}

/* 可点击的原推 / 账号链接 */
.tw-link{
  display:block;color:inherit;text-decoration:none;border-radius:8px;
  padding:0;margin:0;transition:background .15s;
}
.tw-link:hover .tw-body{text-decoration:underline;text-underline-offset:3px}
.tw-go{margin-left:auto;font-size:11.5px;color:var(--accent);opacity:.85;white-space:nowrap}
.kol-link{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.kol-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 滚动条 ---------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--panel)}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .summary{max-width:220px}
  main{padding:20px 16px 80px}
  header{padding:0 16px;height:auto;gap:12px}
  nav{top:0;position:static;padding:10px 16px}
}
@media (max-width:820px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .drawer{width:100%;max-width:100%;padding:0 18px 60px}
  .stats{display:none}
  .social{display:none}
  #search{width:150px}
  .board-head h1{font-size:19px}
}