/* Pulse board (.pu), coin cards (.card.nc, also used on other pages), Pulse dialogs (.pu-dlg), menus (.pu-pop)
   and hover previews (.hv-pop). Tokens come from style.css :root, so every theme and the custom accent apply. */

.token-image { opacity: 0; }
.token-image[data-loaded="true"] { opacity: 1; }

/* ---- board: a header row, then one bordered box holding the three columns ---- */
.pu { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; background: var(--bg); }
.pu-sp { flex: 1; }
.pu-top { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 10px 16px; min-width: 0; }
.pu-title { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; margin-right: 12px; }
.pu-title h1 { flex: none; margin: 0; font: 500 22px/1 var(--sans); letter-spacing: -.3px; color: var(--fg); }
.pu-zero { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--up) 30%, transparent); border-radius: var(--pill); background: color-mix(in srgb, var(--up) 8%, transparent); color: var(--up); font: 600 11.5px/1 var(--sans); white-space: nowrap; cursor: help; }

/* launchpads: one pill group (sent to the feed); the picked ones get the accent tint. The chips scroll inside the
   pill (.pu-lpi) and fade out at whichever edge hides more (pulse.js sets .fl / .fr) */
.pu-lps { display: flex; align-items: center; height: 34px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--panel); min-width: 0; overflow: hidden; }
.pu-lpi { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; height: 100%; border-radius: var(--pill); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pu-lpi::-webkit-scrollbar { display: none; }
.pu-lpi.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.pu-lpi.fl { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
.pu-lpi.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.pu-lps button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--pill); background: none; color: var(--muted); font: 600 10.5px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; transition: background-color .12s, color .12s; }
.pu-lps button i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lp); background: color-mix(in srgb, var(--lp) 22%, transparent); }
.pu-lps button:hover { color: var(--fg); background: var(--hover); }
.pu-lps button.on { color: var(--sel-fg); background: var(--sel-bg); }
.pu-lps button.on i { background: var(--lp); }
.pu-lps [data-lpall] { padding: 0 12px; font-size: 11.5px; letter-spacing: 0; }

