/* =====================================================================
   COLLECTIONS.HTML — "Meu Álbum" (Fase 3 do docs/bp.md)
   Só o que é específico desta tela. Reaproveita de css/style.css:
   tokens de cor, .btn/.btn-sm, .modal-bg/.modal, .search-box/.filter-tip,
   .team/.team-header/.stickers/.sticker-btn/.group-label, .qe-*/.quick-modal,
   .cfg-lbl/.cfg-hint, .qty-badge. Nunca carrega css/loja.css/css/loja-v2.css
   (específicos da vitrine) — ver CLAUDE.md.
   ===================================================================== */
body.coll-body{padding-bottom:40px}
body.coll-body .topbar-inner{max-width:700px} /* alinha com o .wrapper desta página (860 em tela larga, mais abaixo) */
@media(min-width:900px){body.coll-body{padding-left:0}} /* style.css empurra o body pra gaveta do dono — aqui não tem gaveta */

/* ---------- TOPBAR: usa o componente compartilhado (.topbar/.acc-btn/.acc-menu em css/style.css) ---------- */
.icon-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);
  width:48px;height:48px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;flex:0 0 auto}
.icon-btn:hover{background:var(--surface-3);border-color:var(--border-2)}

/* ---------- GRADE DE FIGURINHAS: mesma da vitrine (loja-v2.css) ----------
   Sem isto o style.css aplicava a regra "sem nomes" (5 colunas de ~62px, max 340px) mas o
   quadradinho com nome tem width:73px fixo — saía da coluna e os botões ficavam colados.
   Aqui as colunas esticam e o botão preenche a coluna, com 8px de respiro; 10 por linha em tela larga. */
body.coll-body .stickers{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:100%}
body.coll-body .sticker-btn,body.coll-body .sticker-btn.haveName,body.coll-body .sticker-btn.haveName.havePrice{width:100%}
body.coll-body .sticker-btn{border-radius:10px}
body.coll-body .sticker-btn .tnum{font-size:26px;line-height:1;letter-spacing:.005em}
body.coll-body .sticker-btn.haveName .acen{font-size:10.5px;letter-spacing:.02em}
@media(min-width:760px){
  body.coll-body .wrapper,body.coll-body .topbar-inner{max-width:860px}
  body.coll-body .stickers{grid-template-columns:repeat(10,minmax(0,1fr))}
}

/* ---------- MESMO VISUAL DA VITRINE (v10.119) ----------
   Busca, barra de seleções, faixa de grupo, cabeçalho de seleção na cor da bandeira
   (css/team-colors.css) — espelha o que loja-v2.css faz com `body.v2`, aqui com `body.coll-body`
   (a vitrine não pode ser carregada nesta tela). O que diferencia o ÁLBUM da vitrine: sem preço,
   contagem "N/20 tenho" no cabeçalho e cabeçalho que recolhe/abre a seleção. */
body.coll-body .search-box{margin:0 0 12px;text-align:left}
body.coll-body .search-box input{max-width:none;width:100%;min-height:52px;border-radius:14px;background-color:var(--surface-2);border-color:var(--border);font-size:16px}
body.coll-body .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.coll-body .filter-tip{margin:0 0 12px}

.coll-teamnav{display:flex;gap:4px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.coll-teamnav::-webkit-scrollbar{display:none}
.coll-teamnav.hidden{display:none}
.coll-teamnav .tn-chip{flex:none;min-height:44px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:var(--text-soft);
  font-family:var(--f-display);font-weight:700;letter-spacing:.05em;font-size:15px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.coll-teamnav .tn-chip img{width:20px;height:14px;border-radius:2px;object-fit:cover}
.coll-teamnav .tn-chip:hover{background:var(--surface-2);color:var(--text)}
.coll-teamnav .tn-chip:active{transform:scale(.97)}
.coll-teamnav .tn-chip .fico-fwc,.coll-teamnav .tn-chip .fico-cc{width:20px;height:14px;border-radius:2px}
.coll-teamnav .tn-chip .fico-fwc .ic{width:11px;height:11px}
.coll-teamnav .tn-chip .fico-cc .ic{height:11px}

body.coll-body .group-label{background:none;border:0;padding:0;margin:34px 0 4px;gap:10px}
body.coll-body .group-label .grp-dot{display:none}
body.coll-body .group-label b{font-size:13px;letter-spacing:.14em;color:var(--muted)}
body.coll-body .group-label::after{content:"";order:1;flex:1;height:1px;background:var(--border)}
body.coll-body .gflags{order:2;margin-left:0}
body.coll-body .gflags img{width:20px;height:15px;border-radius:2px;box-shadow:none;opacity:.8}

body.coll-body .team{background:none;border:0;border-left:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 30px;scroll-margin-top:84px}
body.coll-body .team.allshiny,body.coll-body .team.hasace,body.coll-body .team:hover{background:none;border:0}
body.coll-body .team-header{position:relative;gap:2px 10px;padding:12px;margin:14px -12px 12px;align-items:center;border-radius:14px;cursor:pointer;
  background:radial-gradient(120% 170% at 0 0,color-mix(in srgb,var(--tc,transparent) 16%,transparent),transparent 62%);
  -webkit-tap-highlight-color:transparent;user-select:none}
body.coll-body .team-header:hover{background:radial-gradient(120% 170% at 0 0,color-mix(in srgb,var(--tc,transparent) 24%,transparent),transparent 62%)}
body.coll-body .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.coll-body .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.coll-body .tct::after{content:" tenho";font-weight:600;color:var(--faint);letter-spacing:.03em}
body.coll-body .team-chev{flex:0 0 auto;width:9px;height:9px;margin:0 6px 3px 2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
body.coll-body .team.collapsed .team-chev{transform:rotate(-45deg);margin-bottom:0}
body.coll-body .team.collapsed .stickers,body.coll-body .team.collapsed .acelist{display:none}
body.coll-body .team.collapsed{margin-bottom:6px}
body.coll-body .sticker-btn:not(.has):not(.shiny):not(.ace){box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tc,transparent) 55%,transparent)}
body.coll-body .sticker-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.04),transparent 45%)}
@media(prefers-reduced-motion:reduce){body.coll-body .team-chev{transition:none}}

