/* top20info v1.3 — light theme + cards */
.t20-wrap { background: #DEE6FC; color: #0b0f19; padding: 22px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.06); }
.t20-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.t20-title { margin: 0; font-size: clamp(20px, 2.6vw, 28px); color: #0b0f19; }
.t20-actions { display: flex; gap: 10px; align-items: center; }
.t20-btn, .t20-pill { border: 1px solid rgba(0,0,0,0.15); background: rgba(0,0,0,0.04); color: #0b0f19; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.t20-btn:hover { background: rgba(0,0,0,0.07); cursor: pointer; }

.t20-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }


.t20-card { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.t20-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.t20-rank { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.06); display: grid; place-items: center; font-weight: 800; }
.t20-logo { width: 28px; height: 28px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.t20-name { font-size: 18px; font-weight: 800; }
.t20-symbol { font-weight: 700; opacity: .8; margin-left: 6px; }
.t20-badge { font-weight: 800; font-size: 12px; border: 1px solid rgba(0,0,0,0.15); background: rgba(0,0,0,0.04); border-radius: 999px; padding: 4px 8px; }

.t20-kpis { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 680px) { .t20-kpis { grid-template-columns: repeat(4, 1fr); } }
.t20-kpi { border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; background: rgba(255,255,255,0.35); padding: 10px 12px; }
.t20-kpi .l { font-size: 12px; color: #0b0f19; }
.t20-kpi .v { margin-top: 4px; font-size: 20px; font-weight: 800; color: #0b0f19; }
.t20-max { display:block; font-size: 12px; color: #ffa500; font-weight: 800; margin-top: 2px; }

.t20-foot { margin-top: 10px; font-size: 12px; color: #0b0f19; }

@media (max-width: 560px){
  .t20-head { grid-template-columns: 1fr; }
  .t20-actions { justify-content: flex-start; margin-top: 6px; }
}