/* Neutral interface; brand logos retain their original colours. */
:root, .page-coins {
  --bg: #fdfdfd;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f5f5f5;
  --surface-hover: #f7f7f7;
  --ink: #202022;
  --muted: #6d6d73;
  --subtle: #77777e;
  --line: #e9e9ec;
  --border-strong: #a1a1a8;
  --accent: #29292c;
  --accent-hover: #48484d;
  --accent-solid: #242427;
  --accent-on: #ffffff;
  --accent-soft: #eeeeef;
  --focus: #626269;
  --shadow: none;
  --dialog-shadow: 0 24px 100px #0000001f;
  --backdrop: #18181b66;
}
@media (prefers-color-scheme: dark) {
  :root, .page-coins {
    --bg: #151516;
    --paper: #1c1c1e;
    --surface: #1c1c1e;
    --surface-raised: #232326;
    --surface-soft: #242427;
    --surface-hover: #1d1d20;
    --ink: #f1f1f3;
    --muted: #a0a0a8;
    --subtle: #9a9aa3;
    --line: #2c2c30;
    --border-strong: #68686f;
    --accent: #ededf0;
    --accent-hover: #ceced4;
    --accent-solid: #ededf0;
    --accent-on: #1c1c1e;
    --accent-soft: #2c2c30;
    --focus: #b4b4be;
    --dialog-shadow: 0 24px 100px #00000066;
    --backdrop: #080809b3;
  }
}
body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.workspace { margin-left: 0; min-height: calc(100vh - 78px); }
main, .page-coins #main { width: 100%; max-width: 1184px; margin: 0 auto; padding: 64px 40px 88px; }
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header-inner { max-width: 1184px; height: 78px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 64px; }
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.6px; white-space: nowrap; }
.site-header .brand img { display: block; width: 28px; height: 28px; }
.site-header #navigation { display: flex; align-self: stretch; align-items: stretch; gap: 30px; margin: 0; padding: 0; }
.site-header .nav-link { position: relative; display: flex; align-items: center; padding: 0 2px; margin: 0; border-radius: 0; font-size: 13px; font-weight: 450; color: var(--muted); background: none; }
.site-header .nav-link svg { display: none; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--ink); background: none; }
.site-header .nav-link.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--ink); }
.site-about { margin-left: auto; padding: 10px 0 10px 12px; border: 0; background: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.site-about:hover { color: var(--ink); }
.footer { width: calc(100% - 80px); max-width: 1104px; margin: auto auto 0; padding: 25px 0; font-size: 11px; color: var(--muted); gap: 14px; }
#toast { left: 50%; }

/* A single quiet directory: logos, short introductions and full-row targets. */
.directory-heading { align-items: center; margin: 0 0 38px; gap: 28px; }
.directory-heading h1 { font-size: 36px; font-weight: 600; letter-spacing: -.045em; line-height: 1.35; }
.asset-search { width: 300px; }
.asset-search input { min-height: 44px; padding: 12px 14px 12px 40px; border: 0; border-radius: 8px; font-size: 12px; background: var(--surface-soft); box-shadow: none; }
.asset-search svg { width: 16px; height: 16px; top: 14px; left: 14px; }
.asset-filters { gap: 26px; padding: 0; border-bottom: 1px solid var(--line); }
.asset-filters button { position: relative; min-height: 45px; padding: 0 0 15px; gap: 0; border: 0; border-radius: 0; font-size: 12px; font-weight: 400; color: var(--muted); background: none; }
.asset-filters button:last-child { margin-left: auto; }
.asset-filters button:hover, .asset-filters button[aria-pressed="true"] { color: var(--ink); border: 0; background: none; }
.asset-filters button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.asset-results-heading { margin: 26px 0 5px; }
.asset-results-heading h2 { font-size: 12px; font-weight: 500; }
.asset-results-heading #coin-result-count, .asset-results-heading .coin-ranking-note { font-size: 11px; }
.asset-results-heading .coin-ranking-note > div { border-radius: 8px; box-shadow: none; }
#coin-results .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; }
#coin-results .coin-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: start; gap: 18px; min-height: 142px; margin: 0; padding: 31px 0 28px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transition: background .15s; }
#coin-results .coin-card:hover { border-color: var(--line); background: var(--surface-hover); box-shadow: none; transform: none; }
.asset-mark.coin-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; overflow: visible; background: transparent; box-shadow: none; }
.asset-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-mark:is([data-asset="ethereum"], [data-asset="cardano"], [data-asset="chainlink"]) { background: #fff; padding: 6px; }
.asset-mark[data-asset="zcash"] img { transform: scale(1.7); }
.asset-copy { min-width: 0; }
.asset-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 0 0 8px; }
#coin-results .coin-card h2 { font-size: 17px; font-weight: 600; letter-spacing: -.035em; line-height: 1.4; margin: 0; }
.coin-name { display: inline; color: var(--muted); font-size: 12px; line-height: 1.5; }
#coin-results .coin-card .coin-lead { min-height: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.asset-open { width: 16px; height: 24px; margin: 0; padding: 2px 0; color: var(--subtle); }
.asset-open svg { width: 16px; height: 16px; }
.asset-open::after { border-radius: 4px; }
.asset-open:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 5px; }
#coin-results .empty-state { border: 0; border-radius: 0; padding: 65px 20px; background: none; }

