:root{
  --ground:#faf9fe; --ink:#262228; --dim:#6b6673; --rule:#e9e6f2;
  --up:#00794a; --down:#d1342a; --flash:#d8f5e6; --wash:#f3f1fa;
  --lilac:#efedff; --panel:#ffffff; --dark:#211d26;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.5 var(--sans);font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:12px;top:12px;z-index:99;background:var(--ink);
  color:#fff;padding:14px 18px;min-height:44px;display:flex;align-items:center}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(250,249,254,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font:600 19px/1 var(--sans);
  letter-spacing:-.04em;text-decoration:none;min-height:44px}
.brand svg{display:block;flex:0 0 auto}
/* The mark is currentColor, so it would inherit the wordmark's ink. It is
   the one green thing in the header. */
.brandmark{color:var(--up)}
nav{display:flex;gap:2px}
nav a{font:500 14px/1 var(--sans);color:var(--dim);text-decoration:none;
  padding:13px 14px;border-radius:99px;min-height:44px;display:flex;align-items:center}
nav a:hover{color:var(--ink);background:var(--lilac)}
nav a[aria-current=page]{color:var(--ink)}

/* ---- ticker crawl: real settled bids ---- */
.crawl{background:var(--dark);color:#fff;overflow:hidden;white-space:nowrap;
  font:500 13px/1 var(--sans);padding:11px 0}
.crawl-inner{display:inline-block;animation:slide 40s linear infinite;will-change:transform}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.crawl i{font-style:normal;color:#5ee9a4}
.crawl s{text-decoration:none;color:#a09aab}
.crawl em{font-style:normal;padding:0 24px;display:inline-block}
.crawl:hover .crawl-inner{animation-play-state:paused}

/* ---- hero ---- */
.herowrap{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--lilac) 0%,rgba(216,245,230,.5) 55%,var(--ground) 100%)}
.herowrap::after{content:"";position:absolute;left:50%;top:-160px;width:900px;height:420px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(153,141,255,.28),transparent 66%)}
.hero{padding:56px 0 44px;text-align:center;position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 14px/1 var(--sans);color:var(--dim);margin:0 0 20px}
h1{font:500 clamp(34px,5.6vw,66px)/1.05 var(--sans);letter-spacing:-.045em;
  margin:0 auto 18px;max-width:16ch}
/* Fraunces, not Instrument Serif: the latter ships weight 400 only, so a bold
   request renders as a synthetic smear rather than a real face.
   Fraunces is wider than the grotesk around it, so it is set at 0.88em to
   keep the headline at two lines. */
h1 em{font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:.88em;letter-spacing:-.01em;color:var(--up)}
h1 .amt{color:var(--up);font-variant-numeric:tabular-nums}
.lede{font:400 18px/1.5 var(--sans);color:var(--dim);max-width:46ch;margin:0 auto 28px}
.form{display:flex;gap:10px;max-width:560px;margin:0 auto}
input[type=text]{flex:1;min-width:0;width:100%;height:56px;padding:0 22px;
  font:400 15px/1 var(--sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);border-radius:99px;
  box-shadow:0 1px 3px rgba(38,34,40,.05)}