/* ---------- ESTADO / VAZIO ---------- */
.coll-state{text-align:center;color:var(--muted);padding:40px 0;font-size:13.5px}
.coll-state.hidden{display:none}
.coll-empty{text-align:center;padding:30px 15px}
.coll-empty.hidden{display:none}
.coll-empty-art{color:var(--accent);margin-bottom:10px}
.coll-empty-art .ic{width:46px;height:46px}
.coll-empty h2{margin:0 0 8px}
.coll-empty .hint{max-width:420px;margin:0 auto 20px}

/* ---------- APP ---------- */
.coll-app.hidden{display:none}
.coll-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.coll-catalog-badge{font-size:10.5px;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:20px;padding:5px 11px;white-space:nowrap}

.coll-progress{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.coll-progress-bar{flex:1;height:10px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden}
.coll-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border-radius:6px;transition:width .3s cubic-bezier(.22,.9,.3,1)}
.coll-progress-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.coll-progress-txt{font-family:var(--f-display);font-weight:700;font-size:13px;
  color:var(--text-soft);white-space:nowrap}
.coll-progress-miss{font-size:12px;color:var(--muted);white-space:nowrap;line-height:1.2}
.coll-progress-miss.done{color:var(--accent);font-weight:700}

.coll-dica{text-align:center;font-size:11px;color:var(--muted);margin-bottom:18px;line-height:1.5}

.coll-footlinks{text-align:center;margin-top:30px;font-size:12px}
.coll-footlinks a{color:var(--muted);text-decoration:none}
.coll-footlinks a:hover{color:var(--accent);text-decoration:underline}

/* ---------- MODAIS: passos de confirmação longa ---------- */
.coll-step.hidden{display:none}
.coll-danger-txt{color:var(--danger);font-size:13px;line-height:1.5}
/* os 3 fluxos destrutivos (preencher tudo/limpar/apagar) são justamente onde
   NÃO pode errar o dedo — mesmo padrão de alvo que css/loja.css já usa em
   .loja-sheet .actions pro mesmo tipo de decisão (cancelar pedido) */
#collFillModal .actions,#collClearModal .actions,#collDeleteModal .actions{gap:12px}
#collFillModal .actions .btn,#collClearModal .actions .btn,#collDeleteModal .actions .btn{min-height:50px;flex:1}

/* ---------- COMPARTILHAR ---------- */
.coll-share-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.coll-tab[data-share="both"]{flex:1 0 100%} /* a aba combinada ocupa a linha de baixo (texto longo) */
.coll-tab{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  padding:10px 6px;border-radius:10px;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:12px;cursor:pointer;min-height:48px}
.coll-tab.on{background:var(--accent-2);border-color:var(--accent);color:var(--accent-ink)}
#collShareOut{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:12px;font-size:12px;
  line-height:1.6;max-height:280px;overflow:auto;margin:0 0 14px;font-family:'Courier New',monospace}

/* ---------- QR ---------- */
.coll-qr-modal #collQrBox{display:flex;justify-content:center;padding:10px 0}
.coll-qr-modal #collQrBox img,.coll-qr-modal #collQrBox svg{background:#fff;border-radius:10px;
  padding:12px;max-width:100%;height:auto}

