/* ============================================================
   Dexvra — shared UI: Top Movers ticker + Trending list
   Relies on CSS variables defined in each page's :root
   (--bg, --panel, --border, --cyan, --green, --red, --muted...)
   ============================================================ */

/* ---------- Top Movers ticker ---------- */
.topmovers{
  display:flex; align-items:stretch; position:relative; z-index:2;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}
.tm-label{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:0 16px; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cyan); white-space:nowrap;
  border-right:1px solid var(--border); background:rgba(45,224,216,.05);
}
.tm-label svg{filter:drop-shadow(0 0 6px rgba(45,224,216,.6))}
.tm-viewport{flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tm-track{display:flex; width:max-content; animation:tm-marquee 46s linear infinite}
.topmovers:hover .tm-track{animation-play-state:paused}
@keyframes tm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tm-item{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 16px; border-right:1px solid var(--border);
  font-size:12.5px; text-decoration:none; color:var(--text); transition:background .15s;
}
.tm-item:hover{background:rgba(45,224,216,.06)}
.tm-item .rank{color:var(--muted-2); font-weight:700; font-size:11.5px}
.tm-item img{width:19px; height:19px; border-radius:50%; object-fit:cover; background:#0e2a30; flex:none}
.tm-item .tk{font-weight:700}
.tm-item .pct{color:var(--green); font-weight:800}

/* ---------- Trending list (homepage) ---------- */
.trending-head{display:flex; align-items:baseline; gap:12px; margin:26px 0 4px}
.trending-head h1{font-size:30px; font-weight:900; letter-spacing:-.03em; margin:0}
.trending-head .live{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800;
  color:var(--green); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.28);
  padding:5px 10px; border-radius:999px; letter-spacing:.04em;
}
.trending-head .live b{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:tm-pulse 1.6s infinite}
@keyframes tm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.trending-sub{color:var(--muted); font-size:13.5px; margin:0 0 20px}

.trending-wrap{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; margin-bottom:48px;
}
.tr-colhead,.tr-row{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:34px 44px minmax(0,1.6fr) minmax(0,1.4fr) 86px 120px 78px;
  padding:13px 20px;
}
.tr-colhead{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); border-bottom:1px solid var(--border);
}
.tr-row{border-bottom:1px solid rgba(255,255,255,.045); text-decoration:none; color:var(--text); transition:background .14s}
.tr-row:last-child{border-bottom:none}
.tr-row:hover{background:rgba(45,224,216,.04)}
.tr-rank{color:var(--muted-2); font-weight:800; font-size:14px; text-align:center}
.tr-img{width:38px; height:38px; border-radius:50%; object-fit:cover; background:#0e2a30; border:1px solid var(--border)}
.tr-id{display:flex; flex-direction:column; min-width:0}
.tr-name{font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr-sym{color:var(--muted-2); font-size:12px; margin-top:2px}
.tr-bar{height:8px; border-radius:999px; background:rgba(244,63,94,.18); overflow:hidden; border:1px solid var(--border)}
.tr-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green),var(--cyan)); box-shadow:0 0 12px rgba(52,211,153,.45)}
.tr-pct{color:var(--green); font-weight:800; font-size:13.5px; text-align:right}
.tr-votes{color:var(--muted); font-size:12.5px; font-family:ui-monospace,Menlo,monospace; text-align:right; white-space:nowrap}
.tr-cta{
  justify-self:end; font-size:12.5px; font-weight:800; color:var(--cyan-ink);
  background:linear-gradient(120deg,var(--cyan),var(--cyan-2)); padding:8px 15px; border-radius:9px;
}
.tr-row:hover .tr-cta{filter:brightness(1.07)}

.tr-empty{padding:40px 24px; text-align:center; color:var(--muted); font-size:14px}
.tr-empty a{color:var(--cyan); text-decoration:none; font-weight:700}

@media (max-width:820px){
  .tr-colhead{display:none}
  .tr-row{grid-template-columns:30px 40px minmax(0,1fr) 66px; row-gap:8px; padding:13px 16px}
  .tr-bar,.tr-votes{display:none}
  .tr-pct{grid-column:4; text-align:right}
  .tr-cta{grid-column:1 / -1; justify-self:start}
}

/* ---------- Search live dropdown ---------- */
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--panel-hi,#171c27); border:1px solid var(--border-hi);
  border-radius:12px; overflow:hidden; box-shadow:0 20px 48px -18px rgba(0,0,0,.85);
}
.sr-item{
  display:flex; align-items:center; gap:10px; padding:9px 11px; text-decoration:none;
  color:var(--text); border-bottom:1px solid rgba(255,255,255,.045); transition:background .12s;
}
.sr-item:last-child{border-bottom:none}
.sr-item:hover,.sr-item.active{background:rgba(45,224,216,.09)}
.sr-item img{width:27px; height:27px; border-radius:50%; object-fit:cover; background:#0e2a30; border:1px solid var(--border); flex:none}
.sr-id{display:flex; flex-direction:column; min-width:0; flex:1}
.sr-name{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sr-sym{color:var(--muted-2); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sr-pct{color:var(--green); font-weight:800; font-size:12px; flex:none}
.sr-empty{padding:13px; color:var(--muted-2); font-size:12.5px; text-align:center}