:root{
  --bg:#fafaf8;--bg2:#f3f4f5;--card:#fff;--border:#e8e7e2;
  --text:#1a2035;--text2:#4a5568;--muted:#94a3b8;
  --accent:#a224c6;--alt:#f4eff5;--apl:#f8f5f8;--adk:#7a1696;
  --cf:#b721e2;--ct:#ce2583;
  --sh:0 1px 3px #d4cad722,0 1px 2px #d4cad711;
  --shl:0 12px 24px #d4cad718,0 4px 8px #d4cad70d;
  --r:18px
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);
  color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:460px;margin:0 auto;padding:20px 14px 40px}
.hero{text-align:center;padding:28px 8px 22px}
.hero h1{font-size:23px;font-weight:800;line-height:1.3;margin-bottom:8px;
  background:linear-gradient(135deg,var(--accent),var(--adk));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:13.5px;color:var(--text2);line-height:1.55}
.badge{display:inline-flex;align-items:center;gap:4px;background:var(--apl);color:var(--adk);
  padding:6px 14px;border-radius:20px;font-size:11.5px;font-weight:600;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:22px 18px;margin-bottom:12px;text-align:center;position:relative;
  box-shadow:var(--sh);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shl);transform:translateY(-3px)}
.rank{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:var(--r)}
.rank.top{background:linear-gradient(135deg,#f59e0b,#ef4444);
  box-shadow:0 2px 8px rgba(245,158,11,.35)}
.card-logo{width:260px;height:70px;margin:8px auto 16px;border-radius:12px;
  background:var(--apl);display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid var(--border);transition:transform .2s;padding:6px 16px}
.card:hover .card-logo{transform:scale(1.03)}
.card-logo img{max-width:240px;max-height:60px;object-fit:contain}
.card-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;
  padding:14px;background:var(--bg2);border-radius:calc(var(--r) - 2px)}
.stat{display:flex;align-items:center;gap:10px;text-align:left}
.stat-icon{font-size:18px;width:28px;text-align:center;flex-shrink:0}
.stat-body{flex:1}
.stat-val{font-size:15px;font-weight:700;color:var(--text);display:block}
.stat-lbl{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.cta{display:block;width:100%;padding:14px;border:none;border-radius:calc(var(--r) - 2px);
  background:linear-gradient(135deg,var(--cf),var(--ct));
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;text-align:center;
  text-decoration:none;letter-spacing:.3px;
  transition:opacity .2s,transform .12s,box-shadow .2s;
  box-shadow:0 4px 12px #d4cad733}
.cta:hover{opacity:.93;box-shadow:0 6px 20px #d4cad744}
.cta:active{transform:scale(.97)}
.footer{text-align:center;padding:28px 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.loading{text-align:center;padding:60px 0;color:var(--muted);font-size:14px}
.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:340px){.wrap{padding:16px 10px 32px}.card{padding:16px 14px}}