/* right side: search, feed health, icon buttons, Rapid and the grey Display pill */
.pu-search { position: relative; display: flex; align-items: center; flex: 0 1 250px; min-width: 150px; margin-right: 4px; }
.pu-search[hidden] { display: none; }
.pu-search > svg { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--dim); pointer-events: none; }
.pu-q { width: 100%; height: 32px; padding: 0 12px 0 33px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); color: var(--fg); font: 500 12.5px/1 var(--sans); outline: 0; transition: border-color .12s, box-shadow .12s; }
.pu-q:hover { border-color: var(--line-2); }
.pu-q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pu-q::placeholder { color: var(--dim); }
.pu-health { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; color: var(--muted); font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; cursor: help; }
.pu-health i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.pu-health.ok i { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); }
.pu-health.warn { color: var(--warn); } .pu-health.warn i { background: var(--warn); }
.pu-health.bad { color: var(--down); } .pu-health.bad i { background: var(--down); }
.pu-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.pu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--pill); background: none; color: var(--muted); font: 600 12.5px/1 var(--sans); white-space: nowrap; flex: none; transition: background-color .12s, color .12s; }
.pu-btn:hover { color: var(--fg); background: var(--hover); }
.pu-btn.pu-ic { width: 32px; padding: 0; }
.pu-btn.on { color: var(--fg); background: var(--fill); }
.pu-btn[data-watchonly].on { color: var(--warn); }
/* Saved: a labelled toggle (the nav's star opens the watchlist; this one only filters the board) */
.pu-saved { padding: 0 11px 0 9px; gap: 5px; }
.pu-saved.on span { color: var(--fg); }
.pu-btn b { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--pill); background: var(--fill-2); color: var(--fg); font: 700 9.5px/15px var(--sans); text-align: center; }
.pu-btn b:empty { display: none; }
.pu-rapid { margin-left: 4px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pu-rapid svg { color: var(--accent); }
.pu-rapid.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.pu-rapid.on svg { color: var(--warn); }
.pu-disp { margin-left: 4px; padding: 0 14px; background: var(--fill); color: var(--fg); }
.pu-disp:hover { background: var(--fill-2); }

/* the columns: one container, 1px dividers, 48px headers */
.pu-switch { display: none; }
.pu-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; margin: 0 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
/* each column is a size container: its header compacts when the column is narrow (see the @container puc rules) */
.pu-col { container: puc / inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.pu-col:last-child { border-right: 0; }
.pu-ch { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.pu-ch h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font: 500 16px/1.25 var(--sans); color: var(--fg); white-space: nowrap; letter-spacing: -.1px; }
.pu-n { flex: none; margin-left: 7px; color: var(--muted); font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
/* the title and this pill are the only parts that give way, so the controls never spill into the next column */
.pu-paused { display: inline-flex; flex: 0 3 auto; min-width: 0; margin-left: 8px; padding: 4px 8px; border-radius: var(--pill); background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn); font: 600 10.5px/1 var(--sans); white-space: nowrap; }
.pu-paused[hidden] { display: none; }
.pu-paused span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.pu-ch:has(.pu-paused:not([hidden])) .pu-n { display: none; }
.pu-ch > .pu-sp { min-width: 6px; }
.pu-amt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 11px; margin-right: 4px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--fg-2); cursor: text; flex: none; transition: border-color .12s; }
.pu-amt:hover { border-color: var(--line-2); }
.pu-amt:focus-within { border-color: var(--accent); }
.pu-amt input { width: 38px; padding: 0; border: 0; outline: 0; background: none; color: var(--fg); font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.pu-amt input::placeholder { color: var(--fg-2); }
@supports (field-sizing: content) { .pu-amt input { width: auto; field-sizing: content; min-width: 2ch; max-width: 64px; } }
.pu-amt em { font: 500 11px/1 var(--sans); font-style: normal; color: var(--muted); }
.pu-ib, .pu-sortbar button, .pu-sortbar label { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--pill); background: none; color: var(--muted); flex: none; transition: background-color .12s, color .12s; }
.pu-ib:hover, .pu-sortbar button:hover, .pu-sortbar label:hover { color: var(--fg); background: var(--hover); }
.pu-ib.off { color: var(--dim); }
.pu-ib[hidden] { display: none; }
.pu-sortbar { display: flex; align-items: center; gap: 2px; flex: none; }
.pu-sortbar select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pu-sortbar label:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.pu-sortbar label.on, .pu-sortbar button.on { color: var(--accent); }
.pu-ch:has(.pu-paused:not([hidden])) [data-pause] { color: var(--warn); }
.pu-fb.on { color: var(--accent); }
.pu-fb b { position: absolute; top: 2px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font: 700 9px/14px var(--sans); text-align: center; }
.pu-fb b:empty { display: none; }
/* narrow columns (laptops, tablets): the amount drops its "SOL" (the pill's title keeps it), the icons shrink */
@container puc (max-width: 470px) {
  .pu-ch { gap: 0; padding-right: 6px; }
  .pu-amt { gap: 4px; padding: 0 9px 0 8px; margin-right: 2px; }
  .pu-amt em { display: none; }
  .pu-sortbar { gap: 0; }
  .pu-ib, .pu-sortbar button, .pu-sortbar label { width: 27px; height: 28px; }
}
@container puc (max-width: 370px) {
  .pu-ch { padding: 0 4px 0 12px; }
  .pu-ch h2 { font-size: 15px; }
  .pu-n { margin-left: 6px; }
  .pu-paused { margin-left: 6px; padding: 4px 6px; }
  .pu-ib, .pu-sortbar button, .pu-sortbar label { width: 25px; }
}
.pu-list { container: pucol / inline-size; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pu-empty { padding: 40px 18px; color: var(--muted); text-align: center; display: grid; gap: 10px; justify-items: center; font-size: 12.5px; line-height: 1.5; }
.pu-empty b { color: var(--fg-2); font-weight: 600; }
.pu-empty .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.pu-empty .pu-err { color: var(--down); }
.pu-ea { display: flex; gap: 6px; }
.pu-ea .btn { height: 28px; font-size: 12px; }

/* first load: skeleton cards in the card's own shape */
.pu .skel { display: block; border-radius: var(--radius); background: linear-gradient(90deg, var(--panel-2) 0 40%, color-mix(in srgb, var(--panel-2) 50%, var(--line-2)) 50%, var(--panel-2) 60% 100%); background-size: 250% 100%; animation: pu-skel 1.3s linear infinite; }
@keyframes pu-skel { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .pu .skel { animation: none; } }
/* as tall as a Large card (110px; 104px on phones), so the list does not jump when the coins arrive */
.pu-skc { display: grid; grid-template-columns: 74px minmax(0, 1fr) 120px; gap: 12px; height: 110px; padding: 12px 16px 9px 12px; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.pu-skc .sk-p { display: grid; gap: 5px; justify-items: center; }
.pu-skc .sk-av { width: 74px; height: 74px; }
.pu-skc .sk-ca { width: 56px; height: 9px; }
.pu-skc .sk-m, .pu-skc .sk-s { display: grid; gap: 9px; align-content: start; }
.pu-skc .sk-m .skel { height: 11px; }
.pu-skc .sk-m .skel:nth-child(1) { width: 55%; height: 14px; }
.pu-skc .sk-m .skel:nth-child(2) { width: 70%; }
.pu-skc .sk-m .skel:nth-child(3) { width: 30%; }
.pu-skc .sk-m .sk-pills { width: 85%; height: 22px; border-radius: var(--pill); }
.pu-skc .sk-s { justify-items: end; }
.pu-skc .sk-s .skel { width: 110px; height: 14px; }
.pu-skc .sk-s .skel:nth-child(2) { width: 80px; height: 10px; }
.pu-skc .sk-s .sk-qb { width: 70px; height: 16px; margin-top: 26px; }
.pu-skc:nth-child(2n) .sk-m .skel:nth-child(2) { width: 58%; }
.pu-skc:nth-child(3n) .sk-m .skel:nth-child(1) { width: 40%; }

/* ---- coin card (.card.nc). Shared: other pages can call cardHtml(t) and get the same row.
   Standard size here; .big (Pulse's default) and .cmp (compact rows) below.
   Columns: picture | text | stats | quick buy. The stats (V, MC, F, TX) span the last two; the pill row spans the
   text and stats columns, so pills run under F/TX and stop just before the quick buy. ---- */
.card.nc { --fw: 60px; --ii: 3px; --ms: 12px; --sym: 14.5px; --val: calc(var(--ms) + 2.5px); --pill-h: 22px;
  position: relative; display: grid; grid-template-columns: var(--fw) minmax(0, 1fr) auto auto; grid-template-rows: 19px 19px 15px var(--pill-h); column-gap: 12px; row-gap: 3px;
  padding: 10px 14px 9px 12px; border-bottom: 1px solid var(--line-soft); background: var(--panel); cursor: pointer; transition: background-color .1s; }
.card.nc:hover { background: color-mix(in srgb, var(--panel-2) 70%, var(--panel)); }
.card.nc.sel { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 2px 0 0 var(--accent); }
.card.nc.ms-s { --ms: 11px; }
.card.nc.ms-l { --ms: 13px; }

/* picture: a launchpad-coloured frame (its bright part is the bonding curve so far), the badge, the address under it */
.nc-pic { grid-column: 1; grid-row: 1 / 5; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; }
.nc-av { position: relative; width: var(--fw); height: var(--fw); flex: none; }
.nc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nc-ring .bg { fill: none; stroke: color-mix(in srgb, var(--lp) 30%, transparent); stroke-width: 1.7; }
.nc-ring .fg { fill: none; stroke: var(--lp); stroke-width: 1.7; }
.nc-av.done .nc-ring .fg { stroke-dasharray: none; }
.nc-img { position: absolute; inset: var(--ii); border-radius: 2px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); font: 600 15px/1 var(--sans); }
.nc-img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-av.noring .nc-img { inset: 0; border: 2px solid color-mix(in srgb, var(--lp) 60%, transparent); border-radius: var(--radius); }
.nc-av.circ .nc-img { border-radius: 50%; }
.nc-lp { position: absolute; right: -5px; bottom: -5px; z-index: 2; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 1.5px solid var(--lp); border-radius: var(--pill); background: var(--panel); color: var(--lp); font: 700 7.5px/1 var(--sans); letter-spacing: .03em; }
.nc-lp.ic { width: 17px; padding: 0; }
:root[data-theme="light"] .nc-lp { color: var(--fg); }
.nc-ca { max-width: calc(100% + 12px); margin: 0 -6px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 11px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: copy; }
.nc-ca:hover { color: var(--fg); }

/* line 1: SYMBOL name copy (star) */
.nc-l1 { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.nc-l1 .sym { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; font: 500 var(--sym)/1.25 var(--sans); color: var(--fg); letter-spacing: -.1px; }
.nc-l1 .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 var(--sym)/1.25 var(--sans); color: var(--muted); }
.nc-l1 .copy { flex: none; display: inline-grid; padding: 0; border: 0; background: none; color: var(--dim); line-height: 0; }
.nc-l1 .copy:hover { color: var(--fg); }
.nc-star { flex: none; display: inline-grid; padding: 0; border: 0; background: none; color: var(--dim); line-height: 0; opacity: 0; }
.card.nc:hover .nc-star, .nc-star:focus-visible, .nc-star.on { opacity: 1; }
.nc-star:hover, .nc-star.on { color: var(--warn); }

/* line 2: age, links, holders, bonding curve. The counts never shrink; when the row is short, whole link icons
   wrap out of sight from the end (X search first, then website, Telegram) */
.nc-l2 { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); font: 500 var(--ms)/1 var(--sans); font-variant-numeric: tabular-nums; }
.nc-l2 > * { flex: none; }
.nc-l2 .age { color: var(--up); font: 500 calc(var(--ms) + 1.5px)/1 var(--sans); font-variant-numeric: tabular-nums; }
.nc-l2 .soc { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; min-width: 0; height: 16px; overflow: hidden; }
.nc-l2 .soc:empty { display: none; }
.nc-l2 .soc a { display: inline-grid; place-items: center; height: 16px; }
.nc-l2 .soc a { color: var(--muted); line-height: 0; }
.nc-l2 .soc a:hover { color: var(--fg); }
.nc-l2 .soc svg { width: 14px; height: 14px; }
.nk { display: inline-flex; align-items: center; gap: 3px; }
.nk svg { width: 12px; height: 12px; }
.nk b { color: var(--fg); font-weight: 500; }
.nk.bc { color: var(--accent); }
.nc-grad { color: var(--up); }