/* ---------- TROCAS ---------- */
/* tokens de TEXTO desta tela: no escuro são os de sempre; no claro viram tons mais escuros pra passar de 4.5:1 (WCAG AA) */
:root{--tx-ac:var(--accent);--tx-gold:var(--gold);--tx-mut:var(--muted);--tx-dan:var(--danger);--go-bg:var(--accent-2);--undo-bg:var(--danger-line);--undo-ink:var(--danger-ink);--chip-off:var(--border-2)}
:root[data-theme="light"]{--tx-ac:#0b6e41;--tx-gold:#7a540c;--tx-mut:var(--text-soft);--tx-dan:#a8321d;--go-bg:#0d7a4a;--undo-bg:var(--danger);--undo-ink:#fff;--chip-off:#8a978d}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--tx-ac:#0b6e41;--tx-gold:#7a540c;--tx-mut:var(--text-soft);--tx-dan:#a8321d;--go-bg:#0d7a4a;--undo-bg:var(--danger);--undo-ink:#fff;--chip-off:#8a978d}}
#collTradeInput{min-height:90px}
/* topo do modal: "Comparar" é a ação principal (largura inteira); QR e histórico lado a lado */
#collTradeModal>.modal>.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
#collTradeModal>.modal>.actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 10px;text-align:center;line-height:1.1}
#collTradeModal>.modal>.actions .btn:first-child{grid-column:1/-1;min-height:54px}
#siteFooter .sf-in{padding-right:72px} /* mobile: os botões flutuantes início/fim (#collFabs) não cobrem o fim dos links */
@media(min-width:760px){#siteFooter .sf-in{padding-right:24px}}
#collTradeResult{margin-top:18px}
#collTradeResult .cfg-hint{font-size:12.5px;line-height:1.5;color:var(--tx-mut)}
#collTradeResult .trade-note{margin-top:14px}

/* --- botões do fluxo de troca: grade de 12px, alvo de 48px+ --- */
#collTradeResult .trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 16px}
#collTradeResult .trade-actions.solo{grid-template-columns:1fr}
#collTradeResult .trade-actions .btn,.trade-stack .btn,.th-stack .btn,.th-row2 .btn,.th-primary{width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 10px}
.btn.trade-wa{background:var(--accent-quiet);border-color:var(--accent-line);color:var(--tx-ac)}
.btn.trade-wa:hover{background:var(--accent-quiet);border-color:var(--accent);color:var(--tx-ac)}
.btn.trade-warn{background:transparent;border-color:var(--danger-line);color:var(--tx-dan)}
.btn.trade-warn:hover{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--tx-dan)}
.btn.trade-ghost{background:transparent;border-color:transparent;color:var(--tx-mut)}
.btn.trade-ghost:hover{background:var(--surface-3);border-color:transparent;color:var(--text)}
.trade-stack,.th-stack{display:grid;gap:12px;margin-top:16px}
.trade-hint{margin:-4px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx-mut);text-align:center}
.trade-fine{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx-mut)}
.btn.green.trade-go{background:var(--go-bg)}.btn.green.trade-go:hover{background:var(--go-bg);filter:brightness(1.1)}
.btn.trade-go{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:56px;padding:8px 14px}
.trade-go-main{display:inline-flex;align-items:center;gap:8px;font-size:17px}
.trade-go-sub{font-size:12px;font-weight:600;letter-spacing:.06em}
.btn.trade-go:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.red.trade-go{background:var(--undo-bg);border-color:var(--danger);color:var(--undo-ink)}
.btn.red.trade-go:hover{background:var(--undo-bg);color:var(--undo-ink);filter:brightness(1.1)}

/* --- bloco de figurinhas (ele me dá = verde / eu dou = azul) --- */
.trade-pick{--tp:var(--accent);--tp-quiet:var(--accent-quiet);--tp-line:var(--accent-line);--tp-solid:var(--accent-2);--tp-ink:var(--accent-ink);--tp-tx:var(--tx-ac);
  margin:18px 0 0;border:1px solid var(--border);border-left:4px solid var(--tp);border-radius:14px;background:var(--surface);padding:14px 14px 0}