/* Reading stays spacious without extra ornaments or coloured panels. */
.coin-dialog { border-radius: 16px; }
.coin-detail-identity .asset-mark { width: 56px; height: 56px; border-radius: 50%; }
.coin-dialog > .dialog-close { border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); }
.coin-detail-section { display: block; padding-top: 28px; }
.detail-section-index { display: none; }
.coin-example { border: 0; border-radius: 8px; background: var(--surface-soft); padding: 23px 26px; }
.logo-credits { margin: 28px 0; border-top: 1px solid var(--line); padding-top: 20px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.logo-credits summary { font-size: 14px; font-weight: 550; color: var(--ink); cursor: pointer; }
.logo-credits ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 20px; padding: 0; list-style: none; }
.logo-credits a { text-decoration: underline; text-underline-offset: 3px; }

/* Shared surfaces match the same typography and neutral navigation. */
.academy-heading .eyebrow { display: none; }
.academy-heading { margin-bottom: 44px; }
.academy-heading h1, .track-heading h1 { font-weight: 600; }
.track-card, .track-trading { padding: 30px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 314px; }
.academy-tracks { gap: 52px; }
.track-card:hover, .track-trading:hover { box-shadow: none; transform: none; border-color: var(--border-strong); }
.track-icon, .track-trading .track-icon { background: none; color: var(--ink); border-radius: 0; width: 36px; height: 36px; }
.track-card h2 { font-size: 25px; font-weight: 550; }
.track-bottom, .track-trading .track-bottom { border: 0; padding-top: 10px; }
.track-action { font-size: 13px; font-weight: 500; }
.course-list { border-width: 1px 0; border-radius: 0; background: none; }
.course-row { padding-left: 0; padding-right: 0; }
.btn, .check-simple .panel, .risk-planned { border-radius: 8px; box-shadow: none; }
.search-field input, .input-wrap input { border-radius: 8px; }

@media (max-width: 880px) {
  main, .page-coins #main { padding: 44px 28px 64px; }
  .site-header-inner { padding: 0 28px; gap: 40px; }
  .footer { width: calc(100% - 56px); }
  #coin-results .coin-grid { gap: 0 30px; }
  #coin-results .coin-card { gap: 14px; }
  .asset-filters { gap: 22px; }
  .asset-filters button:last-child { margin-left: 0; }
}
@media (max-width: 620px) {
  .site-header-inner { height: auto; min-height: 102px; padding: 16px 22px 0; flex-wrap: wrap; gap: 12px 16px; }
  .site-header .brand { font-size: 16px; }
  .site-header .brand img { width: 25px; height: 25px; }
  .site-about { padding: 5px 0; order: 1; }
  .site-header #navigation { order: 2; width: 100%; gap: 28px; height: 43px; }
  .site-header .nav-link { font-size: 12px; padding: 0 0 14px; }
  main, .page-coins #main { padding: 35px 22px 60px; }
  .workspace { min-height: calc(100vh - 102px); }
  .directory-heading { display: block; margin-bottom: 26px; }
  .directory-heading h1 { font-size: 29px; }
  .asset-search { width: 100%; margin-top: 23px; }
  .asset-search input { min-height: 44px; }
  .asset-filters { flex-wrap: nowrap; gap: 24px; overflow-x: auto; scrollbar-width: none; }
  .asset-filters::-webkit-scrollbar { display: none; }
  .asset-filters button { min-height: 40px; padding-bottom: 13px; font-size: 12px; flex-shrink: 0; }
  .asset-filters button[aria-pressed="true"]::after { bottom: 0; }
  .asset-results-heading { margin: 23px 0 1px; }
  .asset-results-heading .coin-ranking-note[open] { max-width: 62%; }
  #coin-results .coin-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  #coin-results .coin-card { grid-template-columns: 39px minmax(0,1fr) 14px; padding: 25px 0; min-height: 124px; gap: 14px; }
  .asset-mark.coin-avatar { width: 39px; height: 39px; }
  #coin-results .coin-card h2 { font-size: 16px; }
  #coin-results .coin-card .coin-lead { font-size: 12px; line-height: 1.85; }
  .coin-name { font-size: 11px; }
  .asset-title { gap: 3px 8px; margin-bottom: 6px; }
  .asset-open, .asset-open svg { width: 14px; }
  .footer { width: calc(100% - 44px); padding: 23px 0; font-size: 10px; }
  .coin-detail-identity .asset-mark { width: 45px; height: 45px; }
  .coin-example { padding: 20px; }
  .academy-heading { margin-bottom: 30px; }
  .academy-heading h1 { font-size: 29px; }
  .academy-tracks { gap: 26px; }
  .track-card, .track-trading { padding: 25px 0; min-height: 295px; }
  .course-row { padding-left: 3px; padding-right: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #coin-results .coin-card { transition: none; }
}