/* line 3: the coin's X account */
.nc-xh { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 calc(var(--ms) - .5px)/1 var(--sans); }
.nc-h { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--info); }
.nc-h:hover { text-decoration: underline; }
.nc-fol { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--info); opacity: .85; font-variant-numeric: tabular-nums; }

/* line 4: stat pills, under the text and the stats, up to the quick buy (only whole pills show: one that doesn't fit
   wraps out of sight; card.js puts the risk flags first). Colour sits on the icon and value only. */
.nc-l3 { grid-column: 2 / 4; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; height: var(--pill-h); min-width: 0; overflow: hidden; }
.nb { flex: none; display: inline-flex; align-items: center; gap: 4px; height: var(--pill-h); padding: 0 7px; border: 1px solid var(--line-soft); border-radius: var(--pill); background: var(--panel); color: var(--fg-2); font: 500 var(--ms)/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb svg { flex: none; width: calc(var(--ms) + 1px); height: calc(var(--ms) + 1px); }
.nb.g { color: var(--up); }
.nb.w { color: var(--warn); }
.nb.b { color: var(--down); }
.nb.nil { color: var(--dim); border-style: dashed; border-color: var(--line); background: none; }
.nb.nb-extra { display: none; }

/* right: V and MC, then fees and TX with the buy/sell bar */
.nc-side { grid-column: 3 / 5; grid-row: 1 / 3; display: grid; align-content: start; justify-items: end; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nc-r1, .nc-r2 { display: flex; align-items: center; gap: 10px; }
.nc-r1 > span { display: inline-flex; align-items: baseline; gap: 4px; color: var(--fg); font: 500 var(--val)/1.15 var(--sans); }
.nc-r2 > span { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); font: 500 var(--ms)/1 var(--sans); }
.nc-side em { font: 400 calc(var(--ms) - .5px)/1 var(--sans); font-style: normal; color: var(--muted); }
.nc-mc.mc-lo { color: var(--mc-low); } .nc-mc.mc-mid { color: var(--mc-mid); } .nc-mc.mc-hi { color: var(--mc-high); }
.card.nc .sol-ic { flex: none; fill: url(#n-sol) var(--fg-2); }
.nc-bar { display: inline-block; width: 26px; height: 2px; margin-left: 2px; border-radius: 1px; background: var(--down); overflow: hidden; }
.nc-bar i { display: block; height: 100%; background: var(--up); }

/* quick buy: blue text at the bottom right, filled on hover */
.card.nc > .qb.nc-qb { grid-column: 4; grid-row: 3 / 5; align-self: end; justify-self: end; height: 24px; margin: 0 -8px -2px 0; padding: 0 8px; gap: 4px; border: 0; color: var(--accent); font: 600 12.5px/1 var(--sans); }
.card.nc > .qb.nc-qb svg { width: 12px; height: 12px; }
.card.nc > .qb.nc-qb em { font-style: normal; }
.card.nc > .qb.nc-qb:hover { background: var(--accent); color: var(--accent-ink); }
.card.nc > .qb.nc-qb.q-s { height: 20px; font-size: 11px; }
.card.nc > .qb.nc-qb.q-m { height: 26px; font-size: 13.5px; }
.card.nc > .qb.nc-qb.q-m svg { width: 13px; height: 13px; }
.card.nc > .qb.nc-qb.q-u { height: 28px; margin: 0 0 -1px; padding: 0 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.card.nc > .qb.nc-qb.q-u:hover { background: var(--accent-hover); }
.qb.nc-qb:disabled { opacity: .5; cursor: progress; }
/* the shared quick-buy pill elsewhere (alerts, search, tables) keeps style.css .qb; its "SOL" unit only shows on cards */
.qb.nc-qb em { font-style: normal; }

/* Display → Extra metrics: liquidity, 5m volume, buys/sells, 5m change, and the creator / organic pills */
.nc-activity { grid-column: 2 / -1; grid-row: 5; display: none; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; padding-top: 7px; border-top: 1px dashed var(--line); font: 500 11.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.nc-activity > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nc-activity em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.nc-activity b { font-weight: 500; }
.nc-activity small { font-size: 10.5px; }
.card.nc.detail .nc-activity { display: flex; }
.card.nc.detail .nb.nb-extra { display: inline-flex; }

/* large (Pulse's default): the full terminal density, a 74px picture */
.card.nc.big { --fw: 74px; --ii: 4px; --sym: 16px; --val: calc(var(--ms) + 4px); --pill-h: 24px; grid-template-rows: 20px 20px 15px var(--pill-h); row-gap: 3px; padding: 12px 16px 9px 12px; }
.card.nc.big .nc-img { font-size: 18px; }
.card.nc.big .nc-l1 .copy svg, .card.nc.big .nc-star svg { width: 14px; height: 14px; }
.card.nc.big .nc-l2 .soc svg { width: 15px; height: 15px; }
.card.nc.big .nc-ca { font-size: 12px; }
.card.nc.big .nc-lp { min-width: 19px; height: 19px; right: -6px; bottom: -6px; font-size: 8px; }
.card.nc.big .nc-lp.ic { width: 19px; }

/* compact rows (Display → Rows → Compact, and the landing page): picture, two lines, pills */
.card.nc.cmp { --fw: 44px; --ii: 3px; --sym: 13.5px; --val: calc(var(--ms) + 1.5px); --pill-h: 20px; grid-template-rows: 18px 17px var(--pill-h); row-gap: 3px; padding: 8px 14px 8px 12px; }
.card.nc.cmp .nc-pic { grid-row: 1 / 4; }
.card.nc.cmp .nc-ca, .card.nc.cmp .nc-xh { display: none; }
.card.nc.cmp .nc-l3 { grid-row: 3; gap: 4px; }
.card.nc.cmp .nb { padding: 0 7px; font-size: calc(var(--ms) - .5px); }
.card.nc.cmp .nc-side { gap: 4px; }
.card.nc.cmp > .qb.nc-qb { grid-row: 3; }
.card.nc.cmp .nc-activity { grid-row: 4; }
.card.nc.cmp .nc-lp { min-width: 15px; height: 15px; right: -4px; bottom: -4px; font-size: 7px; padding: 0 3px; }
.card.nc.cmp .nc-lp.ic { width: 15px; padding: 0; }
.card.nc.cmp .nc-lp svg { width: 8px; height: 8px; }

/* card.js avatar() (token header, Discover, Watchlist, search, trackers): the initials sit under the picture */
.av.av-x > img { position: absolute; inset: 0; }
.av.av-x > .av-i { pointer-events: none; user-select: none; }

/* hover actions: hide coin · blacklist creator · blacklist X account, stacked down the left edge of the picture */
.card.nc > .nc-act { position: absolute; left: 3px; top: 14px; z-index: 3; display: flex; flex-direction: column; gap: 3px; opacity: 0; pointer-events: none; transition: opacity .1s; }
.card.nc:hover > .nc-act { opacity: 1; pointer-events: auto; }
.nc-act button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius); background: color-mix(in srgb, var(--panel-2) 88%, transparent); color: var(--fg-2); backdrop-filter: blur(2px); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.nc-act button svg { width: 12px; height: 12px; }
.nc-act button:hover { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); background: var(--panel-2); }
.card.nc.big > .nc-act { top: 15px; left: 2px; gap: 4px; }
.card.nc.big > .nc-act button { width: 22px; height: 22px; }
.card.nc.big > .nc-act button svg { width: 13px; height: 13px; }
.card.nc.cmp > .nc-act { top: 6px; left: 2px; gap: 2px; }
.card.nc.cmp > .nc-act button { width: 17px; height: 17px; }
.card.nc.cmp > .nc-act button svg { width: 11px; height: 11px; }
@media (hover: none) { .nc-act { display: none; } }

/* Rapid mode: instant buy / sell over the right-hand stats while hovered or selected */
.nc-rapid { position: absolute; top: 9px; bottom: 9px; right: 12px; z-index: 2; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 4px; width: 150px; }
.card.nc.rp:hover .nc-rapid, .card.nc.rp.sel .nc-rapid { display: grid; }
.card.nc.rp:hover .nc-side, .card.nc.rp.sel .nc-side, .card.nc.rp:hover > .qb, .card.nc.rp.sel > .qb { visibility: hidden; }
.nc-rapid button { min-height: 0; padding: 0; border-radius: var(--pill); font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.nc-rapid .rb { grid-column: 1 / -1; border: 0; background: var(--buy); color: var(--buy-ink); }
.nc-rapid .rb:hover { background: color-mix(in srgb, var(--buy) 86%, #fff); }
.nc-rapid .rs { border: 1px solid color-mix(in srgb, var(--sell) 45%, transparent); background: color-mix(in srgb, var(--sell) 12%, var(--panel)); color: var(--sell); font-weight: 600; }
.nc-rapid .rs:hover { background: var(--sell); color: var(--sell-ink); }
.nc-rapid button:disabled { opacity: .5; cursor: progress; }
.card.nc.cmp .nc-rapid { top: 6px; bottom: 6px; width: 140px; }

/* hidden coins shown dimmed (Display → Hidden coins → Show dimmed) */
.card.nc.blk > :not(.nc-blk) { opacity: .35; }
.nc-blk { position: absolute; right: 12px; top: 50%; z-index: 3; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 11px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--panel-2); color: var(--muted); font-size: 11.5px; }
.nc-blk button { height: 24px; padding: 0 10px; border: 0; border-radius: var(--pill); background: var(--fill); color: var(--fg); font: 600 11.5px/1 var(--sans); }
.nc-blk button:hover { background: var(--fill-2); }

/* narrow Pulse columns: MC over V on the right, so the name and the pills keep their room */
@container pucol (max-width: 480px) {
  .card.nc .nc-side { grid-row: 1 / 4; gap: 4px; }
  .card.nc .nc-r1 { flex-direction: column-reverse; align-items: flex-end; gap: 3px; }
  .card.nc .nc-r1 .nc-v { font-size: calc(var(--val) - 2.5px); }
  .card.nc > .qb.nc-qb { grid-row: 4; }
  /* the XL pill sits under three stacked stats here: 24px keeps it clear of the TX line */
  .card.nc > .qb.nc-qb.q-u { height: 24px; margin-bottom: 0; padding: 0 10px; }
  .card.nc.cmp .nc-side { grid-row: 1 / 3; }
  .card.nc.cmp .nc-r1 { flex-direction: row; align-items: baseline; gap: 7px; }
  .card.nc.cmp > .qb.nc-qb { grid-row: 3; }
  .card.nc .nb { padding: 0 5px; gap: 3px; }
}
@container pucol (max-width: 400px) {
  .card.nc .nc-side .nc-f { display: none; }
  .card.nc .nc-l2 { gap: 7px; }
  .card.nc .nc-l2 .soc { gap: 7px; }
  /* the quick buy drops its "SOL" unit (the button's title keeps it) so one more pill fits */
  .card.nc > .qb.nc-qb:not(.q-u) { margin-right: -6px; padding: 0 6px; }
  .card.nc > .qb.nc-qb:not(.q-u) em { display: none; }
}
/* tablet-width columns: the grey name would shrink to a letter or two, so only the symbol shows (as on phones) */
@container pucol (max-width: 370px) {
  .card.nc .nc-l1 .nm { display: none; }
  .card.nc .nc-l1 .sym { max-width: 100%; flex: 0 1 auto; min-width: 0; }
}

/* ---- narrower screens ---- */
@media (max-width: 1500px) {
  .pu-health span { display: none; }
  .pu-health { padding: 0 6px; }
}
@media (max-width: 1320px) {
  .pu-zero { display: none; }
  .pu-search { flex-basis: 180px; }
  .pu-lpi { gap: 0; }
  .pu-lps button { gap: 5px; padding: 0 8px; }
  .pu-lps [data-lpall] { padding: 0 10px; }
  .pu-title { gap: 10px; margin-right: 8px; }
  .card.nc.big { --fw: 66px; --ii: 3.5px; --sym: 15px; --val: calc(var(--ms) + 3px); grid-template-rows: 20px 20px 15px var(--pill-h); row-gap: 3px; padding-right: 12px; column-gap: 10px; }
  .card.nc { column-gap: 10px; }
}
@media (max-width: 1100px) {
  .pu-title { margin-right: 6px; }
  .pu-disp span, .pu-rapid span, .pu-saved span { display: none; }
  .pu-disp, .pu-rapid, .pu-saved { width: 32px; padding: 0; }
  .pu-rapid.on { width: auto; padding: 0 10px; }
  .pu-rapid.on span { display: inline; }
}
/* tablets: the three columns side by side, scrolled sideways */
@media (min-width: 761px) and (max-width: 1100px) {
  .pu-cols { grid-template-columns: repeat(3, minmax(310px, 1fr)); overflow-x: auto; }
  .pu-ch { padding-left: 12px; }
}
/* phones: tabs pick one column */
@media (max-width: 760px) {
  .pu { grid-template-rows: auto auto minmax(0, 1fr); }
  .pu-top { flex-wrap: wrap; gap: 4px; row-gap: 8px; min-height: 0; padding: 10px 12px 8px; }
  .pu-title { display: contents; }
  .pu-title h1 { margin-right: auto; font-size: 20px; }
  .pu-lps { order: 6; flex: 1 0 100%; }
  .pu-zero { display: none; }
  .pu-top > .pu-sp { display: none; }
  .pu-search { order: 5; flex: 1 1 auto; margin-right: 0; }
  .pu-health { display: none; }
  .pu-tools [data-keys], .pu-tools [data-retryimages] { display: none; }
  .pu-switch { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); }
  .pu-switch button { position: relative; flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; background: none; color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap; }
  .pu-switch button:hover { color: var(--fg); }
  .pu-switch button.on { color: var(--fg); }
  .pu-switch button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--fg); }
  .pu-switch button b { color: var(--dim); font: 500 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
  .pu-cols { grid-template-columns: minmax(0, 1fr); margin: 0; border-width: 0; border-radius: 0; }
  .pu-col { display: none; border-right: 0; }
  .pu-col.on { display: grid; }
  .pu-ch { height: 44px; padding: 0 6px 0 12px; }
  .pu-ch h2, .pu-n { display: none; } /* the tabs above already name the column and count it */
  .pu-ch .pu-sp { order: -1; }
  .pu-skc { grid-template-columns: 60px minmax(0, 1fr) 90px; gap: 10px; height: 104px; padding: 10px 12px 9px 10px; }
  .pu-skc .sk-av { width: 60px; height: 60px; }
  .pu-skc .sk-s .skel { width: 80px; }
  .card.nc, .card.nc.big { --fw: 60px; --ii: 3px; --sym: 14.5px; --val: calc(var(--ms) + 2px); --pill-h: 22px; grid-template-rows: 19px 19px 15px var(--pill-h); row-gap: 3px; column-gap: 10px; padding: 10px 12px 9px 10px; }
  .card.nc.cmp { --fw: 44px; grid-template-rows: 18px 17px var(--pill-h); --pill-h: 20px; }
  .nc-l2 { gap: 7px; }
  .nc-r1 { gap: 7px; }
  .nc-r2 { gap: 7px; }
  .nc-bar { width: 18px; }
  .nc-star { opacity: 1; }
  .nb { padding: 0 6px; gap: 3px; }
  /* the short address gets the card's left padding too, so it is never cut a second time */
  .card.nc .nc-ca, .card.nc.big .nc-ca { max-width: calc(100% + 16px); margin: 0 -8px; font-size: 11px; letter-spacing: -.1px; }
}
@media (max-width: 420px) {
  .nc-l1 .nm { display: none; }
  .nc-l1 .sym { max-width: 100%; }
  .nc-side .nc-f { display: none; }
}
@media (hover: none) { .pu-tools [data-keys] { display: none; } }

/* ---- menus (Display, keyboard) ---- */
.pu-pop { position: fixed; z-index: 55; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 110px); overflow-y: auto; display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); box-shadow: var(--shadow-lg, var(--shadow)); font-size: 12.5px; }
.pu-pop h3 { margin: 0 0 2px; font: 500 11px/1.2 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pu-pop .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--fg-2); }
.pu-pop .row.kb { grid-template-columns: 58px minmax(0, 1fr); color: var(--fg); }
.pu-pop .row.kb kbd { justify-self: start; }
.pu-pop .seg-fill .seg { background: var(--panel); }
.pu-pop .seg-fill .seg button { white-space: nowrap; }
.pu-pop input[type="range"] { width: 100%; }
.pu-pop .hint { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.toast .pu-undo { margin-left: 6px; height: 22px; padding: 0 9px; border: 0; border-radius: var(--pill); background: var(--fill); color: var(--accent); font: 600 11.5px/1 var(--sans); }
.toast .pu-undo:hover { background: var(--fill-2); }

/* ---- dialogs (filters, blacklist) ---- */
dialog.pu-dlg { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: hidden; padding: 0; }
.pu-dlg .pd { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; max-height: calc(100dvh - 34px); min-height: 0; }
.bl-dlg .pd { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }
.pd-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.pd-head h2 { margin: 0; font: 600 15px/1 var(--sans); }
.pd-head .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pd-x { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--pill); background: none; color: var(--muted); flex: none; }
.pd-x:hover { color: var(--fg); background: var(--hover); }
.pd-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pd-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap; flex: none; }
.pd-tabs button:hover { color: var(--fg); }
.pd-tabs button.on { color: var(--fg); }
.pd-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--fg); }
.pd-tabs b { min-width: 16px; padding: 2px 5px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font: 700 10px/1 var(--sans); text-align: center; }
.bl-dlg .pd-tabs b { background: var(--fill); color: var(--fg-2); }
.pd-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pd-foot .sp { flex: 1; }
.pd-foot .danger:hover { color: var(--down); }
.pd-iob svg { flex: none; }
.pd-io { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pd-io textarea, .pd-io input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--fg); font: 11.5px/1.4 var(--code); outline: 0; resize: vertical; }
.pd-io textarea:focus, .pd-io input:focus { border-color: var(--accent); }
.pd-io input { height: 34px; }
.pd-io .pf-lbl { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }

.pf-body { overflow-y: auto; min-height: 0; padding: 14px 18px 16px; display: grid; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pf-body section h3 { margin: 0 0 8px; font: 500 11px/1.2 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-body .hint { color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--muted); font: 500 12px/1 var(--sans); }
.pf-chips button i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp); opacity: .5; }
.pf-chips button:hover { color: var(--fg); border-color: var(--line-2); }
.pf-chips button.on { color: var(--sel-fg); border-color: var(--sel-line); background: var(--sel-bg); }
.pf-chips button.on i { opacity: 1; }
:root[data-theme="light"] .pu-lps button i, :root[data-theme="light"] .pf-chips button i { opacity: .9; } /* pastel launchpad dots wash out on white */
.pf-kw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-kw label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.pf-kw input, .pf-r input { height: 32px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--fg); font: 500 12.5px/1 var(--sans); outline: 0; transition: border-color .12s, box-shadow .12s; }
.pf-kw input:hover, .pf-r input:hover { border-color: var(--line-2); }
.pf-kw input:focus, .pf-r input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pf-kw input::placeholder, .pf-r input::placeholder { color: var(--dim); }
.pf-r input.bad { border-color: var(--down); }
.pf-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }
.pf-check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.pf-r { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: center; gap: 6px; }
.pf-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--fg-2); }
.pf-r span em { font-style: normal; color: var(--dim); font-size: 11px; margin-left: 5px; }
.pf-r span i { font-style: normal; color: var(--dim); margin-left: 4px; cursor: help; }
.pf-note { margin: 0; line-height: 1.5; font-size: 11.5px; }

