/* Token cards, early pump.fun style: picture on the left, plain lines of text,
   no panel until hover. A card shakes when its market cap moves. */
#cards{gap:8px 20px}
.market-card{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 12px;align-content:start;
  padding:8px;background:none;border:1px solid transparent;
  font-size:12px;line-height:1.6;color:var(--muted);
}
.market-card:hover,.market-card:focus-within{border-color:var(--ink)}
.market-card.shake{animation:shake .45s linear;background:var(--tick,#86efac26)}
.market-card.shake.fell{--tick:#f8717126}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-3px,1px) rotate(-.6deg)}30%{transform:translate(3px,-1px) rotate(.6deg)}45%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}80%{transform:translate(-1px,0)}}
.motion-off .market-card.shake{animation:none}

.market-card>.market-avatar{grid-row:1/span 2;display:grid;place-items:center;overflow:hidden;width:104px;height:104px;background:var(--glaze);color:var(--cobalt);font-weight:900;font-size:40px}
.market-avatar img{width:100%;height:100%;object-fit:cover}
.market-body{min-width:0;display:flex;flex-direction:column}
.market-body>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.market-cap{color:var(--jade)}
.market-cap [data-change].negative{color:var(--seal)}
.market-cap .badge-curve{margin-left:6px;color:var(--cobalt)}
.market-title{white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--ink-2)}
.market-title strong{color:var(--ink);font-weight:700}
.market-card.is-loading [data-cap]{color:var(--muted)}
.market-card .curve-bar{display:block;margin:4px 0 0;font-size:0}
.market-card .curve-bar span,.market-card .curve-bar b{display:none}
.market-card .curve-bar i{display:block;height:4px;border-radius:0;background:var(--line-soft)}
.market-card .curve-bar em{border-radius:0;background:var(--jade)}
.market-card .curve-bar.is-done em{background:var(--cobalt)}
.market-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 12px}
.market-actions button,.market-actions a{color:var(--muted);font-size:12px;white-space:nowrap}
.market-actions button:hover,.market-actions a:hover{color:var(--ink)}
.market-actions a{color:var(--cobalt)}
.market-actions .save.saved{color:var(--cobalt)}
.copy-ca.copied{color:var(--jade)!important}
.overlay-metrics .copy-ca{padding:6px 9px;border:1px solid var(--line);color:var(--ink-2);font-size:12px}
.preview-change.positive{color:var(--jade)}.negative{color:var(--seal)}

/* ── Chart overlay ──────────────────────────────────── */
.market-chart-dialog{width:min(920px,calc(100vw - 28px));max-width:920px;max-height:90dvh;padding:0;overflow:hidden;border-radius:12px}
.market-chart-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line-soft);background:var(--glaze-2)}
.market-chart-dialog header small{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--cobalt)}
.market-chart-dialog h2{font-size:26px;margin:4px 0 0}
.market-chart-dialog h2 span{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);margin-left:8px}
.market-chart-dialog header button{width:38px;height:38px;border-radius:50%;background:var(--cobalt-wash);color:var(--cobalt);font-size:22px;line-height:1;transition:transform .25s var(--ease-out),background .2s,color .2s}
.market-chart-dialog header button:hover{transform:rotate(90deg);background:var(--cobalt);color:var(--on-accent)}
.overlay-metrics{display:flex;align-items:center;gap:34px;flex-wrap:wrap;padding:20px 26px;font-size:12px;color:var(--muted)}
.overlay-metrics strong{display:block;margin-top:4px;font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.overlay-metrics .copy-ca{margin-left:auto}
.overlay-chart{position:relative;height:340px;margin:0 16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--glaze-2);overflow:hidden}
.overlay-chart canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay-tooltip{position:absolute;left:10px;top:8px;margin:0;padding:6px 9px;border-radius:8px;background:#262d5cf5;color:#fff;font-size:11px;line-height:1.5;pointer-events:none}
.overlay-chart>[data-overlay-empty]{position:absolute;inset:45% 0 auto;text-align:center;color:var(--muted);font-size:14px;pointer-events:none}
.market-chart-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:18px 26px 22px}
.market-chart-dialog footer small{font-size:12px;color:var(--muted)}
.market-chart-dialog footer a{font-size:14px;font-weight:700;color:var(--cobalt);white-space:nowrap}

@media(max-width:720px){
  #cards{grid-template-columns:1fr}
  .overlay-metrics{gap:16px;padding:16px 18px}
  .overlay-metrics .copy-ca{margin-left:0}
  .overlay-chart{height:300px;margin:0 10px}
  .market-chart-dialog header{padding:18px}
  .market-chart-dialog footer{flex-direction:column;align-items:flex-start;padding:16px 18px 20px}
}