/* =====================================================================
   ui2, familia e-atualizacoes: Ultimas atualizacoes (/changelog/), Itens
   novos (/atualizacoes/), Mais baixados (/mais-baixados/) e Estatisticas
   (/estatisticas/). Mockups: atualizacoes.html, populares.html e
   e-atualizacoes-estatisticas.html. So tokens: cor, raio e sombra saem do
   tokens.css; nenhum hex novo.
   ===================================================================== */

/* ---------- selo de cor por tipo (plugin, tema, extras) ---------- */
/* contorno na cor do tipo: nao se confunde com as pilulas cheias (UAU, Desbloqueado) */
/* selo do tipo: as MESMAS cores da busca (busca.css, .up-busca-ico--*; Marcus, 13/10/2026):
   fundo da cor a 14%, icone na cor da busca; o texto num tom mais escuro da mesma cor, para
   passar de 4,5:1 (o coral e o verde da busca dao 2,9 e 3,1 em texto pequeno) */
.e-tipo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.e-tipo .i { width: 12px; height: 12px; }
.e-tipo--plugin { background: rgba(242,114,106,.14); color: #b73c35; }
.e-tipo--plugin .i { color: #e5625a; }
.e-tipo--tema { background: rgba(79,90,117,.14); color: #4f5a75; }
.e-tipo--extras { background: rgba(31,154,98,.14); color: #147a4b; }
.e-tipo--extras .i { color: #1f9a62; }

/* =====================================================================
   ULTIMAS ATUALIZACOES / ITENS NOVOS (atualizacoes.html)
   ===================================================================== */
/* faixa baixa (pedido do Marcus, 11/10): a do componente (up_ui2_faixa_pagina)
   empurrava a lista para ~740 px em 1440x800. Aqui, so nestas duas paginas
   (classe do <body>), titulo e lead a esquerda, as fichas a direita na altura do
   titulo, menos respiro e titulo menor. Abaixo de 1100 px as fichas descem. */
:is(.ui2-changelog, .ui2-atualizacoes) .band { padding: 20px 0 22px; }
:is(.ui2-changelog, .ui2-atualizacoes) .band > .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center;
  grid-template-areas: "crumbs crumbs" "title chips" "lead lead";
}
:is(.ui2-changelog, .ui2-atualizacoes) .band .crumbs { grid-area: crumbs; margin-bottom: 8px; }
:is(.ui2-changelog, .ui2-atualizacoes) .band h1 { grid-area: title; font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; }
:is(.ui2-changelog, .ui2-atualizacoes) .band-lead { grid-area: lead; margin-top: 5px; font-size: var(--fs-body); max-width: none; }
:is(.ui2-changelog, .ui2-atualizacoes) .band .chips { grid-area: chips; margin-top: 0; gap: 8px; justify-content: flex-end; }
:is(.ui2-changelog, .ui2-atualizacoes) .band .chip { padding: 6px 12px; font-size: var(--fs-xs); gap: 7px; }
:is(.ui2-changelog, .ui2-atualizacoes) .band .chip .i { width: 14px; height: 14px; }
.upd-sec { padding-top: 20px; }
.upd-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 14px 18px; }
.upd-bar-top .tabs > a { display: inline-flex; align-items: center; gap: 7px; }
.upd-bar-top .tabs .i { width: 15px; height: 15px; }
.upd-filter { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.upd-filter .select { width: 240px; height: 42px; }
/* modal de filtros por categoria: o botao no lugar do select, as fichas embaixo */
.upd-bar-top .fx-abrir { height: 42px; }
.upd-bar-fx { padding: 0 18px 12px; }
.upd-bar-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--surface-2); border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-card) var(--r-card); font-size: var(--fs-sm); color: var(--text);
}
.upd-bar-meta b { color: var(--ink); font-weight: 600; }
.upd-bar-meta .nw { white-space: nowrap; }
.pager--mini { gap: 6px; }
.pager--mini a, .pager--mini span { min-width: 32px; height: 32px; padding: 0 8px; font-size: var(--fs-xs); }

/* lista: uma linha larga por item */
.ulist { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.urow {
  display: grid; align-items: center; gap: 22px;
  grid-template-columns: 228px minmax(0, 1fr) 250px auto;
  grid-template-areas: "media main mid cta";
  padding: 12px 22px 12px 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.urow:hover { box-shadow: var(--sh-hover); }
.urow-media { grid-area: media; display: block; }
.urow-media .thumb { border-radius: var(--r-thumb); border: 1px solid var(--line-soft); } /* borda das capas de Compras avulsas (Marcus, 14/10/2026) */
.urow .thumb b { font-size: 1.45rem; }
.urow .thumb small { display: none; }
.urow-main { grid-area: main; min-width: 0; }
.urow-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
/* "Nota de ativacao": amarelo da caixa "Instrucoes do item" da ficha, para onde leva (17/10/2026) */
.urow-ativ { background: #fff1b3; color: #6e4f00; text-decoration: none; }
.urow-ativ:hover { background: #ffe680; color: #5a4000; }
.urow-title { font-size: 1.05rem; line-height: 1.3; font-weight: 700; } /* 700, nao os 800 do h3 (pedido do Marcus, 12/10/2026) */
.urow-title a { transition: color .2s ease; }
.urow-title a:hover { color: var(--accent); }
.urow-title .num { white-space: nowrap; }
.urow-desc {
  margin-top: 5px; font-size: var(--fs-xs); line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* bloco do meio: quando, quem, pagina de vendas e changelog */
.urow-mid {
  grid-area: mid; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  padding: 10px 14px 12px; font-size: var(--fs-xs);
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.urow-when, .urow-dev { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.urow-when { color: var(--green); font-weight: 600; }
.urow-when.is-old { color: var(--text); }
/* adicao (item novo, ainda na versao de entrada) em laranja, o mesmo do selo "Novo" (Marcus, 15/10/2026) */
.urow-when--add:not(.is-old) { color: var(--amber); }
/* bolha com a data e a hora exatas, no hover e no foco do teclado */
.urow-when.has-tip { position: relative; cursor: help; }
.urow-when.has-tip .urow-when-label { text-decoration: underline dotted; text-underline-offset: 3px; }
.urow-when.has-tip::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--plum); color: var(--on-dark); box-shadow: var(--sh-card);
  font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .2s, transform .2s, visibility .2s;
}
.urow-when.has-tip:hover::after, .urow-when.has-tip:focus-visible::after { opacity: 1; visibility: visible; transform: none; }
.urow-when.has-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 480px) { .urow-when.has-tip::after { white-space: normal; min-width: 180px; } }
.urow-dev { color: var(--muted); }
.urow-dev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.urow-dev { text-decoration: none; transition: color .2s ease; }
a.urow-dev:hover, a.urow-dev:focus-visible { color: var(--accent-ink); }
a.urow-dev:hover span, a.urow-dev:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.urow-when .i, .urow-dev .i { width: 14px; height: 14px; }
.urow-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.urow-acts .btn { height: 30px; padding: 0 11px; font-size: 12px; gap: 6px; }
.urow-acts .btn .i { width: 14px; height: 14px; }
/* Opcao B aprovada: categoria sob a descricao e preview junto ao autor/data. */
.urow-category { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.urow-category a { color: var(--accent-ink); font-weight: 600; }
.urow-category a:hover { text-decoration: underline; text-underline-offset: 3px; }
.urow-acts .urow-preview { height: 32px; background: var(--surface); }
.urow-acts .urow-preview:hover { background: var(--surface-2); border-color: var(--line); box-shadow: none; transform: none; }
.urow-acts .urow-preview:hover .i--fora { transform: none; }
.urow:has(.urow-preview:hover) { box-shadow: var(--sh-card); }

/* Barra D aprovada: 40px, degrade da marca e toggle com retorno somente por seta. */
body.up-demo { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.up-demo-bar { height: 40px; min-height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--grad-brand); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.14); flex: none; }
.up-demo-brand { flex: none; display: flex; align-items: center; }
.up-demo-brand img { width: 112px; height: 27px; object-fit: contain; }
.up-demo-item { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11px/1.4 var(--font-display); }
.up-demo-actions { display: flex; align-items: center; flex: none; gap: 6px; }
.up-demo-link, .up-demo-dl { height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border-radius: var(--r-pill); font: 600 10px/1 var(--font-display); white-space: nowrap; }
.up-demo-link { border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.03); }
.up-demo-link:hover, .up-demo-collapse:hover { background: rgba(255,255,255,.13); }
.up-demo-dl { border: 1px solid transparent; background: var(--surface); color: var(--accent-ink); }
.up-demo-dl:hover { background: var(--surface-2); }
.up-demo-actions svg, .up-demo-restore svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.up-demo-collapse, .up-demo-restore { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--on-dark); cursor: pointer; }
.up-demo-collapse { width: 27px; height: 27px; margin-left: 3px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.03); }
.up-demo-restore { position: fixed; z-index: 10; right: 16px; top: 0; width: 30px; height: 25px; border: 1px solid rgba(255,255,255,.26); border-top: 0; border-radius: 0 0 8px 8px; background: var(--grad-brand); box-shadow: var(--sh-card); }
.up-demo-restore svg { width: 15px; height: 15px; }
.up-demo-bar :focus-visible, .up-demo-restore:focus-visible { outline-color: var(--on-dark); }
.up-demo-frame { display: block; width: 100%; min-height: 0; flex: 1; border: 0; background: var(--surface); }
.up-demo-empty { width: 100%; max-width: 680px; margin: 70px auto; padding: 24px; text-align: center; }
.up-demo-empty h1 { font-size: 26px; }
.up-demo-empty p { margin: 16px 0 22px; }
@media (max-width: 700px) {
  .up-demo-bar { gap: 8px; padding: 0 8px; justify-content: space-between; }
  .up-demo-brand img { width: 84px; height: 25px; }
  .up-demo-item { display: none; }
  .up-demo-actions { gap: 4px; }
  .up-demo-link, .up-demo-dl { padding: 0 7px; gap: 4px; font-size: 9px; }
  .up-demo-back { width: 26px; padding: 0; }
  .up-demo-back span { display: none; }
  .up-demo-actions svg { width: 12px; height: 12px; }
  .up-demo-collapse { width: 25px; height: 25px; margin-left: 0; }
}
@media (max-width: 380px) { .up-demo-external { width: 26px; padding: 0; } .up-demo-external span { display: none; } }
/* Download (o do /changelog/ de hoje) + seletor Instalavel / Pacote completo */
.urow-cta { grid-area: cta; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 148px; }
.urow-dl { width: 100%; }
.urow-dl .i-ok { display: none; }
.urow-dl.is-done { background: var(--green-soft); color: var(--green); box-shadow: none; }
.urow-dl.is-done:hover { background: var(--green-soft); border-color: var(--green); }
.urow-dl.is-done .i-dl { display: none; }
.urow-dl.is-done .i-ok { display: inline-block; }
.urow-dl.is-loading { cursor: progress; }
.urow-dl.is-loading .i-dl { display: none; }
/* 17/10/2026: o spinner TROCA o icone e o texto do botao nao muda (igual a ficha do item) */
.urow-dl.is-loading::before { content: ""; flex: none; box-sizing: border-box; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .9; animation: eatu-gira .8s linear infinite; }
.ulist.is-wait .urow-dl:not(.is-loading) { opacity: .55; pointer-events: none; }
@keyframes eatu-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .urow-dl.is-loading::before { animation-duration: 2s; } }
.urow-dl-opts { display: flex; flex-direction: column; gap: 3px; padding-left: 4px; font-size: var(--fs-xs); }
.urow-dl-opt { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text); line-height: 1.35; }
.urow-dl-opt input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.urow-dl-opt input:checked + span { color: var(--ink); font-weight: 600; }
.ulist.is-wait .urow-dl-opt { cursor: progress; }
.upd-pager { margin-top: 34px; }
.upd-vazio { margin-top: 16px; padding: 28px; text-align: center; color: var(--muted); }

