/* ================= APP DO DONO — visual V2 (body.app) =================
   O mesmo mundo da vitrine V2 ("noite de estádio"): verde-quase-preto, verde só pra ação/estado, dourado pro raro,
   seleção sem cartão com a cor da bandeira (css/team-colors.css), número grande na figurinha, resposta de toque discreta.
   Carrega depois de css/style.css e só ajusta aparência — nenhuma regra de layout do app (gaveta, tabbar, views) muda de lugar. */

/* ---------- tokens (escuro é a referência; claro herda os de sempre) ---------- */
:root[data-theme="dark"] body.app{
  --ground:#0a0e0d; --ground-2:#0f1513;
  --surface:#111816; --surface-2:#172120; --surface-3:#202b28;
  --border:#22302b; --border-2:#33443d;
  --muted:#8b9a92;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] body.app{
    --ground:#0a0e0d; --ground-2:#0f1513;
    --surface:#111816; --surface-2:#172120; --surface-3:#202b28;
    --border:#22302b; --border-2:#33443d;
    --muted:#8b9a92;
  }
}
body.app{--app-ease:cubic-bezier(.23,1,.32,1);scrollbar-color:var(--border-2) transparent;scrollbar-width:thin;text-wrap:pretty}
body.app ::selection{background:var(--accent);color:var(--accent-ink)}
body.app input,body.app textarea{caret-color:var(--accent)}
body.app h2,body.app h3{text-wrap:balance}
body.app .pr,body.app .tct,body.app .counter,body.app .card-meta,body.app .badge{font-variant-numeric:tabular-nums}
body.app :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---------- topo e navegação ---------- */
body.app .topbar{border-bottom:1px solid var(--border)}
body.app .icon-btn{background:transparent;border-color:var(--border-2);color:var(--text-soft);transition:transform .16s var(--app-ease),background-color .16s,border-color .16s}
@media (hover:hover){body.app .icon-btn:hover{background:var(--surface-2)}}
body.app .icon-btn:active{transform:scale(.95)}
body.app .dn-item.active::before{width:2px}
body.app .tabbar{background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
body.app .tab{transition:color .16s,transform .16s var(--app-ease)}
body.app .tab:active{transform:scale(.95)}

/* ---------- títulos de tela: à esquerda, com peso (igual ao hero da vitrine) ---------- */
body.app .wrapper>h2{text-align:left;font-size:clamp(30px,8.4vw,40px);line-height:.98;margin:2px 0 8px}
body.app .wrapper>.subtitle{text-align:left;font-size:14.5px;color:var(--muted);margin-bottom:18px}
body.app .wrapper>.hint{text-align:left}
body.app .counter{justify-content:flex-start;background:none;border:0;padding:0}

/* ---------- botões e campos ---------- */
body.app .btn{transition:transform .16s var(--app-ease),background-color .16s,border-color .16s,color .16s}
body.app .btn:hover{transform:none}
body.app .btn:active{transform:scale(.97)}
body.app .btn.green,body.app .btn.gold{box-shadow:none}
body.app .search-box{text-align:left}
body.app .search-box input{max-width:none;width:100%;min-height:50px;border-radius:14px;background-color:var(--surface-2);border-color:var(--border);font-size:16px}
body.app .search-box input:focus{border-color:var(--accent-line);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
body.app .card{box-shadow:none;border-radius:16px;background:var(--surface)}
body.app .card.dem{background:var(--surface);border-color:var(--danger-line)}
body.app .card-ace{color:var(--gold-soft)}
body.app .badge{background:none;border-color:var(--border-2)}

/* ---------- catálogo: régua de grupo, seleção sem cartão, cabeçalho com a cor da bandeira ---------- */
body.app .group-label{background:none;border:0;padding:0;margin:30px 0 4px;gap:10px}
body.app .group-label .grp-dot{display:none}
body.app .group-label b{font-size:13px;letter-spacing:.14em;color:var(--muted)}
body.app .group-label::after{content:"";order:1;flex:1;height:1px;background:var(--border)}
body.app .gflags{order:2;margin-left:0}
body.app .gflags img{width:20px;height:15px;border-radius:2px;box-shadow:none;opacity:.8}
body.app .group-label.many{flex-wrap:wrap}
body.app .group-label.many .gflags{flex-basis:100%;order:3;flex-wrap:wrap;margin:8px 0 0;gap:8px}
body.app .group-label.many .gflags img{width:28px;height:28px;border-radius:0;opacity:.95}

body.app .team{background:none;border:0;border-left:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 26px}
body.app .team.allshiny,body.app .team.hasace,body.app .team:hover{background:none;border:0}
body.app .team-header{position:relative;padding:12px;margin:14px -12px 12px;gap:2px 10px;border-radius:14px;
  background:radial-gradient(120% 170% at 0 0,color-mix(in srgb,var(--tc,transparent) 16%,transparent),transparent 62%)}
body.app .team-header::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--tc,var(--border-2)),var(--tc2,var(--border)) 45%,transparent)}
body.app .fimg{width:34px;height:26px;border-radius:4px;box-shadow:0 0 0 1px var(--border-2),0 8px 20px -8px var(--tc,transparent)}
body.app .tname{font-size:26px;line-height:1;letter-spacing:.01em}
body.app .tsep{display:none}
body.app .tcode,body.app .tgrp{background:none;border:0;padding:0;font-family:var(--f-text);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
body.app .tgrp::before{content:"· ";margin-right:2px}
body.app .acetag{display:none}
body.app .shinytag{background:none;border:0;padding:0;color:var(--gold-soft);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
body.app .tright{margin-left:auto;gap:10px}
body.app .tct{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--accent)}
body.app .acelist{background:none;border:0;padding:0;margin:-4px 0 12px;max-width:none;text-align:left;font-size:13px;color:var(--text-soft)}
body.app .acelist b{color:var(--text)}

/* ---------- figurinha ---------- */
body.app .stickers{gap:7px}
body.app .sticker-btn{border:1px solid var(--border);background:var(--surface-2);background-image:linear-gradient(180deg,rgba(255,255,255,.04),transparent 45%);
  border-radius:10px;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tc,transparent) 55%,transparent);
  font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--text);
  transition:transform .16s var(--app-ease),background-color .16s,border-color .16s}