.bl-add { display: flex; gap: 6px; padding: 12px 16px 0; }
.bl-add input, .bl-q { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--fg); font: 12px/1 var(--code); outline: 0; }
.bl-add input:focus, .bl-q:focus { border-color: var(--accent); }
.bl-add .btn { height: 34px; }
.bl-q { margin: 8px 16px 0; width: auto; height: 30px; font: 500 12px/1 var(--sans); }
.bl-list { overflow-y: auto; min-height: 120px; padding: 8px 10px 10px; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 34px auto 24px; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; border-radius: var(--radius); font-size: 12px; }
.bl-row:hover { background: var(--hover); }
.bl-row .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row .n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row a { color: var(--accent); font-size: 11.5px; }
.bl-row button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--pill); background: none; color: var(--dim); }
.bl-row button:hover { color: var(--down); background: var(--hover); }
.bl-empty, .bl-more { padding: 26px 10px; color: var(--muted); text-align: center; font-size: 12.5px; line-height: 1.5; }
.bl-more { padding: 10px; }

@media (max-width: 600px) {
  .pf-kw, .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-r { grid-template-columns: minmax(0, 1fr) 76px 76px; }
  .bl-row { grid-template-columns: minmax(0, 1fr) 34px auto 24px; }
  .bl-row .n { display: none; }
  .pd-foot .sp { flex-basis: 100%; height: 0; }
  /* Filters: Import and Export shrink to icons on the left, Reset and a wide Apply on the right, all on one row */
  .pf-dlg .pd-foot { flex-wrap: nowrap; }
  .pf-dlg .pd-foot .sp { display: none; }
  .pf-dlg .pd-iob { flex: none; width: 34px; padding: 0; }
  .pf-dlg .pd-iob span { display: none; }
  .pf-dlg .pd-foot [data-apply] { flex: 1; }
}