.trade-pick[data-kind="them"]{--tp:var(--info);--tp-quiet:var(--info-quiet);--tp-line:var(--info-line);--tp-solid:var(--info-btn);--tp-ink:#fff;--tp-tx:var(--info)}
.trade-pick-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.trade-pick-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tp-quiet);border:1px solid var(--tp-line);color:var(--tp)}
.trade-pick-ic .ic{width:24px;height:24px}
.trade-pick-title{display:flex;flex-direction:column;min-width:0}
.trade-pick-title>b{font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.trade-count{font-size:13px;color:var(--tx-mut);margin-top:3px}
.trade-count b{color:var(--tp-tx);font-weight:800}
.trade-pick-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 12px}
.trade-sub{flex:1 1 150px;font-size:12.5px;line-height:1.4;color:var(--tx-mut)}
.trade-pick-btns{display:flex;gap:12px}
.trade-link{min-height:48px;min-width:64px;padding:0 14px;border-radius:12px;border:1px solid var(--tp-line);background:transparent;color:var(--tp-tx);cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.trade-club{margin:0 0 14px}
.trade-club-name{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.trade-club-name .fimg{width:26px;height:20px;border-radius:3px}
.trade-club-name .fico{width:26px;height:20px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.trade-club-name .fico-fwc,.trade-club-name .fico-cc{width:26px;height:20px}
.trade-club-name .fico-fwc .ic{width:14px;height:14px}.trade-club-name .fico-cc .ic{height:14px}
.trade-chips{display:flex;flex-wrap:wrap;gap:12px}
.trade-chip{min-width:52px;min-height:48px;padding:0 12px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--chip-off);background:transparent;color:var(--muted);
  font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s}
.trade-chip:active{transform:scale(.95)}
.trade-chip.on{border:1.5px solid var(--tp);background:var(--tp-solid);color:var(--tp-ink)}

/* --- barra "registrar essa troca" (fixa embaixo enquanto a lista é longa) e a folha de confirmação --- */
.trade-confirm{margin:18px 0 8px}
.trade-confirm.idle{position:sticky;bottom:-40px;z-index:5;margin:16px 0 0;padding:12px 0 14px;background:var(--surface);border-top:1px solid var(--border)}
.trade-sheet{border:1px solid var(--border-2);border-radius:16px;background:var(--surface-2);padding:16px 14px 14px}
.trade-sheet-title{margin-bottom:12px;font-family:var(--f-display);font-weight:800;font-size:23px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.trade-friend-lbl{display:block;font-weight:700;margin:18px 0 8px}
.trade-friend-lbl small{display:block;margin-top:2px;font-weight:400;color:var(--tx-mut)}
.trade-friend{width:100%;min-height:50px;box-sizing:border-box;padding:0 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:16px}

/* --- números grandes "recebo / entrego" (confirmação, sucesso e cartões do histórico) --- */
.trade-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-stat{--tn:var(--tx-ac);--tn-quiet:var(--accent-quiet);--tn-line:var(--accent-line);
  display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px;border-radius:14px;border:1px solid var(--tn-line);background:var(--tn-quiet);text-align:left}
.trade-stat.giv{--tn:var(--info);--tn-quiet:var(--info-quiet);--tn-line:var(--info-line)}
.trade-lbl{white-space:nowrap;display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--tn)}
.trade-lbl .ic{width:18px;height:18px;flex:0 0 auto}
.trade-num{font-family:var(--f-display);font-weight:800;font-size:44px;line-height:1;color:var(--text);margin-top:4px}
.trade-unit{font-size:12px;color:var(--tx-mut)}
.trade-desc{margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--text-soft)}
.trade-stats.compact .trade-num{font-size:34px}

/* --- tela de sucesso / pendente --- */
.trade-done{--tp:var(--tx-ac);--tp-line:var(--accent-line);--tp-quiet:var(--accent-quiet);
  text-align:center;border:1px solid var(--tp-line);border-radius:16px;padding:20px 14px 14px;background:var(--surface-2)}
.trade-done.pending{--tp:var(--tx-gold);--tp-line:var(--gold-line);--tp-quiet:var(--gold-quiet)}
.trade-done-ic{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;margin-bottom:10px;background:var(--tp-quiet);color:var(--tp)}
.trade-done-ic .ic{width:34px;height:34px}
.trade-done-title{font-family:var(--f-display);font-weight:800;font-size:25px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.trade-done-title b{color:var(--tp)}
.trade-done-sub{margin:8px 0 16px;font-size:14px;line-height:1.45;color:var(--text-soft)}
.trade-saved{margin-top:12px;min-height:18px;font-size:12px;color:var(--tx-mut)}

/* --- mensagem completa e linhas não reconhecidas --- */
details.trade-both,details.trade-unk{margin-top:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:0 14px 2px}
details.trade-unk{border-color:var(--gold-line);background:var(--gold-quiet)}
details.trade-both>summary,details.trade-unk>summary,.th-det>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:700}
details.trade-both>summary::-webkit-details-marker,details.trade-unk>summary::-webkit-details-marker,.th-det>summary::-webkit-details-marker{display:none}
details.trade-both>summary::after,details.trade-unk>summary::after,.th-det>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details[open]>summary::after{transform:rotate(-135deg)}
details.trade-both>summary small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
details.trade-unk>summary .ic{color:var(--gold)}
#collTradeResult .trade-empty{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1px dashed var(--border-2);border-radius:14px;font-size:13.5px;line-height:1.4;color:var(--text-soft)}
#collTradeResult .trade-empty .ic{flex:0 0 auto;width:20px;height:20px;color:var(--muted)}
/* .out é display:none por padrão (css/style.css — cada tela liga "block" na hora de preencher,
   ver #outOrc/#outStock no app do dono); este aqui nasce de innerHTML sem esse toque, então
   precisa do override aqui mesmo (achado junto do mesmo bug em #collShareOut, v10.114). */
#collTradeResult .out{display:block;white-space:pre-wrap;word-break:break-word;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:12px;font-size:12px;line-height:1.6;
  margin:10px 0 0;font-family:'Courier New',monospace}

/* --- v10.199: tipo da lista, "Entendi", outro lado e equilíbrio da troca --- */
.trade-kind{margin:14px 0 10px}
.trade-kind .coll-tab{flex:1 1 calc(50% - 8px);padding:10px 8px}
@media(min-width:560px){.trade-kind .coll-tab{flex:1 1 0}}
#collTradeResult .trade-understood{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:13.5px;line-height:1.5;color:var(--text-soft)}
#collTradeResult .trade-understood .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--tx-ac)}
#collTradeResult .trade-understood b{color:var(--text)}
#collTradeResult .trade-understood small{display:block;margin-top:2px;font-size:12px;color:var(--tx-mut)}
#collTradeResult .trade-addmore{margin-top:16px;padding:14px;border:1px dashed var(--border-2);border-radius:14px}
#collTradeResult .trade-addmore-title{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;line-height:1.4}
#collTradeResult .trade-addmore-title .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--tx-ac)}
#collTradeResult .trade-addmore textarea{width:100%;box-sizing:border-box;min-height:80px}
#collTradeResult .trade-addmore-kind{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 2px}
#collTradeResult .trade-addmore-kind label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px}
#collTradeResult .trade-balance{margin-top:14px}
#collTradeResult .trade-bal{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.45}
#collTradeResult .trade-bal .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px}
#collTradeResult .trade-bal.ok{border:1px solid var(--accent);color:var(--tx-ac)}
#collTradeResult .trade-bal.warn{border:1px solid var(--gold-line);background:var(--gold-quiet);color:var(--text)}
#collTradeResult .trade-bal.warn .ic{color:var(--tx-gold)}
#collTradeResult .trade-bal-btn{width:100%;min-height:48px;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* ---------- HISTÓRICO DE TROCAS ---------- */
#collTradeHistSearch{width:100%;min-height:50px;box-sizing:border-box;padding:0 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:16px;margin:10px 0 16px}
#collTradeHistList .th-label{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
#collTradeHistList .th-label span{padding:1px 8px;border-radius:999px;background:var(--surface-3);color:var(--text);font-size:12px}
#collTradeHistList .th-friends{display:flex;gap:12px;overflow-x:auto;margin:0 -2px 18px;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
#collTradeHistList .th-friend{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px 14px;
  border-radius:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:inherit;text-align:left;cursor:pointer}