@media (max-width: 1100px) {
  :is(.ui2-changelog, .ui2-atualizacoes) .band > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "title" "lead" "chips"; }
  :is(.ui2-changelog, .ui2-atualizacoes) .band .chips { justify-content: flex-start; margin-top: 12px; }
  .urow {
    grid-template-columns: 120px minmax(0, 1fr) 236px;
    grid-template-areas: "media main mid" "media main cta";
    gap: 10px 20px;
  }
  .urow-dl-opts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-left: 0; }
}
@media (max-width: 760px) {
  .urow {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "media main" "mid mid" "cta cta";
    gap: 12px 14px; padding: 12px;
  }
  .urow-mid { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .urow-acts { flex-basis: 100%; margin-top: 4px; }
  .urow-dl { height: 42px; }
}
@media (max-width: 640px) {
  :is(.ui2-changelog, .ui2-atualizacoes) .band { padding: 14px 0 16px; }
  :is(.ui2-changelog, .ui2-atualizacoes) .band .crumbs { margin-bottom: 6px; }
  :is(.ui2-changelog, .ui2-atualizacoes) .band-lead { font-size: var(--fs-sm); line-height: 1.5; }
  /* fichas compactas: duas linhas em 390 nos 3 idiomas (eram tres) */
  :is(.ui2-changelog, .ui2-atualizacoes) .band .chips { gap: 5px 4px; margin-top: 10px; }
  :is(.ui2-changelog, .ui2-atualizacoes) .band .chip { padding: 4px 9px; font-size: 11px; gap: 5px; }
  :is(.ui2-changelog, .ui2-atualizacoes) .band .chip .i { width: 12px; height: 12px; }
  .upd-sec { padding-top: 14px; }
  .upd-bar-top { padding: 12px; }
  .upd-bar-top .tabs { width: 100%; flex-wrap: nowrap; }
  /* duas colunas estaveis que ENCOLHEM: base 0 + min-width 0 (o auto do flex
     nao deixa o item ficar menor que o texto) e quebra natural do rotulo.
     Em /es/ a 320px, "Ultimas actualizaciones" + "Productos nuevos" em uma
     linha estouravam o viewport em 8px (UI2-09, QA de 13/10/2026). */
  .upd-bar-top .tabs > a { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 10px; white-space: normal; text-align: center; line-height: 1.25; }
  .upd-bar-top .tabs > a .i { display: none; }
  .upd-filter { width: 100%; }
  .upd-filter .select { width: auto; flex: 1; min-width: 0; }
  .upd-bar-top .fx-abrir { width: 100%; }
  .upd-bar-top .fx-abrir .fx-abrir-r { flex: 1; text-align: left; max-width: none; }
  .upd-bar-fx { padding: 0 12px 10px; }
  .upd-bar-meta { justify-content: center; text-align: center; padding: 10px 12px; }
  .urow-desc { display: none; }
  .urow-title { font-size: .98rem; }
  .upd-pager .is-far { display: none; }
}
@media (max-width: 360px) {
  .upd-bar-top .tabs > a { padding-inline: 8px; font-size: 12px; }
  .urow { grid-template-columns: 80px minmax(0, 1fr); }
}

/* =====================================================================
   MAIS BAIXADOS (populares.html)
   ===================================================================== */
.pop-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pop-ctl > span { font-size: var(--fs-sm); color: var(--muted); }
.pop-ctl .seg > a { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.pop-ctl .seg > a:not(.is-on):hover { color: var(--ink); }
.band .chips .chip b { color: var(--ink); }

.pop-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pop-top { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.pop-top--1 { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%); }
.pop-med { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); border: var(--bd); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.pop-med b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); font-size: 11px; color: var(--th-fg); }
/* medalhas: ouro, prata e bronze com as rampas da propria paleta (th6, th3, th4) */
.pop-med--1 b { background: var(--th6); color: var(--on-dark); } /* o --th6 escureceu na 1.217.0: branco a 4,54:1 (escuro caiu para 3,41:1) */
.pop-med--2 b { background: var(--th3); }
.pop-med--3 b { background: linear-gradient(135deg, #6f3f54 0%, #9a5a3a 100%); } /* bronze sem o laranja claro do --th4: branco a 5,39:1 ou mais (era ~3,2:1; revisao geral de 12/10/2026) */
.pop-top-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; }
.pop-top-item .thumb, .pop-thumb { border-radius: var(--r-sm); border: 1px solid var(--line-soft); } /* borda das capas, igual as outras paginas (Marcus, 17/10/2026) */
.pop-top-item .thumb--img.thumb--v2, .pop-thumb.thumb--img.thumb--v2 { aspect-ratio: 16 / 10; } /* capas mais altas que o 590x300 (pedido do Marcus, 17/10/2026) */
.pop-top-item .thumb b, .pop-thumb b { font-size: 1.2rem; }
.pop-top-item .thumb small, .pop-thumb small { display: none; }
.pop-name { display: block; font: 700 1.05rem/1.25 var(--font-display); color: var(--ink); transition: color .2s ease; overflow-wrap: anywhere; }
.pop-name:hover { color: var(--accent); }
.pop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.pop-count { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: var(--fs-sm); }
.pop-count .i { width: 17px; height: 17px; color: var(--accent); align-self: center; }
.pop-count b { font: var(--h-w) 1.6rem/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.pop-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.pop-bar { position: relative; display: block; flex: 1; height: 7px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.pop-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--accent); }

.pop-list { margin-top: 22px; }
.pop-list .card-hd p { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-top: 2px; }
.pop-row { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr) minmax(120px, 280px) 150px auto; gap: 18px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line-soft); }
.pop-list .card-hd + .pop-row { border-top: 0; }
.pop-rank { font: 700 1rem/1 var(--font-display); color: var(--muted); text-align: center; }
.pop-main { min-width: 0; }
.pop-main .pop-name { font-size: .98rem; }
.pop-n { text-align: right; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.pop-n b { font: 700 1.05rem/1 var(--font-display); color: var(--ink); margin-right: 4px; }
.pop-note { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted); max-width: 90ch; }
.pop-vazio { padding: 34px 24px; text-align: center; color: var(--muted); }

