/* Elytrack: dark theme, hairline rules, flat tables. */
:root {
  --bg: #050505;
  --bg-1: #0a0a0a;
  --bg-2: #101010;
  --bg-3: #161616;
  --bg-4: #1e1e1e;
  --line: #1f1f1f;
  --line-2: #2c2c2c;
  --fg: #f2f2f2;
  --fg-1: #a3a3a3;
  --fg-2: #6b6b6b;
  --fg-3: #444;
  --table: #8b8f94;
  --up: #3ddc84;
  --down: #ff5470;
  --gold: #e9b64a;
  --info: #7aa7ff;
  --violet: #b18cff;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: 28px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.5 var(--sans); letter-spacing: -0.005em; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: #fff; }
button, input, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--fg-2); }
.hidden { display: none !important; }
::selection { background: #ffffff26; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(5, 5, 5, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px var(--pad); }
.brand { color: var(--fg); display: flex; align-items: center; gap: 10px; font: 400 26px/1 var(--serif); letter-spacing: -0.01em; }
.brand-mark { width: 18px; height: 18px; position: relative; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 7px 0; background: var(--fg); border-radius: 1px; }
.brand-mark::before { transform: rotate(45deg); }
.brand-mark::after { transform: rotate(-45deg); }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-1); font-size: 12.5px; white-space: nowrap; cursor: default; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.status.stale .dot { background: var(--down); }
.status.stale { color: var(--down); }
.search { flex: 1; max-width: 440px; margin-left: auto; position: relative; }
.results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 15; background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--radius); max-height: 360px; overflow-y: auto; }
.result { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.result .name { font-weight: 500; }
.result.on, .result:hover { background: var(--bg-4); }
.search input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: var(--bg-2); font-family: var(--mono); font-size: 12px; outline: none; color: var(--fg);
}
.search input:focus { border-color: var(--fg-2); }
.icon-btn { border: 0; background: var(--bg-3); border-radius: var(--radius); padding: 10px 18px; cursor: pointer; color: var(--fg); font-size: 14px; }
.icon-btn:hover { background: var(--bg-4); }
.icon-btn.ghost { background: transparent; color: var(--fg-2); padding: 10px 6px; }
.icon-btn.ghost:hover { color: var(--fg); }
#wallet-btn { white-space: nowrap; }
#wallet-btn.connected { font-family: var(--mono); font-size: 12.5px; color: var(--up); }
.small { font-size: 12px; }

.tabs { display: flex; gap: 22px; padding: 0 var(--pad); }
.tab { display: inline-block; padding: 10px 0 12px; color: var(--fg-2); cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--fg-1); }
.tab.on { color: var(--fg); border-bottom-color: var(--fg); }
.tab .count { font-size: 11px; color: var(--up); margin-left: 5px; }

main { padding: 28px var(--pad) 80px; max-width: 1440px; margin: 0 auto; }
.section-title { font: 400 28px/1.1 var(--serif); letter-spacing: -0.01em; margin: 0 0 6px; }
.head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lede { color: var(--fg-1); font-size: 13.5px; margin: 0 0 16px; max-width: 780px; }
.how { margin-top: 6px; color: var(--fg-2); font-size: 12.5px; line-height: 1.6; }
.how summary { cursor: pointer; color: var(--fg-1); width: max-content; border-bottom: 1px dotted var(--fg-3); list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how[open] summary { margin-bottom: 4px; }
.seg { display: inline-flex; }
.seg .chip { border-radius: 0; margin-left: -1px; }
.seg .chip:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.seg .chip:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.bar select { padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); outline: none; }

/* ---- toolbar ---- */
.bar { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-1);
  padding: 6px 11px; border-radius: var(--radius); cursor: pointer; font-size: 12.5px;
}
.chip:hover { color: var(--fg); border-color: var(--fg-3); }
.chip.on { color: var(--bg); background: #e8e9ec; border-color: #e8e9ec; }
.bar .spacer { flex: 1; }
.bar input[type=text] { padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); outline: none; }