#collTradeHistList .th-friend b{font-family:var(--f-display);font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;color:var(--text)}
#collTradeHistList .th-fsum{font-size:12.5px;color:var(--tx-mut)}
#collTradeHistList .th-fpend{margin-top:2px;padding:0 8px;border-radius:999px;background:var(--gold-quiet);border:1px solid var(--gold-line);color:var(--tx-gold);font-size:11.5px;font-weight:700}
#collTradeHistList .th-friend.on{border-color:var(--accent);background:var(--accent-quiet)}
#collTradeHistList .th-friend.on .th-fsum{color:var(--tx-ac)}

#collTradeHistList .th-item{--st:var(--border-2);margin-bottom:16px;padding:14px;border:1px solid var(--border);border-left:4px solid var(--st);border-radius:14px;background:var(--surface)}
#collTradeHistList .th-pendente{--st:var(--gold)}
#collTradeHistList .th-aplicada{--st:var(--accent)}
#collTradeHistList .th-desfeita .trade-stat{--tn:var(--tx-mut);--tn-quiet:var(--surface-2);--tn-line:var(--border)}
#collTradeHistList .th-desfeita .trade-num{color:var(--tx-mut)}
#collTradeHistList .th-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
#collTradeHistList .th-who{display:flex;flex-direction:column;min-width:0}
#collTradeHistList .th-who b{font-family:var(--f-display);font-weight:800;font-size:23px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
#collTradeHistList .th-when{margin-top:3px;font-size:12.5px;color:var(--tx-mut)}
#collTradeHistList .th-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid;
  font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
#collTradeHistList .th-badge .ic{width:15px;height:15px}
#collTradeHistList .th-badge-pendente{background:var(--gold-quiet);border-color:var(--gold-line);color:var(--tx-gold)}
#collTradeHistList .th-badge-aplicada{background:var(--accent-quiet);border-color:var(--accent-line);color:var(--tx-ac)}
#collTradeHistList .th-badge-desfeita{background:var(--surface-3);border-color:var(--border-2);color:var(--tx-mut)}
#collTradeHistList .th-det{margin-top:4px}
#collTradeHistList .out{white-space:pre-wrap;word-break:break-word}
#collTradeHistList .th-actions{display:grid;gap:12px;margin-top:12px}
#collTradeHistList .btn.green.th-primary{background:var(--go-bg)}
#collTradeHistList .th-primary{min-height:52px}
#collTradeHistList .btn.th-primary.soft{background:var(--accent-quiet);border-color:var(--accent-line);color:var(--tx-ac)}
#collTradeHistList .btn.th-primary.warn{background:transparent;border-color:var(--danger-line);color:var(--tx-dan)}
#collTradeHistList .th-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#collTradeHistList .btn.th-del{justify-self:center;width:auto;min-height:48px;padding:0 18px;background:transparent;border-color:transparent;color:var(--tx-mut);font-size:13px}
#collTradeHistList .btn.th-del[data-armed="1"]{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--tx-dan)}

/* folha de confirmação do histórico: aplicar = verde, desfazer = tom de atenção (vermelho suave) */
#collTradeHistList .th-confirm{--tc:var(--tx-ac);--tc-quiet:var(--accent-quiet);--tc-line:var(--accent-line);
  margin-top:10px;padding:14px;border:1px solid var(--tc-line);border-radius:14px;background:var(--tc-quiet)}
#collTradeHistList .th-confirm-undo{--tc:var(--tx-dan);--tc-quiet:var(--danger-quiet);--tc-line:var(--danger-line)}
#collTradeHistList .th-confirm-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.05;text-transform:uppercase;color:var(--tc)}
#collTradeHistList .th-confirm-title .ic{width:22px;height:22px;flex:0 0 auto}
#collTradeHistList .th-confirm-lead{margin:8px 0 12px;font-size:14px;line-height:1.45;color:var(--text-soft)}
#collTradeHistList .th-flow{display:grid;gap:10px}
#collTradeHistList .th-flow-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
#collTradeHistList .th-flow-num{flex:0 0 auto;min-width:58px;font-family:var(--f-display);font-weight:800;font-size:34px;line-height:1}
#collTradeHistList .th-flow-row.rec .th-flow-num{color:var(--tx-ac)}
#collTradeHistList .th-flow-row.giv .th-flow-num{color:var(--info)}
#collTradeHistList .th-flow-txt{font-size:14px;line-height:1.35;color:var(--text-soft)}
#collTradeHistList .th-flow-txt b{color:var(--text)}
#collTradeHistList .th-confirm-foot{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx-mut)}
#collTradeHistList .th-empty{padding:26px 0 8px}
#collTradeHistList .th-empty-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--surface-3);color:var(--tx-mut)}
#collTradeHistList .th-empty-ic .ic{width:30px;height:30px}
#collTradeHistList .th-empty .btn.green{background:var(--go-bg)}
#collTradeHistList .th-empty .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:20px}