@media (max-width: 1100px) {
  .pop-podium { grid-template-columns: minmax(0, 1fr); }
  .pop-row { grid-template-columns: 30px 84px minmax(0, 1fr) 130px auto; }
  .pop-row > .pop-bar { display: none; }
}
@media (max-width: 640px) {
  .pop-row { grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .pop-row > .btn { display: none; }
  .pop-n { grid-column: 3 / 5; text-align: left; }
  .pop-top-item { grid-template-columns: 96px minmax(0, 1fr); }
  .pop-list .card-hd { flex-wrap: wrap; padding: 14px 16px; }
  .pop-ctl { gap: 8px; }
  .pop-ctl > span { flex-basis: 100%; }
  .pop-ctl .seg { display: flex; width: 100%; }
  .pop-ctl .seg > a { flex: 1 1 0; text-align: center; white-space: nowrap; padding-inline: 8px; }
}

/* =====================================================================
   ESTATISTICAS (e-atualizacoes-estatisticas.html)
   ===================================================================== */
/* ladrilhos do catalogo: icone duotom por tipo, numero, parte do total */
.est-kpis { gap: 16px; }
.est-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; transition: transform .2s ease, box-shadow .2s ease; }
a.est-kpi:hover { transform: translateY(var(--lift)); box-shadow: var(--sh-hover); }
.est-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); margin-bottom: 6px; }
.est-ico .i { width: 21px; height: 21px; }
.est-kpi--tema .est-ico, .est-ico--tema { background: var(--surface-3); color: var(--brand-slate); }
.est-kpi--plugin .est-ico, .est-ico--plugin { background: var(--accent-soft); color: var(--accent); }
.est-kpi--extras .est-ico, .est-ico--extras { background: var(--amber-soft); color: var(--amber); }
.est-kpi--uau .est-ico, .est-ico--uau { background: var(--green-soft); color: var(--green); }
.est-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.est-val { font: var(--h-w) 2rem/1.05 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.est-kpi .meter { margin-top: 6px; height: 6px; }
.est-kpi--tema .meter > i { background: var(--brand-slate); }
.est-kpi--plugin .meter > i { background: var(--accent); }
.est-kpi--extras .meter > i { background: var(--amber); }
.est-sub { margin-top: auto; padding-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.est-sub b { color: var(--ink); font-weight: 600; }
/* o total sai na faixa do gradiente da marca */
.est-kpi--total { background: var(--grad-brand); border-color: transparent; color: var(--on-dark); box-shadow: var(--sh-pop); }
.est-kpi--total .est-ico { background: var(--nav-hover); color: var(--on-dark); }
.est-kpi--total .est-lbl, .est-kpi--total .est-sub { color: var(--on-dark); opacity: .82; }
.est-kpi--total .est-val, .est-kpi--total .est-sub b { color: var(--on-dark); }

/* grafico de downloads por dia + numeros do Auto Updater */
.est-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: stretch; }
.est-chart { padding: 20px 22px 18px; display: flex; flex-direction: column; min-width: 0; }
.est-chart-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.est-chart-hd h3 { font-size: 1.05rem; }
.est-chart-hd p { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.est-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text); }
.est-legend span { display: inline-flex; align-items: center; gap: 6px; }
.est-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.est-legend .is-uau i { background: var(--brand-slate); }
.est-bars { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 8px; align-items: end; flex: 1; min-height: 210px; }
.est-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
.est-col b { font: 700 10.5px/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.est-bar { display: block; width: 100%; max-width: 34px; height: calc(var(--h, 0) * 170px); min-height: 3px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, var(--brand-slate) 0 var(--u, 0%), var(--accent) var(--u, 0%) 100%); }
.est-col.is-hoje .est-bar { opacity: .55; }
.est-col small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.est-col.is-hoje small { color: var(--accent); font-weight: 700; }
.est-chart-ft { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--muted); }
.est-chart-ft b { color: var(--ink); }

