*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#07111b;color:#eaf5ff}.topbar{height:76px;padding:0 6%;display:flex;align-items:center;background:linear-gradient(145deg,#0b2945,#8caabd);box-shadow:0 8px 30px #0008}.brand{display:flex;gap:14px;align-items:center;font-weight:900;font-size:22px}.brand img{width:48px;height:48px;object-fit:contain;border-radius:12px}.hero{padding:70px 6%;background:radial-gradient(circle at 80% 20%,#4d94c455,transparent 35%),linear-gradient(145deg,#081624,#193b58)}.eyebrow{font-size:12px;letter-spacing:3px;color:#a9d7ef}.hero h1{font-size:clamp(34px,6vw,66px);margin:12px 0}.hero p{color:#b8cbd8;font-size:18px}.search{margin-top:20px;width:min(650px,100%);padding:18px 20px;border-radius:16px;border:1px solid #ffffff22;background:#06111dcc;color:white;font-size:16px}.container{padding:42px 6%}.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.section-head span{color:#9eb6c6}.rank{margin-bottom:42px}

/* ===== RANKING COM MEDALHAS (SEM BRANCO) ===== */
.rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px}
.rank-item{padding:16px;border-radius:15px;background:linear-gradient(145deg,#183b55,#0a1722);border:1px solid #ffffff12;display:flex;align-items:center;gap:12px}
.rank-item .medal{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.rank-item .medal.gold{background:#ffd700;color:#07111b}
.rank-item .medal.silver{background:#c0c0c0;color:#07111b}
.rank-item .medal.bronze{background:#cd7f32;color:#fff}
.rank-item .medal.number{background:#0b2945;color:#91d3ed;font-size:14px}
.rank-item .info{flex:1;min-width:0}
.rank-item .info .name{display:block;font-weight:bold;color:#eaf5ff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-item .info .downloads{font-size:13px;color:#91b1c2}
.rank-item .info .downloads strong{color:#91d3ed}

/* ===== GRID DE APPS (SEM BRANCO) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin-top:24px}
.app-card{background:linear-gradient(145deg,#12283a,#07131f);border:1px solid #9bc7df2a;border-radius:22px;overflow:hidden;box-shadow:0 12px 35px #0008;transition:transform .3s,box-shadow .3s}
.app-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px #0008}

/* ===== CARROSSEL ===== */
.carousel{position:relative;overflow:hidden;background:#09131e}
.slides{display:flex;transition:transform .45s ease}
.slides img{min-width:100%;width:100%;aspect-ratio:1/1;object-fit:cover}
.prev,.next{position:absolute;top:45%;border:0;border-radius:50%;width:38px;height:38px;background:#07111bcc;color:#fff;font-size:30px;line-height:30px;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.prev{left:10px}.next{right:10px}
.prev:hover,.next:hover{background:#0b2945}
.dots{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:2}
.dots i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffffff77;margin:3px;cursor:pointer}
.dots i.on{background:#fff;width:20px;border-radius:4px}

/* ===== BADGE DE DESTAQUE ===== */
.featured-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#ffd700,#f0a500);color:#07111b;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;z-index:3;box-shadow:0 2px 8px rgba(255,215,0,0.3)}

/* ===== CORPO DO CARD ===== */
.app-body{padding:18px}
.tag{font-size:11px;color:#9ed8f5;display:inline-block;background:#0b2945;padding:2px 10px;border-radius:12px}
.app-body h3{margin:8px 0;color:#eaf5ff}
.app-body p{color:#9fb2c0;min-height:42px;font-size:14px;line-height:1.5}
.meta{display:flex;justify-content:space-between;color:#8ea6b5;font-size:12px;margin:14px 0}
.codebox{padding:11px 13px;border-radius:11px;background:#07111b;border:1px solid #8dc5df44;margin:12px 0}
.codebox span{display:block;font-size:9px;color:#8daab9;letter-spacing:1px}
.codebox strong{font-size:20px;letter-spacing:2px;color:#eaf5ff}
.download{display:block;text-align:center;text-decoration:none;color:#07111b;font-weight:900;padding:13px;border-radius:12px;background:linear-gradient(135deg,#8dc5df,#d3e4eb);transition:all .3s}
.download:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(141,197,223,0.3)}

/* ===== ESTADO VAZIO ===== */
.empty-state{text-align:center;padding:60px 20px;color:#8fa5b3;grid-column:1/-1}
.empty-state .icon{font-size:48px;margin-bottom:16px}
.empty-state h3{color:#eaf5ff}

/* ===== FOOTER ===== */
footer{text-align:center;padding:30px;color:#7891a1;border-top:1px solid #ffffff10}

/* ===== RESPONSIVO ===== */
@media(max-width:900px){.rank-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rank-grid{grid-template-columns:1fr 1fr}.hero{padding:45px 6%}.grid{grid-template-columns:1fr;gap:16px}.app-card .carousel{height:180px}}