/* ---------- LER QR (câmera) ---------- */
.coll-scan-modal .coll-scan-video-wrap{position:relative;border-radius:12px;overflow:hidden;
  background:#000;margin:10px 0}
.coll-scan-modal video{width:100%;display:block;max-height:60vh;object-fit:cover}


/* ---------- LEGENDS (catálogo "legends", v10.114) ----------
   Craque × raridade em vez de seleção × número — mesma mecânica de toque
   (wireQtyClick: tap soma, toque longo/botão direito/ctrl-clique tira), só
   que a "chave 2" é a raridade (string), não um número. Reaproveita
   .team/.team-header/.stickers/.sticker-btn/.qty-badge (zero grid novo) +
   a paleta de raridade que a tela de preços do dono já usa
   (--violet/--bronze/--silver/--gold, css/style.css) em vez de inventar cor
   nova. Mesmo truque de .sticker-btn.shiny/.ace: a cor da raridade só
   aparece ANTES de marcar — uma vez "tenho" (.has), vira verde como todo
   o resto do app (verde = ação/seleção, não se mistura com a cor da raridade). */
.coll-leg-tiers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:420px;gap:12px}
/* com a foto da arte, a célula vira um cartão do MESMO tamanho das figurinhas normais (1 coluna da grade de 5/10 por linha) */
body.coll-body .stickers.coll-leg-tiers{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:calc((100% - 32px) / 5 * 4 + 24px);margin-left:0}
@media(min-width:760px){body.coll-body .stickers.coll-leg-tiers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:calc((100% - 72px) / 10 * 4 + 24px)}}
.coll-leg-cell{padding:10px 2px;min-height:48px;display:flex;align-items:center;justify-content:center}
.coll-leg-cell .acen{text-transform:uppercase;font-size:9.5px;letter-spacing:.2px}
.coll-leg-cell.tier-regular:not(.has){box-shadow:inset 0 0 0 2px var(--violet);
  background:linear-gradient(150deg,var(--violet-quiet),var(--surface-2));color:var(--violet)}
.coll-leg-cell.tier-bronze:not(.has){box-shadow:inset 0 0 0 2px var(--bronze);
  background:linear-gradient(150deg,var(--bronze-quiet),var(--surface-2));color:var(--bronze)}
.coll-leg-cell.tier-silver:not(.has){box-shadow:inset 0 0 0 2px var(--silver);
  background:linear-gradient(150deg,var(--silver-quiet),var(--surface-2));color:var(--silver)}
.coll-leg-cell.tier-gold:not(.has){box-shadow:inset 0 0 0 2px var(--gold);
  background:linear-gradient(150deg,var(--gold-quiet),var(--surface-2));color:var(--gold-soft)}
/* célula de Legend com foto: arte inteira (retrato 3:4 → contain) + faixa com a raridade embaixo */
.coll-leg-cell.hasPhoto{position:relative;padding:0;aspect-ratio:73/103;min-height:0;align-items:flex-end;
  background:var(--surface-2)!important;color:var(--text)}
.coll-leg-cell.hasPhoto .tphoto{position:absolute;inset:0 0 18px 0;width:100%;height:calc(100% - 18px);object-fit:contain;
  pointer-events:none;opacity:.78;transition:opacity .15s;border-radius:9px 9px 0 0}
.coll-leg-cell.hasPhoto .acen{position:relative;z-index:1;width:100%;padding:3px 0 2px;font-size:9px;line-height:1.1;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:0 0 9px 9px}
.coll-leg-cell.hasPhoto.has{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface-2)!important}
.coll-leg-cell.hasPhoto.has .tphoto{opacity:1}
.coll-leg-cell.hasPhoto.has .acen{background:var(--accent);color:var(--accent-ink)}
.coll-leg-cell.hasPhoto .qty-badge{z-index:2}

/* ---------- MENU DE OPÇÕES (v10.122) — as ações da coleção saem da tela e vão pra um menu ---------- */
.coll-head{position:relative}
.coll-opt-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 14px;border-radius:12px;flex:0 0 auto;
  background:transparent;border:1px solid var(--border-2);color:var(--text-soft);cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.coll-opt-btn:hover,.coll-opt-btn[aria-expanded="true"]{background:var(--surface-2);border-color:var(--accent-line);color:var(--text)}
