:root {
  --crypto-bg: var(--bg, #f7f7f8);
  --crypto-panel: var(--panel, #fff);
  --crypto-muted-panel: var(--panel-muted, #f3f3f4);
  --crypto-line: var(--line, #e0e0e3);
  --crypto-ink: var(--ink, #111114);
  --crypto-soft: var(--ink-soft, #68686f);
  --crypto-muted: var(--muted, #96969d);
  --crypto-footprint: 6.45rem;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--crypto-bg); }
body.crypto-page {
  min-height: 100vh;
  margin: 0;
  padding: 0 0 var(--crypto-footprint);
  color: var(--crypto-ink);
  background: var(--crypto-bg);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.crypto-topbar, .crypto-shell { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.crypto-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 1.1rem 0 0.9rem; }
.crypto-theme-toggle { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--crypto-line); border-radius: 50%; color: var(--crypto-ink); background: var(--crypto-panel); }
.crypto-shell { padding: 1.25rem 0 2.5rem; }
.crypto-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--crypto-line); }
.crypto-kicker { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem; color: var(--crypto-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.crypto-kicker .fa-solid { font-size: 1rem; line-height: 1; }
.crypto-hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.98; letter-spacing: -0.07em; }
.crypto-intro { max-width: 680px; margin: 1rem 0 0; color: var(--crypto-soft); font-size: 1rem; }
.crypto-directory { margin-top: 1.7rem; }
.crypto-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.crypto-section-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.05em; }
.crypto-status { margin: 0.3rem 0 0; color: var(--crypto-soft); font-size: 0.82rem; }
.crypto-count { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 0.65rem; border: 1px solid var(--crypto-line); border-radius: 999px; color: var(--crypto-soft); font-size: 0.75rem; }
.crypto-toolbar { display: grid; grid-template-columns: minmax(14rem, 1.8fr) repeat(4, minmax(8.5rem, 1fr)); gap: 0.55rem; margin-bottom: 0.8rem; }
.crypto-search, .crypto-filter { display: flex; align-items: center; min-width: 0; min-height: 2.7rem; border: 1px solid var(--crypto-line); border-radius: 0.65rem; background: var(--crypto-panel); }
.crypto-search { gap: 0.55rem; padding: 0 0.75rem; }
.crypto-search .fa-solid { font-size: 1.1rem; line-height: 1; color: var(--crypto-muted); }
.crypto-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--crypto-ink); background: transparent; }
.crypto-search input::placeholder { color: var(--crypto-muted); }
.crypto-filter { position: relative; display: grid; gap: 0.08rem; align-content: center; padding: 0.35rem 0.62rem; }
.crypto-filter span { color: var(--crypto-muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.crypto-filter select { width: 100%; border: 0; outline: 0; color: var(--crypto-ink); background: transparent; font-size: 0.82rem; }
.crypto-list { display: grid; gap: 0.55rem; }
.crypto-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(13rem, 1fr) auto; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--crypto-line); border-radius: 0.85rem; background: var(--crypto-panel); }
.crypto-card-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.crypto-logo { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; display: block; object-fit: contain; border-radius: 0.7rem; }
.crypto-logo-fallback { display: grid; place-items: center; color: var(--crypto-panel); background: var(--crypto-ink); font-weight: 750; }
.crypto-card-copy { min-width: 0; }
.crypto-card-name { margin: 0; overflow: hidden; font-size: 1rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.crypto-card-kind { margin: 0.15rem 0 0; overflow: hidden; color: var(--crypto-soft); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.crypto-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crypto-pill { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.6rem; padding: 0 0.5rem; border: 1px solid var(--crypto-line); border-radius: 999px; color: var(--crypto-soft); background: var(--crypto-muted-panel); font-size: 0.68rem; font-weight: 650; white-space: nowrap; }
.crypto-pill.is-yes { color: #147a49; background: #e9f6ee; border-color: #c6e8d3; }
.crypto-pill.is-no { color: #a24040; background: #fbeded; border-color: #f2cccc; }
.crypto-pill.is-unknown { color: var(--crypto-muted); }
.crypto-open { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0 0.7rem; border: 1px solid var(--crypto-line); border-radius: 0.55rem; text-decoration: none; font-size: 0.76rem; font-weight: 650; }
.crypto-open:hover, .crypto-open:focus-visible { border-color: var(--crypto-ink); outline: 0; }
.section-bottom-nav { position: fixed; z-index: 80; left: 50%; bottom: calc(0.85rem + env(safe-area-inset-bottom)); width: min(1080px, calc(100% - 1.5rem)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.14rem; padding: 0.38rem; border: 1px solid var(--crypto-line); border-radius: 1.45rem; background: color-mix(in srgb, var(--crypto-panel) 94%, transparent); box-shadow: 0 16px 38px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06); backdrop-filter: blur(18px); transform: translateX(-50%); }
.section-bottom-nav-button { min-width: 0; min-height: 2.8rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; padding: 0.34rem 0.48rem; border: 1px solid transparent; border-radius: 1rem; color: var(--crypto-ink); background: transparent; font-size: 0.76rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.section-bottom-nav-button:hover, .section-bottom-nav-button:focus-visible, .section-bottom-nav-button.is-active { color: var(--crypto-ink); background: var(--crypto-muted-panel); outline: 0; }
.section-bottom-nav-button.is-active { border-color: var(--crypto-line); }
.section-bottom-nav-icon { width: 1.5rem; height: 1.5rem; display: grid; flex: 0 0 auto; place-items: center; color: currentColor; border-radius: 0.56rem; }
.section-bottom-nav-icon .fa-solid,
.section-bottom-nav-icon .fa-brands { display: inline-block; font-size: 1.42rem; line-height: 1; font-weight: 900; }
@media (max-width: 760px) {
  :root { --crypto-footprint: 6.2rem; }
  .crypto-topbar, .crypto-shell { width: calc(100% - 1rem); }
  .crypto-hero { padding-top: 1.6rem; }
  .crypto-toolbar { grid-template-columns: 1fr 1fr; }
  .crypto-search { grid-column: 1 / -1; }
  .crypto-card { grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.8rem; }
  .crypto-pills { grid-column: 1 / -1; }
  .crypto-open { grid-column: 2; grid-row: 1; }
  .section-bottom-nav { bottom: calc(0.45rem + env(safe-area-inset-bottom)); width: calc(100% - 0.7rem); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.12rem; padding: 0.24rem; border-radius: 1.05rem; overflow: visible; }
  .section-bottom-nav-button { min-width: 0; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0.18rem; min-height: 3.6rem; padding: 0.25rem 0.1rem; border-radius: 0.82rem; font-size: 0.51rem; line-height: 1.05; white-space: normal; text-align: center; }
  .section-bottom-nav-button > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
  .section-bottom-nav-icon { width: 1.42rem; height: 1.42rem; }
  .section-bottom-nav-icon .fa-solid,
  .section-bottom-nav-icon .fa-brands { font-size: 1.34rem; }
}
@media (max-width: 440px) {
  .crypto-toolbar { grid-template-columns: 1fr; }
  .crypto-search { grid-column: auto; }
  .crypto-card { grid-template-columns: minmax(0, 1fr); }
  .crypto-open { grid-column: auto; grid-row: auto; justify-self: start; }
}
:root[data-resolved-theme="dark"] .crypto-pill.is-yes { color: #83dda9; background: #183526; border-color: #285b40; }
:root[data-resolved-theme="dark"] .crypto-pill.is-no { color: #f19b9b; background: #432526; border-color: #6c3839; }