:root {
  --ink: #0e1222;
  --panel: #161b30;
  --line: #2a3150;
  --text: #eef0f8;
  --muted: #a3abc8;
  --up: #5fe3a1;
  --down: #ff6b6b;
  --hot: #ffb000;
  --radius: 10px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 17px;
  color: var(--text);
  background: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.5; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; font-stretch: 125%; font-size: 1.35rem; letter-spacing: -0.01em; }
.brand { min-height: 44px; }
.brand img { border-radius: 8px; }
#dev-link { display: inline-block; padding: 3px 0; }
.token { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticker { font-weight: 800; font-stretch: 110%; }
.risk { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.8rem; }
#ca-full, #dev-link { word-break: break-all; color: var(--text); user-select: all; }
.soon { color: var(--muted); font-size: 0.9rem; }
.ca, .buy, .xlink { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.ca { background: var(--panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ca #ca-copied { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.buy { background: var(--hot); color: #1a1100; }
.xlink { border: 1px solid var(--line); min-width: 44px; justify-content: center; }

main { padding: 0 clamp(16px, 4vw, 48px); max-width: 1240px; margin: 0 auto; }

/* intro */
.intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; padding: clamp(28px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); }
.intro h1 { margin: 0; font-size: clamp(2.1rem, 5.2vw, 4.1rem); line-height: 1.02; font-weight: 850; font-stretch: 72%; letter-spacing: -0.015em; text-wrap: balance; }
.hottest { display: grid; gap: 4px; padding-bottom: 6px; }
.hot-label { color: var(--muted); font-size: 0.95rem; }
.hot-name { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1; font-weight: 900; font-stretch: 125%; }
.hot-name.quiet { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.heat-ratio.thin { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.heat-row.is-thin .heat-bar span { background: #3a4266; }
.coin-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.hot-stars { font-size: 1.9rem; line-height: 1.1; }
.stars { letter-spacing: 0.08em; white-space: nowrap; }
.stars .off { color: #59618a; }
.heat-ratio .stars { font-size: 1.15rem; }
.hot-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.share { margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.share:hover { border-color: var(--hot); }

/* panels */
.panel { margin-bottom: 28px; padding: clamp(16px, 2.5vw, 28px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h2 { margin: 0; font-size: 1.5rem; font-weight: 800; font-stretch: 110%; }
.explain { margin: 6px 0 18px; color: var(--muted); max-width: 68ch; font-size: 0.95rem; }
.status { margin: 14px 0 0; color: var(--muted); font-size: 0.85rem; }

.chains { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chains button { min-height: 44px; padding: 0 16px; background: transparent; border: 0; color: var(--muted); font-weight: 600; }
.chains button[aria-pressed="true"] { background: var(--line); color: var(--text); }
.clear { min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }

/* heat rows: the signature element */
.heat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.heat-row { width: 100%; display: grid; grid-template-columns: 11rem minmax(0, 1fr) 7.5rem 9rem 9rem; align-items: center; gap: 16px; padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); text-align: left; }
.heat-row:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.heat-row.is-on { border-color: var(--hot); background: rgba(255, 176, 0, 0.06); }
.heat-name { font-weight: 750; font-size: 1.05rem; }
.heat-bar { height: 22px; background: rgba(255, 255, 255, 0.04); border-radius: 5px; overflow: hidden; }
.heat-bar span { display: block; height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.heat-vol, .heat-ratio, .heat-top { display: grid; font-weight: 750; line-height: 1.2; }
.heat-top { font-weight: 650; }
.heat small { color: var(--muted); font-weight: 450; font-size: 0.78rem; }

/* tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
caption { text-align: left; color: var(--muted); padding: 8px 0; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.85rem; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid rgba(42, 49, 80, 0.6); white-space: nowrap; }
tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.coin a { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.coin img, .noimg { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--line); object-fit: cover; }
.coin span { display: grid; line-height: 1.2; }
.coin small { color: var(--muted); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.up { color: var(--up); }
.down { color: var(--down); }
.chain { color: var(--muted); text-transform: capitalize; }
.gta { border-color: #4a3a1a; }

footer { max-width: 1240px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 48px; color: var(--muted); font-size: 0.85rem; }
footer p { max-width: 80ch; }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; align-items: start; }
  .heat-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ratio" "bar bar" "vol top"; gap: 6px 12px; }
  .heat-name { grid-area: name; }
  .heat-bar { grid-area: bar; height: 16px; }
  .heat-vol { grid-area: vol; text-align: left; }
  .heat-ratio { grid-area: ratio; }
  .heat-top { grid-area: top; text-align: right; }
  .hide-s { display: none; }
}
@media (prefers-reduced-motion: reduce) { .heat-bar span { transition: none; } }