.coll-opt-btn:active{transform:scale(.96)}
@media(max-width:400px){.coll-opt-btn span{display:none}.coll-opt-btn{padding:0;width:48px}}
.coll-opt-menu{top:calc(100% + 4px);right:0;min-width:240px;z-index:130}
.acc-menu button.hidden,.acc-menu a.hidden{display:none}
.coll-opt-menu .acc-menu-who{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coll-opt-menu .acc-menu-who b{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px}

/* ---------- BOTÕES FLUTUANTES: ir pro início / pro fim da lista ---------- */
.coll-fabs{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:115;display:flex;flex-direction:column;gap:10px}
.coll-fabs.hidden{display:none}
.coll-fab{width:48px;height:48px;border-radius:50%;border:1px solid var(--border-2);background:var(--surface-3);color:var(--text);cursor:pointer;
  box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:opacity .18s,transform .18s}
.coll-fab:hover{border-color:var(--accent-line);color:var(--accent)}
.coll-fab:active{transform:scale(.9)}
.coll-fab.off{opacity:0;pointer-events:none;transform:scale(.7)}
@media(min-width:900px){.coll-fabs{right:24px;bottom:24px}}

/* ---------- GAMIFICAÇÃO (v10.125, efeitos ampliados em v10.129) ----------
   Reforço permanente (selo/troféu no cabeçalho + borda dourada, barra de progresso
   por grupo) + reação na hora — essa última virou um TAKEOVER de tela (pedido do
   usuário, 3 protótipos avaliados com o MCP de visualização antes de implementar:
   "Tela de gol" dourada pro craque/ace, "Time completo" verde pra time/Legend
   inteiro — cores escolhidas de propósito diferentes uma da outra pra não confundir
   qual conquista é qual). Os dois `#collCelebrateGol`/`#collCelebrateTeam` nascem
   prontos em collections.html (`display:none`), só ganham `.playing` via JS — não
   são criados/destruídos a cada toque como o confete antigo, só a classe liga/desliga
   (`playOverlay()`, js/collections.js). `pointer-events:none`: celebração nunca
   bloqueia o próximo toque. Confete continua sendo `position:fixed`, criado/removido
   via JS em `document.body`. */
.donetag{display:inline-flex;color:var(--gold-soft)}
.donetag .ic{width:15px;height:15px}
.team.complete .team-header{border-color:var(--gold-line);background:linear-gradient(160deg,var(--gold-quiet),var(--surface) 60%)}

.coll-confetti-piece{position:fixed;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:9999;
  top:0;left:0;transform:translate(-50%,-50%);opacity:0}
.coll-confetti-piece.rain{animation:collConfettiRain 1.3s ease-in forwards}
.coll-confetti-piece.burst{animation:collConfettiBurst .9s ease-out forwards}
@keyframes collConfettiRain{
  0%{transform:translate(-50%,-50%) translateY(0) rotate(0deg);opacity:1}
  100%{transform:translate(-50%,-50%) translateY(110vh) rotate(420deg);opacity:0}
}
@keyframes collConfettiBurst{
  0%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}
}

.coll-celebrate{display:none;position:fixed;inset:0;z-index:9999;pointer-events:none;
  align-items:center;justify-content:center;background:rgba(4,8,6,0);opacity:0}