@media (hover:hover){body.app .sticker-btn:hover{transform:none;background-color:var(--surface-3);border-color:var(--border-2)}}
body.app .sticker-btn:active{transform:scale(.97)}
body.app .sticker-btn.haveName{font-size:24px;line-height:1}
body.app .sticker-btn.haveName .acen{color:var(--muted);opacity:1;font-size:10.5px}
body.app .sticker-btn .pr{color:var(--text-soft)}
/* tenho no estoque: verde cheio */
body.app .sticker-btn.has,body.app .sticker-btn.sel{background:var(--accent-2);background-image:none;border-color:var(--accent);box-shadow:none;color:var(--accent-ink)}
body.app .sticker-btn.has .acen,body.app .sticker-btn.has .pr,body.app .sticker-btn.sel .acen,body.app .sticker-btn.sel .pr{color:var(--accent-ink)}
/* brilhante: folha dourada; craque: só a estrela */
body.app .sticker-btn.shiny{box-shadow:none;border-color:var(--gold-line)}
body.app .sticker-btn.shiny:not(.has):not(.sel):not(.nostock):not(.selout){
  background:linear-gradient(115deg,transparent 34%,rgba(255,226,140,.14) 48%,transparent 62%),linear-gradient(155deg,color-mix(in srgb,var(--gold) 20%,var(--surface-2)),var(--surface-2) 62%);color:var(--text)}
body.app .sticker-btn.ace{box-shadow:none;border-color:var(--gold-line)}
body.app .sticker-btn.ace:not(.has):not(.sel):not(.nostock):not(.selout){background:var(--surface-2);color:var(--text)}
body.app .sticker-btn.ace.has,body.app .sticker-btn.ace.sel{border-color:var(--accent)}
body.app .sticker-btn.nostock{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--danger);box-shadow:none}
body.app .qty-badge{top:-7px;right:-7px;font-size:11px;padding:2px 6px;min-width:20px;text-align:center;box-shadow:0 0 0 2px var(--ground)}
body.app .dem-badge{top:-7px;right:-7px;font-size:11px;padding:2px 6px;min-width:20px;text-align:center;box-shadow:0 0 0 2px var(--ground)}

/* ---------- movimento: só resposta a toque ---------- */
@keyframes app-badge{from{transform:scale(.6);opacity:.4}to{transform:none;opacity:1}}
@keyframes app-pop{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
  body.app .qty-badge,body.app .dem-badge{animation:app-badge .18s var(--app-ease)}
  body.app .sticker-btn.has{animation:app-pop .2s var(--app-ease)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes app-head{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:none}}
    body.app .team-header{animation:app-head linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (prefers-reduced-motion:reduce){body.app *{animation:none!important}}

/* selo "Faltantes": a bolinha é vermelha de verdade (herdava o tom claro do texto e parecia branca) */
body.app .badge.so{color:var(--danger-ink);border-color:var(--danger-line);background:var(--danger-quiet)}
body.app .badge.so .ic{color:var(--danger)}
body.app .badge.rs{color:var(--gold-soft);border-color:var(--gold-line);background:var(--gold-quiet)}