input[type=text]::placeholder{color:#9a95a3}
button{height:56px;padding:0 30px;font:600 15px/1 var(--sans);color:#fff;
  background:var(--ink);border:1px solid var(--ink);border-radius:99px;
  cursor:pointer;white-space:nowrap}
button:hover:not(:disabled){background:var(--up);border-color:var(--up)}
button:disabled{opacity:.45;cursor:not-allowed}
.hint{font:400 13px/1.5 var(--sans);color:var(--dim);margin:14px auto 0;max-width:70ch}
.hint b{color:var(--ink);font-weight:600}
.hint a{text-decoration:underline;text-underline-offset:2px;position:relative;
  display:inline-block}
.hint a::before{content:"";position:absolute;top:50%;left:0;
  width:100%;height:44px;transform:translateY(-50%)}

/* ---- live panel ---- */
.livebox{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:-26px 0 26px;position:relative;z-index:2;border:0}
.lhead{display:none}
.dot{width:7px;height:7px;background:#22c55e;border-radius:50%;
  display:inline-block;margin-right:7px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.lrow{display:flex;flex-direction:column-reverse;gap:6px;
  background:var(--panel);border:1px solid var(--rule);border-radius:20px;
  padding:20px 22px;box-shadow:0 2px 10px rgba(38,34,40,.04)}
.lrow span{font:500 12px/1 var(--sans);color:var(--dim)}
.lrow b{font:600 30px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.lrow.big b{color:var(--up)}

/* ---- filters ---- */
.filters{border:0;margin:0 0 16px}
.fgroup{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:2px 0}
.fgroup::-webkit-scrollbar{display:none}
.flabel{font:500 11px/1 var(--mono);color:#8a8a8a;text-transform:uppercase;
  letter-spacing:.09em;margin-right:8px;flex:0 0 auto}
/* 44px tall, not the 38px Aave uses: a hit target is not a style choice. */
.chip{font:500 13px/1 var(--sans);color:var(--dim);background:var(--panel);
  border:1px solid var(--rule);border-radius:99px;padding:0 18px;height:44px;
  min-height:44px;cursor:pointer;white-space:nowrap;display:flex;align-items:center}
.chip:hover{color:var(--ink);background:var(--lilac);border-color:var(--rule)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- board ---- */
.boardwrap{background:var(--panel);border:1px solid var(--rule);border-radius:24px;
  overflow:hidden;box-shadow:0 2px 12px rgba(38,34,40,.04)}
.thead{display:grid;grid-template-columns:64px 48px minmax(0,1fr) 96px 130px 128px;
  gap:14px;padding:15px 26px;border-bottom:1px solid var(--rule);
  font:500 11px/1 var(--sans);color:var(--dim);letter-spacing:.04em}
.thead .r{text-align:right}
.board{margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:64px 48px minmax(0,1fr) 96px 130px 128px;
  gap:14px;align-items:center;padding:15px 26px;border-bottom:1px solid var(--rule);
  position:relative;transition:background .14s}
.row:last-child{border-bottom:0}
.row.top{background:var(--flash);box-shadow:0 0 0 100vmax var(--flash);
  clip-path:inset(0 -100vmax);border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);padding:18px 0}
.rank{font:600 16px/1 var(--sans);color:var(--dim);font-variant-numeric:tabular-nums}
.row.top .rank{color:var(--ink);font-size:20px}
.logo{width:44px;height:44px;border-radius:14px;background:var(--lilac);
  object-fit:cover;display:block}
.meta{min-width:0}
.tick{font:600 17px/1.2 var(--sans);letter-spacing:-.02em;text-decoration:none;
  color:var(--ink);position:relative;display:inline-block}
.tick::before{content:"";position:absolute;top:50%;left:0;
  width:max(100%,44px);height:44px;transform:translateY(-50%)}
.tick:hover{text-decoration:underline}
.row.top .tick{font-size:20px}
.sub{font:400 12.5px/1.4 var(--sans);color:var(--dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chg{font:500 13px/1 var(--sans);text-align:right;font-variant-numeric:tabular-nums}
.chg.u{color:var(--up)} .chg.d{color:var(--down)} .chg.n{color:var(--dim)}
.bid{font:600 18px/1 var(--sans);text-align:right;color:var(--up);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.row.top .bid{font-size:23px}
/* 44px, not Aave's 38px. */
.take{font:600 12.5px/1 var(--sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);border-radius:99px;cursor:pointer;padding:0 12px;
  height:44px;width:100%}
.take:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mascot{position:absolute;left:-44px;top:50%;transform:translateY(-50%)}
.empty{padding:56px 0;text-align:center;color:var(--dim);font:400 15px/1.6 var(--sans)}

/* ---- content pages ---- */
.page{padding:36px 0 64px;max-width:68ch}
.page h1{font:600 clamp(30px,4.2vw,46px)/1.02 var(--sans);margin:0 0 14px;
  max-width:none;text-align:left;letter-spacing:-.04em}
.page .standfirst{font:400 18px/1.5 var(--sans);color:var(--dim);margin:0 0 36px}
.page h2{font:600 clamp(20px,2.6vw,26px)/1.15 var(--sans);letter-spacing:-.03em;
  margin:40px 0 14px}
.page p{font:400 16px/1.65 var(--sans);margin:0 0 16px}
.page ul{margin:0 0 16px;padding-left:20px}
.page li{font:400 16px/1.65 var(--sans);margin:0 0 8px}
.page table{width:100%;border-collapse:collapse;margin:0 0 24px;
  font:400 15px/1.5 var(--sans)}
.page th,.page td{text-align:left;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.page th{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);padding-bottom:9px}
.page td.num{font:600 15px/1.4 var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.page .addr{font:400 13px/1.7 var(--mono);word-break:break-all;
  background:var(--wash);border:1px solid var(--rule);padding:14px}
.callout{border-left:3px solid var(--ink);padding:2px 0 2px 16px;margin:0 0 24px}
.callout p:last-child{margin-bottom:0}
.backlink{display:inline-flex;align-items:center;min-height:44px;
  font:600 14px/1 var(--sans);text-decoration:underline;text-underline-offset:3px}

/* ---- footer ---- */
footer{border-top:1px solid var(--rule);padding:40px 0 56px;
  font:400 13px/1.7 var(--sans);color:var(--dim);margin-top:48px}
footer a{text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding:10px 0;min-height:44px}
.addr{font:400 12px/1.7 var(--mono);word-break:break-all}

/* ---- dialog ---- */
dialog{border:1px solid var(--rule);border-radius:24px;padding:0;max-width:560px;
  width:calc(100% - 32px);background:var(--ground);color:var(--ink)}
dialog::backdrop{background:rgba(38,34,40,.55)}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--rule)}
.dhead h2{font:600 18px/1.2 var(--sans);letter-spacing:-.025em;margin:0}
.dclose{background:none;border:0;color:var(--dim);font:400 24px/1 var(--mono);
  cursor:pointer;padding:0;min-width:44px;min-height:44px;height:44px}
.dclose:hover{color:var(--ink);background:none}
.dbody{padding:22px}
.dbody p{font:400 14px/1.6 var(--sans);color:var(--dim);margin:0 0 16px}
.dbody label{display:block;font:600 12px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 8px;color:var(--dim)}
.dbody input[type=text]{border-right:1.5px solid var(--ink)}
.paychains{display:flex;gap:8px;margin:0 0 20px}
.paychain{flex:1;height:48px;padding:0 14px;font:600 14px/1 var(--sans);
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  border-radius:99px;cursor:pointer}
.paychain[aria-checked=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.paychain:hover{border-color:var(--ink);background:var(--ground);color:var(--ink)}
.paychain[aria-checked=true]:hover{background:var(--ink);color:#fff}
.paybox{background:var(--wash);border:1px solid var(--rule);border-radius:16px;
  padding:16px;margin:0 0 20px}
.paybox .addr{color:var(--ink);margin:6px 0 10px}
.copy{font:500 12px/1 var(--sans);background:var(--panel);border:1px solid var(--rule);
  border-radius:99px;color:var(--dim);padding:0 16px;height:44px;cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--ink);background:none}
.err{font:400 14px/1.5 var(--sans);color:var(--down);margin:0 0 16px;
  display:flex;gap:8px;align-items:flex-start}
.err.ok{color:var(--up)}

@media (max-width:900px){
  /* The stat row was still four across, which forced the page 74px wider
     than the viewport. */
  .livebox{grid-template-columns:repeat(2,1fr);margin:-18px 0 22px}
  .lrow{padding:16px 18px}
  .lrow b{font-size:24px}
  .hero{padding:34px 0 30px}
  h1{font-size:clamp(28px,7.4vw,40px);max-width:14ch}
  .lede{font-size:16px}
  .thead{display:none}
  .row{padding:15px 18px}
  .crown{padding:24px 20px}
  .thead{display:none}
  .row{grid-template-columns:40px 34px minmax(0,1fr);row-gap:8px;
    grid-template-areas:"rank logo meta" ". . nums" ". . take"}
  .row .rank{grid-area:rank}
  .row .logo{grid-area:logo;width:34px;height:34px}
  .row .meta{grid-area:meta}
  .row .chg{grid-area:nums;text-align:left;justify-self:start;align-self:center}
  .row .bid{grid-area:nums;text-align:right;justify-self:end}
  .row .take{grid-area:take}
  .mascot{display:none}
  .form{flex-direction:column;gap:10px}
  .form input[type=text],.form button{flex:0 0 auto;width:100%}
  .crown-logo{width:60px;height:60px;border-radius:18px}
  .crown-sym{font-size:30px}
  .crown-tag{top:16px;left:20px}
  .crown-body{padding-top:20px}
}
@media (max-width:640px){
  /* Three padded pills plus the wordmark do not fit at 390. Trim the padding
     and let the row scroll rather than widening the page. */
  .bar{height:60px;gap:10px}
  nav{overflow-x:auto;scrollbar-width:none;flex:0 1 auto}
  nav::-webkit-scrollbar{display:none}
  nav a{padding:13px 9px;font-size:13px}
  .brand{font-size:17px;flex:0 0 auto}
}
@media (max-width:520px){
  /* Two across, not one: stacking four cards pushed the board 300px down. */
  .livebox{grid-template-columns:repeat(2,1fr);gap:8px;margin:-14px 0 18px}
  .lrow{padding:13px 14px}
  .lrow b{font-size:20px}
  .lrow span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .crawl-inner{animation:none}
}
@media (forced-colors:active){
  .row.top{box-shadow:none;clip-path:none;border:2px solid CanvasText}
  .logo,.paybox,.livebox{border-color:CanvasText}
}

/* ---- manual payment fallback inside the bid modal ---- */
#manual{border-top:1px solid var(--rule);margin-top:4px}
#manual summary{font:600 13px/1.4 var(--sans);color:var(--dim);padding:16px 0;
  cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}
#manual summary::-webkit-details-marker{display:none}
#manual summary::before{content:"+";font:400 15px/1 var(--mono);margin-right:8px}
#manual[open] summary::before{content:"\2212"}
#manual summary:hover{color:var(--ink)}

/* ---- the crown: #1 lifted out of the table ---- */
#crownWrap{margin:0 0 14px}
.crown{position:relative;background:var(--dark);color:#fff;border-radius:28px;
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:30px 32px;overflow:hidden}
.crown::before{content:"";position:absolute;right:-60px;top:-90px;width:420px;height:340px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(153,141,255,.5),transparent 68%)}
.crown-tag{position:absolute;top:22px;left:32px;color:#a79dff;
  font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.crown-face{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.crown-logo{width:76px;height:76px;border-radius:22px;background:#332c3a;
  object-fit:cover;display:block}
.crown-body{min-width:0;position:relative;z-index:1;padding-top:14px}
.crown-sym{font:600 clamp(26px,3.4vw,40px)/1 var(--sans);letter-spacing:-.04em;
  text-decoration:none;color:#fff;display:inline-block;position:relative}
.crown-sym::before{content:"";position:absolute;top:50%;left:0;width:100%;
  height:max(100%,44px);transform:translateY(-50%)}
.crown-sym:hover{text-decoration:underline}
.crown-meta{font:400 13px/1.5 var(--sans);color:#a09aab;margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crown-right{text-align:right;position:relative;z-index:1;display:flex;
  flex-direction:column;align-items:flex-end;gap:10px}
.crown-bid{font:600 clamp(28px,3.8vw,42px)/1 var(--sans);letter-spacing:-.045em;
  color:#5ee9a4;font-variant-numeric:tabular-nums}
/* #9c94a8 not #8b8496: the lighter value clears 4.5:1 with margin. */
.crown-held{font:500 11px/1 var(--sans);color:#9c94a8;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.crown-take{font:600 14px/1 var(--sans);color:var(--dark);background:#fff;border:0;
  border-radius:99px;cursor:pointer;height:48px;padding:0 24px;white-space:nowrap}
.crown-take:hover{background:#5ee9a4}


/* Handing over the crown: a flash, then it settles. */
@keyframes crownFlash{
  0%,22%{background:var(--down)}
  100%{background:var(--dark)}
}
.crown.changed{animation:crownFlash 1.5s ease-out}



/* Rows that just moved. */
@keyframes rowFlash{0%{background:rgba(94,233,164,.35)}100%{background:transparent}}
.row.moved{animation:rowFlash 2s ease-out}

/* Toast: someone took the crown. */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);
  background:var(--dark);color:#fff;font:500 14px/1.4 var(--sans);
  border-radius:99px;padding:14px 24px;
  display:flex;align-items:center;gap:10px;z-index:50;max-width:calc(100% - 32px);
  transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.toast.up{transform:translateX(-50%) translateY(0)}
.toast b{color:#5ee9a4}

@media (max-width:720px){
  .crown{grid-template-columns:auto 1fr;gap:14px;padding:20px 16px}
  .crown-logo{width:48px;height:48px}
  .crown .mascot{display:none}
  .crown-right{grid-column:1/-1;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;flex-wrap:wrap}
  .crown-take{flex:1 0 100%;order:3}
}
@media (prefers-reduced-motion:reduce){
  .crown::before{animation:none;display:none}
  .crown.changed,.row.moved,.crown.changed .crown-sym,.crown.changed .crown-bid{animation:none}
  .toast{transition:none}
}
@media (forced-colors:active){
  .crown{border:2px solid CanvasText}
  .crown::before{display:none}
}

/* ---- podium: highlight tapers with rank ----
   #1 is the crown card above. #2 and #3 stay table rows but keep a share of
   the gold, so weight tracks position instead of being all-or-nothing. */
.row.p2,.row.p3{position:relative}
.row.p2{background:linear-gradient(90deg,rgba(216,245,230,.55),transparent 62%)}
.row.p3{background:linear-gradient(90deg,rgba(216,245,230,.28),transparent 52%)}

.row.p2 .rank,.row.p3 .rank{color:var(--ink)}
.row.p2 .rank{font-size:17px}
.row.p2 .tick{font-size:17px}
.row.p2 .bid{font-size:19px}

/* The gold rows need their own ink: --dim was tuned against white. */


/* ---- bid amount input ---- */
.amtrow{display:flex;align-items:center;border:1px solid var(--rule);
  border-radius:16px;background:var(--panel);margin:0 0 10px}
.amtcur{font:700 20px/1 var(--mono);color:var(--dim);padding:0 4px 0 14px}
.amtrow input{flex:1;height:52px;padding:0 14px 0 4px;border:0;
  font:800 22px/1 var(--mono);font-variant-numeric:tabular-nums;
  background:none;color:var(--ink);min-width:0}
.amtrow input:focus{outline:none}
.amtrow:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.quick{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.quick button{flex:1 1 auto;height:44px;padding:0 14px;font:500 12px/1 var(--sans);
  background:var(--panel);color:var(--dim);border:1px solid var(--rule);
  border-radius:99px;cursor:pointer;white-space:nowrap}
.quick button:hover{border-color:var(--ink);color:var(--ink);background:var(--ground)}
#amtLands b{color:var(--ink)}


/* ---- per-coin share page ---- */
.coin{max-width:64ch;padding:40px 0 64px}
.coin.is-top{position:relative}
.coin-rank{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.coin-figure{display:flex;align-items:baseline;color:var(--ink)}
.coin-hash{font:600 clamp(38px,6vw,62px)/1 var(--sans);color:var(--dim);
  letter-spacing:-.03em}
.coin-num{font:600 clamp(72px,13vw,132px)/1 var(--sans);letter-spacing:-.06em;
  font-variant-numeric:tabular-nums}
.coin.is-top .coin-figure{color:var(--up)}
.coin-crown{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;
  background:var(--flash);border-radius:99px;padding:10px 14px;align-self:center}
.coin-head{display:flex;align-items:center;gap:18px;margin:0 0 32px}
.coin-logo{width:72px;height:72px;border-radius:20px;background:var(--lilac);
  object-fit:cover;display:block;flex:0 0 auto}
.coin h1{font:600 clamp(34px,6vw,54px)/1 var(--sans);letter-spacing:-.045em;
  margin:0 0 6px;max-width:none;text-align:left}
.coin-name{font:400 16px/1.4 var(--sans);color:var(--dim);margin:0}
.coin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 0 26px;
  border-top:1px solid var(--rule)}
.coin-stats > div{padding:16px 0;border-bottom:1px solid var(--rule)}
.coin-stats > div:nth-child(odd){padding-right:20px}
.coin-stats dt{font:500 11px/1 var(--mono);color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 8px}
.coin-stats dd{margin:0;font:600 26px/1 var(--sans);font-variant-numeric:tabular-nums;
  letter-spacing:-.035em}
.coin-stats dd.money{color:#00602f}
.coin-addr{font:400 12px/1.7 var(--mono);color:var(--dim);word-break:break-all;
  background:var(--wash);border:1px solid var(--rule);border-radius:14px;
  padding:14px;margin:0 0 26px}
.coin-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;
  padding:0 24px;font:600 15px/1 var(--sans);background:var(--ink);color:#fff;
  text-decoration:none;border:1px solid var(--ink);border-radius:99px}
.btn:hover{background:var(--up);border-color:var(--up)}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--rule);
  font-weight:500;font-size:14px;padding:0 20px}
.btn.ghost:hover{border-color:var(--ink);background:none;color:var(--ink)}
.coin-foot{font:400 13px/1.6 var(--sans);color:var(--dim);max-width:56ch}
.share{border-top:1px solid var(--rule);padding:22px 0 0;margin:0 0 30px}
.share-label{font:500 11px/1 var(--mono);color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 12px}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:620px){
  .coin-stats{grid-template-columns:1fr}
  .coin-stats > div:nth-child(odd){padding-right:0}
  .coin-head{gap:14px}.coin-logo{width:56px;height:56px}
}

/* A coin with no DexScreener image gets its initials, not an empty box. */
/* Lightness 24% keeps every hue above 4.5:1 on its own 92% ground; the flat
   lilac fallback measured 3.80 and is gone. */
.mono-fallback{display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;
  background:hsl(var(--h) 62% 92%);color:hsl(var(--h) 70% 24%)}

/* ---- custom logo field ---- */
.opt{font:500 10px/1 var(--mono);color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin-left:6px}
.logorow{display:flex;gap:10px;align-items:stretch;margin:0 0 6px}
.logoprev{flex:0 0 52px;width:52px;height:52px;border:1px solid var(--rule);border-radius:14px;
  background:var(--wash) center/cover no-repeat;display:flex;align-items:center;
  justify-content:center;font:800 17px/1 var(--sans);color:var(--dim)}
.logoprev.has-img{border-color:var(--ink);color:transparent}
.logorow input{flex:1;min-width:0;border-right:1.5px solid var(--ink)}

/* A share page is often someone's first view of the site, so the way back to
   the board is explicit rather than only the wordmark. */
.backlink.top{margin:26px 0 4px}

/* The whole card is a pointer target, but the ticker keeps the underline so
   it still reads as the link it is. */
.row,.crown{cursor:pointer}
.row:hover{background:#faf9fe}
.row.p2:hover,.row.p3:hover{filter:brightness(.985)}
.row:hover .tick{text-decoration:underline}
.crown:hover .crown-sym{text-decoration:underline}
.row .take,.crown-take{cursor:pointer}