/* ---- feed ---- */
.feed { border-top: 1px solid var(--line); }
.frow { display: grid; grid-template-columns: 44px 128px minmax(130px, 1fr) minmax(200px, 1.6fr) 110px 132px;
  grid-template-areas: "time tag token who size act" "more more more more more more";
  gap: 0 14px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.frow:hover { background: var(--bg-1); }
.frow.new { background: var(--bg-1); }
.f-time { grid-area: time; font-size: 12px; }
.f-tag { grid-area: tag; }
.f-token { grid-area: token; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-who { grid-area: who; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; font-size: 12.5px; }
.f-size { grid-area: size; text-align: right; font-variant-numeric: tabular-nums; }
.f-act { grid-area: act; display: flex; gap: 6px; justify-content: flex-end; }
.f-more { grid-area: more; margin-top: 10px; padding: 10px 12px; background: var(--bg-2); color: var(--table); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; cursor: default; }
.f-more .links { margin: 8px 0 0; display: flex; gap: 14px; flex-wrap: wrap; }
.f-more .links a { color: var(--fg-1); border-bottom: 1px solid var(--line-2); }
.chip.more { padding: 4px 9px; font-size: 12px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 12px; border: 1px solid var(--line-2); color: var(--fg-1); white-space: nowrap; }
.tag.s-buy { color: var(--up); border-color: #3ddc8455; }
.tag.s-sell { color: var(--down); border-color: #ff547055; }
.tag.s-launch { color: var(--violet); border-color: #b18cff55; }
.tag.s-cluster { color: var(--gold); border-color: #e9b64a55; }
.frow.s-bot { opacity: .7; }
tr.bot-row td { opacity: .5; }
.bar.toggle { margin-top: 12px; }
.card .title { font-size: 14px; font-weight: 500; }
.card .time { color: var(--fg-2); font-size: 12px; white-space: nowrap; }
.card .body { grid-column: 1 / -1; white-space: pre-wrap; color: var(--table); font-size: 12.5px; word-break: break-word; }
.addr { color: var(--fg-1); cursor: pointer; font-family: var(--mono); font-size: 12px; border-bottom: 1px dotted var(--fg-3); }
.addr:hover { color: var(--fg); border-bottom-color: var(--fg-1); }
td.empty { white-space: normal; }
.empty { padding: 48px; text-align: center; color: var(--fg-2); border-bottom: 1px solid var(--line); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--table); font-weight: 400; font-size: 13px; position: sticky; top: 0; background: var(--bg); }
td { color: var(--fg); }
tbody tr { cursor: pointer; transition: background .15s var(--ease); }
tbody tr:hover { background: var(--bg-1); }
td.num, th.num { text-align: right; }
td.num { font-variant-numeric: tabular-nums; }
td.reasons { color: var(--table); font-size: 12.5px; }
td .muted, td.muted { color: var(--table); }

.tok { display: flex; align-items: center; gap: 12px; }
.tok .name { font-size: 14px; font-weight: 500; }
.tok .sym { color: var(--table); margin-left: 6px; font-size: 12px; }
.tok .meta { color: var(--table); font-size: 12px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius); font-size: 11.5px; border: 1px solid var(--line-2); color: var(--fg-1); margin-right: 4px; }
.badge.r-insider { color: var(--down); border-color: #ff547055; }
.badge.r-dev-linked { color: var(--gold); border-color: #e9b64a55; }
.badge.r-sniper-bot { color: var(--fg-2); }
.badge.r-early { color: var(--fg-2); }
.badge.r-scam { color: var(--down); border-color: #ff547088; background: #ff547014; }
.badge.r-smart { color: var(--up); border-color: #3ddc8455; }
.badge.pad { color: var(--fg-1); background: var(--bg-3); border-color: transparent; }
.badge.k-devbundle, .badge.k-offmarket { color: var(--down); border-color: #ff547055; }
.badge.k-insta, .badge.k-bundle { color: var(--gold); border-color: #e9b64a40; }
.badge.k-dev { color: var(--info); }

.score { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.score-bar { width: 56px; height: 3px; background: var(--line-2); overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--up); }
.score-bar.pct-mid i { background: var(--gold); }
.score-bar.pct-hi i { background: var(--down); }
.score-bar.pct-mid, .score-bar.pct-hi { color: inherit; }
.pct-hi { color: var(--down); }
.pct-mid { color: var(--gold); }
.pos { color: var(--up); }
.neg { color: var(--down); }
tr.best td { background: #3ddc840d; }
.note { max-width: 860px; font-size: 14px; color: var(--fg-1); margin: 0 0 20px; line-height: 1.6; }
h3.section { font: 400 22px/1.2 var(--serif); margin: 36px 0 12px; }
.bar label { display: flex; align-items: center; gap: 6px; color: var(--fg-1); font-size: 12.5px; margin-right: 6px; }
.bar input[type=number], .bar select {
  width: 78px; padding: 7px 8px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); outline: none;
}
.bar select { width: auto; }

/* ---- drawer ---- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 100vw); z-index: 21;
  background: var(--bg-1); border-left: 1px solid var(--line-2); overflow-y: auto; padding: 24px 26px 48px;
}
.drawer h2 { margin: 0 0 6px; font: 400 34px/1.1 var(--serif); letter-spacing: -0.015em; }
.drawer .sub { color: var(--fg-2); font-family: var(--mono); font-size: 12px; word-break: break-all; }
.drawer .links { display: flex; gap: 16px; margin: 12px 0 20px; flex-wrap: wrap; font-size: 13px; }
.drawer .links a { color: var(--fg-1); border-bottom: 1px solid var(--line-2); }
.drawer h3 { font: 400 20px/1.2 var(--serif); margin: 28px 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 18px; }
.kpi { border-top: 1px solid var(--line-2); padding: 10px 0 12px; }
.kpi .v { font: 400 26px/1.15 var(--serif); }
.kpi .l { color: var(--fg-2); font-size: 12px; }
.close { float: right; padding: 8px 12px; }
.btn { border: 0; border-radius: var(--radius); padding: 11px 22px; background: #e8e9ec; color: var(--bg); font-size: 14px; cursor: pointer; }
.btn:hover { background: #fff; }
.btn:disabled { opacity: .5; cursor: wait; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: var(--radius); z-index: 30; }

/* ---- wallets ---- */
.who-cell { display: flex; align-items: center; gap: 8px; }
td.reasons { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- smart tokens ---- */
.btn.sm { padding: 5px 14px; font-size: 12.5px; }
td .btn.sm { margin: -4px 0; }

/* ---- buy panel ---- */
.buy { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px; margin: 18px 0 6px; background: var(--bg-2); }
.buy-head { display: flex; align-items: baseline; gap: 10px; }
.buy h3 { margin: 0 !important; }
.buy .amount { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); }
.buy .amount input { border: 0 !important; background: transparent !important; width: 96px !important; }
.buy .amount span { color: var(--fg-2); padding-right: 10px; font-size: 12.5px; }
.buy .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.buy input[type=text] { width: 120px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg); outline: none; font-family: var(--mono); }
.buy select { padding: 8px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg); }
.buy dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 12px 0; font-size: 13px; }
.buy dt { color: var(--fg-2); }
.buy dd { margin: 0; font-variant-numeric: tabular-nums; }
.buy .msg { font-size: 12.5px; color: var(--fg-1); margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.buy .warn { border-left: 2px solid var(--gold); padding: 6px 10px; color: var(--gold); font-size: 12.5px; margin: 8px 0; }
.buy .err { color: var(--down); }
.buy label.ack { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg-1); margin: 8px 0; }

/* ---- public pages (launchpads, news) ---- */
.seo-nav { display: flex; gap: 20px; margin-left: auto; }
.seo-nav a { color: var(--fg-2); font-size: 14px; }
.seo-nav a:hover, .seo-nav a[aria-current="page"] { color: var(--fg); }
.seo main { max-width: 1180px; }
.seo-facts { margin: 8px 0 6px; }
.small-title { font-size: 22px; margin-top: 34px; }
.seo td a { border-bottom: 1px solid var(--line-2); }
.news { display: grid; max-width: 780px; }
.news-item { border-top: 1px solid var(--line); padding: 16px 0; }
.news-item.digest { border-left: 2px solid var(--fg-3); padding-left: 14px; }
.news-item h2 { font: 500 16px/1.4 var(--sans); margin: 4px 0; }
.news-item p { margin: 4px 0; color: var(--fg-1); }
.news-item .links { display: flex; gap: 16px; font-size: 13px; }
.news-item .links a { color: var(--fg-1); border-bottom: 1px solid var(--line-2); }
.code { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px;
  font: 12.5px/1.5 var(--mono); overflow-x: auto; max-width: 780px; color: var(--fg); }
.seo code { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.seo td { white-space: normal; vertical-align: top; }
.steps { padding-left: 20px; }
.steps li { margin: 4px 0; }
.foot { border-top: 1px solid var(--line); padding: 20px var(--pad) 40px; color: var(--fg-2); font-size: 12.5px; }
.foot p { max-width: 780px; margin: 0; }

/* ---- live prices: a short tint when a number moves ---- */
[data-live] { transition: background-color .9s ease; border-radius: 2px; }
.flash-up { background-color: #3ddc8433; transition: none; }
.flash-down { background-color: #ff547033; transition: none; }

/* ---- watchlist ---- */
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 70px; }
.head-actions { display: flex; gap: 6px; flex: none; margin-top: 6px; }
.chip.watch.on { color: var(--gold); border-color: #e9b64a88; background: transparent; }
.frow.watched { box-shadow: inset 2px 0 0 var(--gold); }
#feed.watched-only .frow:not(.watched) { display: none; }

/* ---- token drawer ---- */
.facts-line { display: flex; gap: 14px; flex-wrap: wrap; color: var(--fg-1); margin: 6px 0 4px; font-size: 13px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 18px; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; border-top: 1px solid var(--line-2); padding: 8px 0; font-size: 13px; }
.fact .muted:last-child { grid-column: 1 / -1; font-size: 12px; }

.market { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 14px 0; margin: 4px 0 6px; }
.market-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.market .big { font: 400 32px/1.1 var(--serif); }
.chg { font-size: 13px; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 96px; margin: 10px 0 6px; }
.spark polyline { fill: none; stroke: var(--up); stroke-width: 1.5; }
.spark.down polyline { stroke: var(--down); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 6px; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  :root { --pad: 16px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .status { margin-left: auto; }
  #status-text { display: none; }
  .tabs { gap: 16px; overflow-x: auto; }
  .hide-sm { display: none; }
}

/* Phones: each row of a .cards-sm table becomes a card. */
@media (max-width: 640px) {
  table.cards-sm thead { display: none; }
  table.cards-sm tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.cards-sm td { border: 0; padding: 0; text-align: left; white-space: normal; }
  table.cards-sm td[data-label]::before { content: attr(data-label); display: block; color: var(--fg-2); font-size: 11.5px; }
  table.cards-sm td[data-label="Token"], table.cards-sm td[data-label="Wallet"] { grid-column: 1 / -1; }
  table.cards-sm td[data-label="Token"]::before, table.cards-sm td[data-label="Wallet"]::before { content: none; }
  table.cards-sm .score { justify-content: flex-start; }
  table.cards-sm td.nil { display: none; }
  table.cards-sm td.action { grid-column: 1 / -1; }
  table.cards-sm td.action .btn { width: 100%; padding: 9px; }
  table.cards-sm td.empty { grid-column: 1 / -1; }
  .frow { grid-template-columns: auto 1fr auto; grid-template-areas: "tag tag time" "token token size" "who who who" "act act act" "more more more"; gap: 6px 10px; }
  .f-time { text-align: right; }
  .f-act { justify-content: stretch; }
  .f-act .btn { flex: 1; }
}