.est-side { display: grid; gap: 14px; align-content: start; }
.est-facts { padding: 6px 0; }
.est-facts h3 { display: flex; align-items: center; gap: 10px; padding: 12px 20px 8px; font-size: 1rem; }
.est-facts h3 .est-ico { width: 32px; height: 32px; margin: 0; }
.est-facts h3 .est-ico .i { width: 17px; height: 17px; }
.est-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text); }
.est-fact b { font: 700 1.15rem/1 var(--font-display); color: var(--ink); }

/* mais baixados: tres colunas (hoje, mes, total) */
.est-tops { gap: 18px; }
.est-top { display: flex; flex-direction: column; min-width: 0; }
.est-top .card-hd h3 .i { width: 18px; height: 18px; color: var(--accent); }
.est-top .card-hd small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.est-top ol { list-style: none; margin: 0; padding: 6px 0; }
.est-top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 20px; }
.est-top li > span { font: 700 .85rem/1 var(--font-display); color: var(--muted); text-align: center; }
.est-top li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); transition: color .2s ease; }
.est-top li a:hover { color: var(--accent); }
.est-top li b { font: 700 .92rem/1 var(--font-display); color: var(--ink); }
.est-top li .pop-bar { grid-column: 2 / 4; height: 4px; }
.est-top .card-ft { margin-top: auto; }
.est-top .card-ft a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.est-top .card-ft .i { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .est-tops { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .est-kpis.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .est-kpi { padding: 14px; }
  .est-val { font-size: 1.5rem; }
  .est-side { grid-template-columns: minmax(0, 1fr); }
  .est-chart { padding: 16px 14px 14px; }
  .est-bars { gap: 4px; min-height: 170px; }
  .est-bar { height: calc(var(--h, 0) * 130px); }
  .est-col b { display: none; }
  .est-col:nth-last-child(even) small { visibility: hidden; }
  .est-col small { font-size: 9.5px; }
}

/* "So meus itens" (12/10/2026): interruptor ao lado das abas, como o "Only my products"
   do GPL Times. E um link (funciona sem JS) com papel de switch. */
.upd-meus { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 10px; border: var(--bd); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: border-color .2s ease, background .2s ease; }
.upd-meus:hover { border-color: var(--accent); color: var(--ink); }
.upd-meus-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 20px; background: var(--surface-3); transition: background .2s ease; }
.upd-meus-sw i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.upd-meus.is-on { border-color: var(--accent); background: var(--accent-soft); }
.upd-meus.is-on .upd-meus-sw { background: var(--accent); }
.upd-meus.is-on .upd-meus-sw i { transform: translateX(14px); }
.upd-bar-fx .fx-fichas + .fx-fichas { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .upd-meus-sw, .upd-meus-sw i { transition: none; } }