/* ---- hover preview ---- */
.hv-pop { position: fixed; z-index: 60; width: 300px; display: grid; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); box-shadow: var(--shadow-lg, var(--shadow)); overflow: hidden; font-size: 12px; }
.hv-img { position: relative; height: 190px; display: grid; place-items: center; background: var(--panel); border-bottom: 1px solid var(--line); }
.hv-img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.hv-img span { font: 600 34px/1 var(--sans); color: var(--line-2); }
.hv-pop.noimg .hv-img { height: 72px; }
.hv-pop.noimg .hv-img span { font-size: 20px; color: var(--muted); letter-spacing: .04em; }
.hv-b { display: grid; gap: 10px; padding: 11px 12px 12px; }
.hv-t { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.hv-t b { font: 600 14px/1.2 var(--sans); white-space: nowrap; }
.hv-t span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hv-t em { margin-left: auto; flex: none; font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--lp); }
:root[data-theme="light"] .hv-t em { color: var(--fg-2); }
.hv-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 11.5px; }
.hv-links a { color: var(--accent); }
.hv-links a:hover { text-decoration: underline; }
.hv-chart { display: grid; gap: 6px; padding: 9px 10px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--chart-bg); }
.hv-ch { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 11px; }
.hv-ch b { font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--fg); }
.hv-ch b i { font-style: normal; margin-left: 4px; }
.hv-svg { height: 78px; display: grid; place-items: center; }
.hv-svg.few { height: 36px; }
.hv-svg svg { display: block; width: 100%; }
.hv-note { color: var(--muted); font-size: 11.5px; text-align: center; }
.hv-dev { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.hv-dev a { color: var(--accent); }

/* ---- Sift look (one block, easy to undo): each column is its own panel, cards are separate tiles with a little air,
   pictures are round, the buy button is a solid pill, and a coloured dot marks each stage ---- */
.pu-cols { gap: 10px; border: 0; background: none; overflow: visible; }
.pu-col, .pu-col:last-child { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
[data-colid="new"] { --stage: var(--accent); } [data-colid="stretch"] { --stage: var(--info); } [data-colid="migrated"] { --stage: var(--up); }
.pu-ch { background: var(--panel); }
.pu-ch h2 { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.pu-ch h2::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stage, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage, var(--accent)) 22%, transparent); }
.pu-n { margin-left: 8px; padding: 3px 8px; border-radius: 99px; background: var(--panel-2); color: var(--fg-2); }
.pu-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.pu-list > .card.nc { border: 1px solid var(--line); border-radius: 10px; }
.pu-list > .card.nc:hover { background: var(--panel); border-color: color-mix(in srgb, var(--stage, var(--accent)) 45%, var(--line)); }
.card.nc > .qb.nc-qb { padding: 0 10px; margin: 0 -4px -2px 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.card.nc > .qb.nc-qb:hover { background: var(--accent-hover); color: var(--accent-ink); }