.coll-celebrate.playing{display:flex;animation:collCelebrateBg 1.5s ease-out forwards}
.cc-flash{position:absolute;inset:0;opacity:0}
.coll-celebrate.playing .cc-flash{animation:collFlashPulse .5s ease-out forwards}
.cc-ball{position:absolute;width:30vw;max-width:110px;min-width:70px;height:30vw;max-height:110px;min-height:70px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8d8d8 60%,#9a9a9a);
  box-shadow:inset 0 0 0 3px #333,0 8px 24px rgba(0,0,0,.4);transform:scale(0);z-index:4}
.coll-celebrate.playing .cc-ball{animation:collBallPop 1.1s cubic-bezier(.2,.8,.3,1) forwards}
.cc-trophy{position:absolute;z-index:4;transform:scale(0) rotate(-20deg)}
.cc-trophy .ic{width:min(22vw,88px);height:min(22vw,88px);color:var(--gold-soft);filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.coll-celebrate.playing .cc-trophy{animation:collTrophyPop .9s cubic-bezier(.2,.8,.3,1) forwards}
.cc-ring{position:absolute;width:60px;height:60px;border-radius:50%;border:4px solid;opacity:0;z-index:3}
.coll-celebrate.playing .cc-ring{animation:collRingOut .9s ease-out forwards}
.cc-text{position:absolute;font-family:var(--f-display);font-weight:800;font-size:clamp(42px,13vw,80px);
  text-transform:uppercase;letter-spacing:.02em;transform:scale(.3);opacity:0;z-index:5;text-align:center;
  padding:0 24px;line-height:1.05}
.coll-celebrate.playing .cc-text{animation:collTextPop 1.4s cubic-bezier(.2,.9,.3,1) forwards}
.cc-sub{position:absolute;margin-top:min(16vw,92px);font-family:var(--f-display);font-weight:700;
  font-size:clamp(13px,4vw,19px);letter-spacing:.14em;text-transform:uppercase;opacity:0;z-index:5;
  text-align:center;padding:0 20px}
.coll-celebrate.playing .cc-sub{animation:collSubFade .6s ease-out .4s forwards}

#collCelebrateGol .cc-flash{background:var(--gold-soft)}
#collCelebrateGol .cc-ring{border-color:var(--gold)}
#collCelebrateGol .cc-text{color:#f6d784;text-shadow:0 0 28px rgba(240,192,78,.75),0 4px 0 #4a3715}
#collCelebrateGol .cc-sub{color:#f0c04e}

#collCelebrateTeam .cc-flash{background:var(--accent)}
#collCelebrateTeam .cc-ring{border-color:var(--accent)}
#collCelebrateTeam .cc-text{color:#bdf4da;text-shadow:0 0 28px rgba(99,214,160,.75),0 4px 0 #0f3d2a}
#collCelebrateTeam .cc-sub{color:#9beac6}

@keyframes collCelebrateBg{0%{opacity:0}8%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes collFlashPulse{0%{opacity:0}10%{opacity:.55}100%{opacity:0}}
@keyframes collBallPop{
  0%{transform:scale(0)}
  50%{transform:scale(1.3) translateY(-30px)}
  70%{transform:scale(1) translateY(0)}
  100%{transform:scale(1) translateY(0);opacity:0}
}
@keyframes collTrophyPop{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  50%{transform:scale(1.3) rotate(10deg);opacity:1}
  70%{transform:scale(1) rotate(-4deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes collRingOut{0%{width:60px;height:60px;opacity:.9}100%{width:70vmax;height:70vmax;opacity:0}}
@keyframes collTextPop{
  0%{transform:scale(.3);opacity:0}
  55%{transform:scale(1.15);opacity:1}
  75%{transform:scale(.95)}
  100%{transform:scale(1);opacity:1}
}
@keyframes collSubFade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

/* barra de progresso por grupo (dentro de .group-label, css/style.css — flex, .gflags já
   empurra com margin-left:auto, então isso cai naturalmente depois dos escudos) */
.grp-bar{flex:0 0 auto;width:36px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-left:8px}
.grp-bar-fill{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.grp-pct{flex:0 0 auto;font-size:10px;color:var(--text-soft);margin-left:5px;min-width:28px;text-align:right}
@media(max-width:380px){.grp-bar{width:26px}.grp-pct{font-size:9.5px;min-width:24px}}

/* ---------- CAPAS DOS ÁLBUNS (v10.154) ---------- */
.capa{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:6px;overflow:hidden;
  background:var(--surface-2);box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* a imagem fica fora do fluxo: com 360px de largura natural ela espremia o texto do botão pra 0 (v10.156) */
.capa img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.capa-sm{width:36px;height:48px}
.capa-md{width:84px;height:112px;border-radius:8px}
.capa-lg{width:84px;height:112px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.capa-fallback{background:linear-gradient(160deg,var(--capa-cor,#3b5bdb),#0b0d12);color:#fff}
.capa-fallback .ic{width:46%;height:auto}
/* seletor de coleção: botão com a miniatura + nome, e a lista de coleções */
.coll-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;padding:4px 12px 4px 8px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.coll-pick:hover,.coll-pick[aria-expanded="true"]{background:var(--surface-2);border-color:var(--accent-line)}
.coll-pick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:16px}
.coll-pick-caret{color:var(--muted);font-size:14px}
.coll-pick-menu{left:0;right:auto;top:calc(100% + 4px);min-width:min(320px,100%);max-width:100%;z-index:130}
.coll-pick-menu button{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px}
.coll-pick-item{display:flex;flex-direction:column;flex:1;min-width:0}
.coll-pick-item b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.coll-pick-item small{color:var(--muted);font-size:11.5px}
.coll-pick-menu .is-current .coll-pick-item b{color:var(--accent)}
/* banner da coleção aberta: capa grande sobre a própria capa desfocada */
.coll-banner{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:14px;padding:14px 16px;border-radius:14px;overflow:hidden;
  background-color:var(--surface);background-size:cover;background-position:center;border:1px solid var(--border);isolation:isolate}
.coll-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,13,18,.6),rgba(11,13,18,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.coll-banner:empty{display:none}
.coll-banner-txt{display:flex;flex-direction:column;gap:4px;min-width:0;color:#fff}
.coll-banner-txt b{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.1;text-transform:uppercase;overflow-wrap:anywhere}
.coll-banner-txt span{font-size:13px;color:rgba(255,255,255,.78)}
.coll-new-capa{display:flex;justify-content:center;margin:14px 0 4px}
/* dropdown de álbum na criação da coleção (capa + nome + quanto já tem) */
.coll-newpick{position:relative;margin-bottom:6px}
.coll-newpick .coll-pick{width:100%;flex:none}
.coll-newpick .coll-pick-menu{left:0;right:0;min-width:0;max-height:min(360px,48vh);overflow-y:auto}
.coll-pick-menu button:disabled{opacity:.45;cursor:not-allowed}
@media(min-width:760px){.capa-lg{width:96px;height:128px}.coll-banner-txt b{font-size:26px}}

/* estado da gravação (v10.157): "Salvando…" / "Salvo" / "Sem conexão" */
.coll-savestate{min-height:18px;margin:-10px 0 10px;font-size:12px;color:var(--muted);text-align:right}
.coll-savestate.error{color:var(--danger);font-weight:700}
.coll-savestate.saved{color:var(--accent)}
/* importar meu álbum de outro app (v10.172) */
.imp-file{margin:10px 0}
.imp-file .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;cursor:pointer}
#collImportText{width:100%;box-sizing:border-box;min-height:120px}
.imp-mode{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.imp-mode label{display:flex;gap:10px;align-items:flex-start;min-height:48px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--surface-2)}
.imp-mode input{margin-top:3px;width:20px;height:20px;flex:0 0 auto}
.imp-mode small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.imp-danger{color:var(--danger)}
#btnCollImportGo:disabled{opacity:.45;cursor:not-allowed}

/* Compartilhar Legends: seletor "Por raridade / Por jogador (A-Z)" logo abaixo das abas de lista */
.coll-share-tabs.coll-share-order{margin-top:8px}
.coll-share-tabs.hidden{display:none}