/* ── Fontes auto-hospedadas (2026-09-02) ──────────────────────────────
   Antes, o index.html carregava Archivo / Inter / IBM Plex Mono de
   fonts.googleapis.com (+ os .woff2 de fonts.gstatic.com). Agora os
   arquivos ficam em /assets/fonts/ e nada é buscado em servidores do
   Google. Archivo e Inter são fontes variáveis (1 arquivo por
   subconjunto cobre a faixa de peso); IBM Plex Mono é estática (1
   arquivo por peso). Subconjuntos latin + latin-ext -- cobrem
   PT/EN/ES/FR/DE/PL; JA/ZH já caíam na fonte do sistema (essas famílias
   não têm glifos CJK). Fonte original: Google Fonts css2, mesmo request
   do <link> antigo (Archivo 600-900, Inter 400-800, IBM Plex Mono
   400/500/600). font-display:swap mantido. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/archivo-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibmplexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibmplexmono-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibmplexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibmplexmono-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibmplexmono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibmplexmono-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Rubik (2026-09-14): fonte de display da página Jogos (redesign "Game
   Library"), mesmo padrão auto-hospedado acima -- variável, 1 arquivo por
   subconjunto cobrindo peso 600-900. Só usada dentro de #page-jogos (ver
   escopo mais abaixo), não troca a Archivo do resto do site. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/rubik-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ======================================================================
   WPG Project — folha de estilo
   Extraído dos <style> inline do index.html (eram 7 blocos espalhados,
   somando 1.231 linhas) pra reduzir o HTML e isolar CSS de marcação.
   Ordem dos blocos abaixo preservada igual ao index.html original —
   isso importa pra cascata (regras com mesma especificidade).
   ====================================================================== */

/* ---- extraído de: <style> ---- */
*{box-sizing:border-box;}
label{font-size:12.5px;color:var(--t-mid,var(--muted));display:block;margin-bottom:6px;font-weight:600;}
select, input[type="text"], textarea{width:100%;
    background:var(--card2);
    border:1px solid var(--border);
    color:var(--text);
    padding:11px 12px;
    border-radius:9px;
    font-size:14px;
    font-family:inherit;}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);}
th:first-child, td:first-child{text-align:left;}
tr.best{background:rgba(61,220,175,.08);}
tr.best td:first-child{color:var(--green);font-weight:700;}
tr.pkg-row{cursor:pointer;}
tr.pkg-row:hover, tr.pkg-row:focus-visible{background:var(--card2);}
tr.pkg-row:focus-visible{outline:1px solid var(--or);outline-offset:-1px;}
.pkg-row-hint{color:var(--muted);font-size:12px;margin-left:4px;}
.pkg-pending{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.04em;
    padding:2px 8px;border-radius:999px;margin-left:6px;text-transform:uppercase;
    background:rgba(154,163,173,.14);color:var(--muted);border:1px solid rgba(154,163,173,.3);}
tr.pkg-row:hover .pkg-row-hint, tr.pkg-row:focus-visible .pkg-row-hint{color:var(--or);}
.pkg-contents-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.pkg-contents-row:last-child{border-bottom:none;}
.pkg-contents-name{display:flex;align-items:center;gap:8px;min-width:0;}
.pkg-item-icon{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:0 0 auto;border:1px solid var(--border);background:var(--bg-alt);}
.pkg-contents-qty{color:var(--muted);font-weight:700;flex-shrink:0;}
.pkg-contents-empty{color:var(--muted);font-size:13px;padding:6px 0;}
.pkg-contents-section-label{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:12px 0 4px;border-top:1px solid var(--border);margin-top:4px;}
.formula{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:13px 15px;font-size:12px;color:var(--muted);margin-top:12px;line-height:1.7;}
.note{font-size:11.5px;color:var(--muted);margin-top:18px;border-top:1px solid var(--border);padding-top:14px;}
.page{display:none;}
.page.active{display:block;}
.subpage{display:none;}
.subpage.active{display:block;}
.intelligence-card{border-color:var(--or-line,rgba(255,122,24,.22));background:linear-gradient(135deg,var(--or-wash,rgba(255,122,24,.08)),rgba(255,255,255,.025));}
.intelligence-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-300);font-weight:500;margin-bottom:8px;}
.intelligence-title{font-size:22px;line-height:1.25;font-weight:800;color:#f7f7f8;margin-bottom:7px;}
.intelligence-copy{font-size:12px;line-height:1.6;color:#aeb5c5;max-width:760px;}
.intelligence-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;}
.intelligence-stat{padding:12px 13px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.12);border-radius:10px;}
.intelligence-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8f97a8;margin-bottom:5px;}
.intelligence-stat-value{font-size:14px;font-weight:750;color:#f4f5f8;}
.section-inline-head{margin-bottom:14px;}
@media(max-width:640px){.intelligence-stats{grid-template-columns:1fr}.intelligence-title{font-size:19px;}}
.card-title{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);margin:0 0 16px;text-transform:uppercase;letter-spacing:.13em;}
/* Um estilo só de label de formulário — sentence-case, Inter 600 (decisão
   do usuário 2026-08-29: o <label> cru e o .field-label agora batem, e
   sentence-case separa "rótulo de campo" de "eyebrow em mono maiúsculo").
   Espelha o `label` cru em styles.css:11. */
.field-label{font-size:12.5px;font-weight:600;color:var(--t-mid,var(--muted));display:block;margin-bottom:8px;}
.field-hint{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.4;}
.field-hint strong{color:var(--text);}
input[type="number"]{width:100%;background:var(--card2);border:1px solid var(--border);border-radius:10px;
    padding:14px 15px;font-family:'Inter',sans-serif;font-size:21px;font-weight:800;
    color:var(--text);font-variant-numeric:tabular-nums;}
input[type="number"]:focus{outline:2px solid var(--blue);outline-offset:1px;}
input[type="range"]{width:100%;accent-color:var(--blue);margin-top:12px;}
.quick-set{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.gate{margin-top:16px;padding:13px 15px;border-radius:10px;border:1px solid var(--border);
    background:var(--card2);font-size:12.5px;color:var(--muted);
    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.gate.blocked{border-color:#5c3a30;color:#e8a48f;}
.gate.warn{border-color:#6b5a2c;color:#e8cf8f;}
.gate .amount{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;
    background:color-mix(in srgb, var(--or) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--or) 40%, transparent);
    font-weight:800;color:var(--or);font-variant-numeric:tabular-nums;}
.combo-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.combo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
    padding:10px 13px;border-radius:9px;border:1px solid var(--border);
    background:var(--card2);font-size:12.5px;color:var(--muted);}
.combo-row span:first-child{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
    background:rgba(255,255,255,.045);border:1px solid var(--border);color:var(--text);font-weight:600;}
.combo-row span:last-child{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;
    background:rgba(244,197,66,.13);border:1px solid rgba(244,197,66,.4);
    font-weight:800;color:#f4c542;font-variant-numeric:tabular-nums;}
/* Fukurokumaru: cada degrau vira um bloco (header + grid de itens lado a
   lado), em vez de uma lista comprida empilhada — reduz rolagem. */
#fk-tiersList{display:flex;flex-direction:column;gap:14px;}
.fk-howto{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.fk-howto-step{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5;}
.fk-howto-step strong{color:var(--text);}
.fk-howto-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(243,154,61,.15);border:1px solid rgba(243,154,61,.4);color:var(--or);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.fk-howto-details{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.fk-howto-details summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);}
.fk-howto-details summary:hover{color:var(--or);}
.fk-howto-details p{font-size:11.5px;color:var(--muted);line-height:1.5;margin:10px 0 0;}
.fk-tier{display:flex;flex-direction:column;gap:6px;}
.fk-tier-header{background:rgba(244,197,66,.08);border-color:rgba(244,197,66,.25);}
.fk-tier-header span{font-weight:800;color:var(--text);}
.fk-tier-header span:last-child{color:#f4c542;}
.fk-tier-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px;}
.fk-tier-items .combo-row{font-size:11.5px;padding:8px 11px;}
/* "Fukurokumaru Especial" (2026-09-16): degraus por edição + linha de
   total acumulado no fim de cada uma, mesma "bandeja" das outras listas
   de tier, só com um destaque a mais no total. */
.fk-especial-edicao{border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--card2);}
.fk-especial-edicao + .fk-especial-edicao{margin-top:10px;}
.fk-especial-total{margin-top:8px;background:color-mix(in srgb, var(--or) 12%, transparent);border-color:color-mix(in srgb, var(--or) 35%, transparent);}
.fk-especial-total span:last-child{color:var(--or);}
/* Listas de degraus (Prêmio de Pontos / Prêmios Globais da Fusão) viram uma
   "bandeja" recolhível — mostra só o resumo acumulado por padrão, evita
   poluir a tela com a lista inteira; clica pra ver o detalhe por degrau. */
.tier-details{margin-top:10px;}
/* Seletor de edição (ref-edicoes.js): a gaveta some sozinha, sem .card em volta (2026-09-21, bug
   "ficou excessivamente espaçoso" -- um .card inteiro só pra 1 linha de resumo). */
.ref-edicoes-picker{margin-bottom:16px;}
.ref-edicoes-picker .tier-details{margin-top:0;}
.tier-summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    gap:12px;flex-wrap:wrap;padding:12px 15px;border-radius:10px;border:1px solid var(--border);
    background:var(--card2);transition:.15s;}
.tier-summary::-webkit-details-marker{display:none;}
.tier-summary:hover{border-color:color-mix(in srgb, var(--or) 45%, var(--border));}
.tier-summary-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tier-summary-text{font-size:12.5px;font-weight:700;color:var(--text);}
.tier-summary-value{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;
    background:rgba(244,197,66,.13);border:1px solid rgba(244,197,66,.4);
    font-weight:800;color:#f4c542;font-variant-numeric:tabular-nums;font-size:12.5px;}
.tier-chevron{font-size:11px;color:var(--muted);transition:transform .18s;flex:0 0 auto;}
.tier-details[open] .tier-chevron{transform:rotate(180deg);}
.tier-details .combo-list{margin-top:8px;}
.currency-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:20px;margin-bottom:10px;}
.currency-tag.lingotes{background:rgba(244,197,66,.12);color:#f4c542;border:1px solid rgba(244,197,66,.3);}
.currency-tag.cupons{background:rgba(61,220,175,.12);color:var(--green);border:1px solid rgba(61,220,175,.3);}
.currency-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.event-input-card.tone-lingotes{border-top:2px solid #f4c542;}
.event-input-card.tone-cupons{border-top:2px solid var(--green);}
#cv-lingotesObtidos,#cv-lingotesFinal{color:#f4c542 !important;}
.conv-table thead th:nth-child(2){color:#f4c542;}
.conv-table tbody td:nth-child(2){color:#f4c542;font-weight:700;font-variant-numeric:tabular-nums;}
#tbl-instant .conv-table thead th:nth-child(3){color:var(--green);}
#tbl-instant .conv-table tbody td:nth-child(3){color:var(--green);font-weight:700;font-variant-numeric:tabular-nums;}
.pkg-card .pkg-qty{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;
    background:color-mix(in srgb, var(--card-color, var(--or)) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--card-color, var(--or)) 45%, transparent);
    font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--card-color, var(--or));line-height:1.3;}
.pkg-card .pkg-range{font-size:11px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;}
.pkg-card .pkg-value{font-size:11.5px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-variant-numeric:tabular-nums;}
.moeda-row{display:flex;gap:12px;flex-wrap:wrap;}
.moeda-card{flex:1 1 200px;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:15px;}
.moeda-card .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.moeda-card .v{display:inline-flex;align-items:center;padding:6px 16px;border-radius:999px;
    background:color-mix(in srgb, var(--green) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--green) 40%, transparent);
    font-size:19px;font-weight:800;color:var(--green);margin-top:8px;font-variant-numeric:tabular-nums;}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px;}
@media(max-width:520px){.result-grid{grid-template-columns:1fr;}}
.result-block .k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:500;margin-bottom:8px;}
.result-block .v{display:inline-flex;align-items:baseline;gap:6px;padding:9px 20px;border-radius:999px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--or) 20%, transparent), color-mix(in srgb, var(--or) 12%, transparent));
    border:1px solid color-mix(in srgb, var(--or) 45%, transparent);
    box-shadow:0 8px 20px -10px color-mix(in srgb, var(--or) 55%, transparent);
    font-size:25px;font-weight:800;color:var(--or);font-variant-numeric:tabular-nums;line-height:1.15;}
.result-block .v small{font-size:13px;color:var(--muted);font-weight:700;}
.result-block .range{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;}
.return-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 15px;border-radius:30px;
    background:rgba(61,220,175,0.10);border:1px solid rgba(61,220,175,0.3);color:var(--green);font-weight:700;font-size:13px;}
.disclaimer{font-size:11.5px;color:var(--muted);line-height:1.65;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.fx-equiv{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;}
.fx-equiv span{white-space:nowrap;}
.fx-equiv b{color:var(--text);font-weight:600;}
.fx-note{font-size:10px;color:#5c6470;font-style:italic;margin-top:4px;}

.access-closed-card{text-align:center;padding:48px 24px;border:1px dashed var(--border);background:transparent;}
.access-closed-badge{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.35);color:var(--or);font-size:11px;font-weight:800;letter-spacing:.06em;margin-bottom:14px;}
.access-closed-card p{color:var(--muted);font-size:14px;max-width:440px;margin:0 auto;line-height:1.6;}

.community-filter-tab{background:transparent;border:1.5px solid var(--border);color:var(--muted);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;}
.community-filter-tab:hover{border-color:var(--or-line,rgba(255,122,24,.4));color:var(--text);}
.community-filter-tab.active{background:var(--or);border-color:var(--or);color:#1a1206;}
.wpg-modal-wide .wpg-modal-panel{max-width:760px;}
.dash-role-badge{display:inline-block;margin-top:6px;padding:4px 12px;border-radius:999px;background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.35);color:var(--or);font-size:11px;font-weight:800;letter-spacing:.05em;}
.dash-panel{display:none;}
.dash-panel.active{display:block;}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.dash-card{padding:18px;border-radius:12px;border:1px solid var(--border);background:var(--card2);text-align:center;}
.dash-card-num{font-size:28px;font-weight:800;color:var(--or);font-family:'Baloo 2',sans-serif;}
.dash-card-label{font-size:11.5px;color:var(--muted);margin-top:4px;}
.staff-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.05em;vertical-align:middle;}
.staff-tag.owner{background:rgba(255,122,24,.16);color:var(--or);border:1px solid rgba(255,122,24,.4);}
.staff-tag.moderador{background:rgba(127,140,255,.16);color:#9aa4ff;border:1px solid rgba(127,140,255,.4);}
.staff-tag.criador{background:rgba(255,95,162,.16);color:#ff5fa2;border:1px solid rgba(255,95,162,.4);}
.staff-tag.vip{background:rgba(255,122,24,.16);color:var(--or);border:1px solid rgba(255,122,24,.4);}
.provider-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.06);vertical-align:middle;color:var(--muted);}
.provider-badge svg{display:block;}
.verified-seal{display:inline-block;margin-left:6px;font-size:13px;vertical-align:middle;}
.disclaimer strong{color:#c3c9db;}
.wpg-footer span{font-size:12px;color:var(--muted);letter-spacing:.03em;}
.wpg-footer strong{color:var(--or);}
.sys-card .tag{font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--or);margin-bottom:6px;}
.sys-card .name{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:700;font-size:15.5px;color:var(--text);margin-bottom:4px;line-height:1.25;}
.sys-card .desc{font-size:12px;color:var(--muted);line-height:1.45;}
.note-btn{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
    border:1px solid #d9a441;background:rgba(217,164,65,.12);color:#e8cf8f;
    font-size:11px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.note-btn:hover{background:rgba(217,164,65,.25);}
.note-text{display:none;font-size:11px;color:#e8cf8f;margin-top:8px;line-height:1.5;padding-top:8px;border-top:1px dashed rgba(217,164,65,.25);}
.note-text.show{display:block;}
.back-btn:before{content:"←";font-size:13px;transition:.15s;}
.back-btn:hover:before{transform:translateX(-2px);}
.section-divider{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;margin:0 0 10px;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.stat-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.stat{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:14px 12px;}
.stat-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
/* Ícone de 1º Ataque (o mesmo do guia Atributos de Descoberta) nos rótulos de ganho de 1º ATK do Upgrade -- por
   CSS, preso ao data-i18n, pra não sumir quando o i18n reescreve o texto do rótulo (2026-09-22, pedido do dono). */
.stat-label[data-i18n="upgrade.stat.paGanho"]::before,.stat-label[data-i18n="upgrade.stat.paTotalGanho"]::before,.stat-label[data-i18n="upgrade.cincoChakras.statAtk"]::before,.stat-label.stat-label-atk::before{content:"";display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-4px;border-radius:3px;background:url(/upgrade/icons/primeiro-ataque.png) center/contain no-repeat;}
/* Eficiência com ícones: [1º Ataque] 1.21 [Pacote de Força II] (upgrade/eficiencia-html.js) */
.efic-linha{display:inline-flex;align-items:center;gap:5px;}
.efic-linha .resource-icon{margin:0;}
.stat-value{display:inline-flex;align-items:center;padding:4px 13px;border-radius:999px;
    background:color-mix(in srgb, var(--blue, #6c8cff) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--blue, #6c8cff) 35%, transparent);
    font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;color:var(--blue,#6c8cff);
    font-variant-numeric:tabular-nums;max-width:100%;}
/* Ícone de recurso (2026-09-14) -- item de verdade do jogo (Chave, Poção...)
   ao lado do nome, dentro do stat-value e do painel de detalhes. */
.resource-icon{width:18px;height:18px;border-radius:4px;margin-right:5px;flex:0 0 auto;vertical-align:-4px;}
/* Renomeado de .hero pra .stat-hero (2026-09-14): "hero" colidia com a
   classe genérica de seção (.hero{padding:82px 0 20px}, usada no topo de
   página) -- mesma especificidade, ordem do arquivo fazia o padding da
   seção vazar pro pill e esticar ele verticalmente (bug real, achado ao
   vivo, não é intencional). */
.stat-value.stat-hero{background:color-mix(in srgb, var(--or) 18%, transparent);
    border-color:color-mix(in srgb, var(--or) 45%, transparent);
    color:var(--or);font-size:19px;font-weight:800;}
/* Alguns stat-value (Monte, Orçamento) já recebem uma <span class="pill">
   própria via JS — se a gente pintar bolha OUTRA vez por fora, vira bolha
   dentro de bolha (feio, redundante). Nesse caso o wrapper vira só um
   container neutro e quem carrega a cor é a pill interna. */
.stat-value:has(.pill){display:block;background:none;border:none;padding:0;}
/* Lista de recursos (Pergaminho) é texto corrido, não um valor único —
   não faz sentido virar bolha (ficaria uma pílula gigante e feia). */
#perg-resources{display:block;background:none;border:none;padding:0;
    font-weight:600;color:var(--text);white-space:normal;line-height:1.5;}
.results{display:none;}
.results.show{display:block;}
.details-toggle{font-size:12px;color:var(--t-mid);cursor:pointer;margin-top:14px;user-select:none;text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px;transition:color .12s;}
.details-toggle:hover{color:var(--t-hi);}
.details-panel{display:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px;padding:12px 14px;background:var(--card2);border:1px solid var(--border);border-radius:10px;}
.details-panel.show{display:block;}
.warning-box{display:none;margin-top:14px;padding:11px 14px;border-radius:9px;background:rgba(224,113,106,.1);border:1px solid rgba(224,113,106,.3);color:#f0a89f;font-size:12.5px;}

/* "Quanto você já tem?" (2026-09-16) -- um card por recurso necessário,
   com input pra abater do total e mostrar "ainda falta". Reaproveitado em
   qualquer tela que chame renderResourceCards (Ajuda Ninja, Pedra,
   Pergaminho, Amuleto e qualquer outro sistema do Engine). */
.resource-cards{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.resource-cards:empty{margin-top:0;}
.resource-card{flex:1 1 180px;min-width:160px;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:12px 13px;}
.resource-card-need{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);margin-bottom:8px;}
.resource-card-need b{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
.resource-card-have-label{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.resource-card-have{width:100%;background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:7px 9px;font-size:13px;color:var(--text);font-family:'IBM Plex Mono',monospace;}
.resource-card-have:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}
.resource-card-falta{margin-top:8px;font-size:12.5px;color:var(--t-mid);}
.resource-card-falta b{color:var(--or);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}

/* Variante "só o campo" (2026-09-17) -- usada no topo da tela (perto dos
   seletores), sem "necessário"/"ainda falta" (isso só existe depois de
   calcular). Mesma classe .resource-card-have por dentro, só sem os outros
   dois blocos -- ver renderResourceHaveFields()/buildMonteHaveSlots(). */
.resource-have-top{margin-bottom:18px;}
.resource-have-top:empty{margin-bottom:0;}
.resource-card-have-only .resource-card-have-label{margin-bottom:6px;display:flex;align-items:center;gap:5px;}

/* 1º Ataque de Refino (Polimento/Descoberta), 2026-09-19 -- mesma paleta de
   input de .resource-card-have, mas em grade de 3 colunas (não é card de
   recurso, é a fórmula de um sistema só). */
.refino-formula-card{margin-bottom:18px;}
.refino-formula-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
.refino-formula-field label{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.refino-formula-field .qty-label-row{margin-bottom:4px;}
.refino-formula-field input,.refino-formula-field select{width:100%;background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:7px 9px;font-size:13px;color:var(--text);font-family:'IBM Plex Mono',monospace;}
.refino-formula-field input:focus,.refino-formula-field select:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}
.refino-formula-base-preview{font-size:12.5px;color:var(--t-mid,var(--muted));margin:0 0 10px;}
.refino-formula-result{font-size:13px;color:var(--text);}
.refino-formula-result b{color:var(--or);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;margin-left:6px;}
@media(max-width:640px){.refino-formula-grid{grid-template-columns:1fr;}}

/* Grade comprimida "atual → desejado" do Monte/Artefato (2026-09-19) -- 1
   linha por slot (Equilíbrio/Óleo, Kata do Sapo/Taijutsu/Ninjutsu, Rin/Jin/
   Retsu), os 2 seletores lado a lado, no lugar dos 2 blocos separados que
   existiam antes (espalhando as N partes na horizontal, dobrando a altura).
   Ver buildMonteSlotsCombined() em tools.js. */
.monte-slot-combo-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.monte-slot-combo-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px;}
.monte-slot-combo-label{font-size:12.5px;color:var(--t-mid,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.monte-slot-combo-row select{background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:7px 9px;font-size:12.5px;color:var(--text);font-family:'IBM Plex Mono',monospace;width:110px;}
.monte-slot-combo-row select:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}
.monte-slot-combo-arrow{color:var(--muted);font-size:13px;}
@media(max-width:640px){
  .monte-slot-combo-row{grid-template-columns:1fr auto 1fr;}
  .monte-slot-combo-label{grid-column:1/-1;white-space:normal;}
  .monte-slot-combo-row select{width:100%;}
}

/* Camada de "Atributos Completos" (Vida, Ataque, Dano etc.) — grade de */
/* quadradinhos, um por atributo, exibida junto ao resultado do Monte    */
/* Myouboku. A tabela detalhada por etapa reaproveita .details-toggle /  */
/* .details-panel já existentes (mesmo padrão visual do resto da tela). */
.monte-attr-section{display:none;margin-top:18px;}
.monte-attr-section.show{display:block;}
.monte-attr-title{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:500;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.monte-attr-title::after{content:'';flex:1;height:1px;background:var(--border);}
.monte-attr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.monte-attr-box{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;}
.monte-attr-box .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.monte-attr-box .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
/* Bônus de Essência Perfeita (só Artefacto, 2026-09-14) -- ver calcMonte() em tools.js. */
.monte-essencia-box{display:none;margin-top:18px;gap:12px;align-items:center;border:1px solid var(--or-line,var(--or));background:var(--or-wash,rgba(255,122,47,.08));border-radius:12px;padding:12px 14px;}
.monte-essencia-box.show{display:flex;}
.monte-essencia-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--card2);border:1px solid var(--border);}
.monte-essencia-title{font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:2px;}
.monte-essencia-note{font-size:12px;color:var(--muted);margin:0;line-height:1.4;}
.monte-attr-box.vida .v{color:var(--red,#e0716a);}
.monte-attr-box.ataque .v,.monte-attr-box.dano .v{color:var(--orange2,var(--or));}
.monte-attr-box.defesa .v,.monte-attr-box.resistencia .v{color:var(--blue,#6c8cff);}
.monte-attr-box.combo .v,.monte-attr-box.ninjutsu .v{color:var(--purple);}
.monte-attr-box.critico .v,.monte-attr-box.ataque-critico .v,.monte-attr-box.dano-critico .v{color:var(--red,#e0716a);}
.monte-attr-box.controle .v{color:var(--green);}
.monte-attr-detail-table{width:100%;border-collapse:collapse;font-size:11.5px;}
.monte-attr-detail-table th{text-align:left;color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--border);}
.monte-attr-detail-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);}
.attr-qty-note{font-size:11px;color:var(--muted);margin:4px 0 0;font-style:italic;}

/* Guia "Qual Mapa upar primeiro?" (Jogos → Naruto Online → Guias) — rota por
   família (reaproveita Engine/SYSTEMS, zero cálculo novo) + análise avançada
   por mapa nomeado (reaproveita .monte-attr-grid/.monte-attr-box acima pros
   atributos full upgrade). Ver renderGuiaPergaminhos() em tools.js. */
/* Grid informativo das famílias de Pergaminho (Guias, 2026-09-14 --
   substitui a antiga grade de recomendação de rota). Art-forward, mesmo
   tratamento dos cards de Jogos (.jogos-pick-card): screenshot real da
   interface do pergaminho no fundo, gradiente por baixo, texto sobre o
   gradiente. Sem imagem mapeada (ver GUIA_FAMILIA_ART em tools.js), cai
   no ícone decorativo genérico. Clique abre e rola até o grupo
   correspondente no informativo detalhado abaixo. */
.guia-familias-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.guia-familia-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;height:190px;cursor:pointer;display:flex;align-items:flex-end;isolation:isolate;background:linear-gradient(135deg,var(--s-800,#141a25),var(--s-900,#0c0f16));transition:border-color .22s,transform .22s,box-shadow .22s;}
.guia-familia-card:hover{border-color:var(--or-line,var(--or));transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(0,0,0,.6);}
.guia-familia-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .35s cubic-bezier(.2,.7,.3,1);}
.guia-familia-card:hover .guia-familia-art{transform:scale(1.06);}
.guia-familia-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,15,0) 30%,rgba(8,10,15,.94) 100%);z-index:-1;}
.guia-familia-card-icon{position:absolute;top:-14px;right:-14px;width:92px;height:92px;color:var(--or);opacity:.09;z-index:-1;}
.guia-familia-body{position:relative;padding:14px 16px;width:100%;}
.guia-familia-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:7px;}
.guia-familia-name{font:700 15px var(--display);letter-spacing:-.01em;color:var(--text);margin-bottom:4px;}
.guia-familia-count{font-size:12px;color:var(--muted);}
.guia-familia-go{margin-top:10px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--or);}
.guia-map-group{margin-top:18px;}
.guia-map-group:first-child{margin-top:0;}
.guia-map-group-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;display:flex;align-items:center;gap:8px;}
.guia-map-row{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--card2);}
.guia-map-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
.guia-map-row-name{font-size:13.5px;font-weight:600;color:var(--text);}
.guia-map-row-summary{font-size:11.5px;color:var(--muted);}
.guia-map-detail{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.guia-map-detail.show{display:block;}
.card.guia-destaque{border-color:var(--or);box-shadow:0 0 0 1px var(--or) inset,0 10px 28px rgba(0,0,0,.12);}
.guia-analise-panel{display:none;}
.guia-analise-panel.show{display:block;}
.guia-full-list{display:flex;flex-direction:column;border-top:1px solid var(--border);}
.guia-full-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--border);}
.guia-full-rank{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--muted);width:26px;flex-shrink:0;}
.guia-full-name{flex:1;font-size:13.5px;font-weight:600;color:var(--text);}
.guia-full-score{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.guia-attr-winner{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--green);border-radius:12px;background:var(--card2);box-shadow:0 0 0 1px var(--green) inset;}
.guia-attr-winner-trophy{font-size:28px;flex-shrink:0;}
.guia-attr-winner-label{margin:0 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.guia-attr-winner-names{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--text);}
.guia-attr-winner-value{margin:0;font-size:12.5px;color:var(--green);font-weight:600;}
.guia-attr-link{cursor:pointer;}
.guia-attr-link:hover{text-decoration:underline;}
.guia-full-name.guia-attr-link{color:var(--blue,#6c8cff);}
.guia-attr-winner-names .guia-attr-link:hover{color:var(--or);}
.attr-combo{position:relative;max-width:280px;}
.attr-combo-field{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:11px 12px;cursor:text;}
.attr-combo-field:focus-within{border-color:var(--or);}
.attr-combo-icon{font-size:13px;flex-shrink:0;opacity:.7;}
.attr-combo-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;padding:0;}
.attr-combo-input::placeholder{color:var(--muted);}
.attr-combo-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card2);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.4);max-height:264px;overflow-y:auto;z-index:20;}
.attr-combo-option{padding:10px 13px;font-size:13.5px;color:var(--text);cursor:pointer;}
.attr-combo-option:hover,.attr-combo-option.highlighted{background:var(--border);}
.attr-combo-empty{padding:10px 13px;font-size:12.5px;color:var(--muted);font-style:italic;}
.attr-combo-pill{display:inline-flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:9px 10px 9px 14px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;}
.attr-combo-pill:hover{border-color:var(--or);}
.attr-combo-pill-clear{color:var(--muted);font-size:16px;line-height:1;padding:2px 4px;border-radius:6px;}
.attr-combo-pill-clear:hover{color:var(--text);background:var(--border);}
.attr-combo-field[hidden],.attr-combo-pill[hidden]{display:none;}
.guia-map-detail-summary{font-size:13px;color:var(--muted);margin:0 0 10px;}
.guia-map-detail-summary b{color:var(--text);}
.guia-attr-detail-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.guia-attr-detail-table th{text-align:left;color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--border);}
.guia-attr-detail-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);}
.guia-attr-detail-table th:not(:first-child),.guia-attr-detail-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
.guia-attr-row-confirmada td{color:var(--green);font-weight:600;}
.guia-attr-row-confirmada td:first-child{color:var(--text);font-weight:600;}
.check-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);padding:8px 0;cursor:pointer;}
.check-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--or);cursor:pointer;flex-shrink:0;}
#sub3-calc select, #sub3-calc input[type="number"]{font-family:'IBM Plex Mono',monospace;}
#sub3-calc .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
#sub3-calc .field label{font-size:12.5px;color:var(--t-mid,var(--muted));}
.screen{display:none;}
.screen.active{display:block;}
.calc-title{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--text);margin:0 0 2px;}
.calc-resource-note{font-size:12px;color:var(--muted);margin:0 0 18px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}
.field-row-5 select{padding:8px 4px;font-size:12px;}
.field-row-6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px;}
.field-row-6 select{padding:8px 4px;font-size:12px;}
/* Cinco Chakras -- Cordas de Chakra que a pessoa já tem (ícone + campo, 3 por chakra), ver upgrade/cinco-chakras.js */
.cc-corda-linha{display:flex;align-items:center;gap:6px;margin-top:6px;}
.cc-corda-linha .resource-icon{flex:0 0 auto;margin:0;}
.cc-corda-linha input{flex:1 1 auto;min-width:0;width:100%;padding:6px 8px;font-size:12px;}
.field-row-dyn{display:grid;gap:8px;margin-bottom:14px;}
.field-row-dyn select,.field-row-dyn input{padding:8px 6px;font-size:12.5px;}
.field-solo{max-width:280px;margin-bottom:16px;}
/* Preview de imagem ao lado de um select (2026-09-19, Pedra por nível) --
   genérico o bastante pra qualquer outro campo que precise disso depois,
   mas hoje só a Pedra usa (ver updatePedraNivelPreview em main.js). */
.field-with-preview{display:flex;align-items:center;gap:10px;}
.field-with-preview select{flex:1;min-width:0;}
.pedra-nivel-preview{flex-shrink:0;border-radius:8px;border:1px solid var(--border);background:var(--card2);object-fit:cover;}
/* Ícone da "unidade" ao lado do label de Quantidade (2026-09-19, Ajuda
   Ninja/Bandeira de Comando) -- ver applyQtyConfig() em main.js. */
.qty-label-row{display:flex;align-items:center;gap:6px;}
.subgroup-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.btn{width:100%;background:var(--or);color:#111;border:none;border-radius:9px;padding:13px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 9px 26px rgba(255,122,24,.16);transition:.15s;}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:scale(.99);}
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:9px;font-weight:700;line-height:1;margin-left:4px;cursor:help;background:transparent;padding:0;}
.info-dot:hover{border-color:var(--or);color:var(--or);}
.footnote{font-size:11px;color:var(--muted);text-align:center;margin-top:20px;}
.cmp-card{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:13px 14px;margin-bottom:9px;}
.cmp-card.best{border-color:var(--or);background:var(--card);}
.cmp-rank{font-size:9.5px;font-weight:800;color:var(--or);letter-spacing:.06em;margin-bottom:4px;}
.cmp-name{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:700;font-size:14.5px;color:var(--text);margin-top:4px;}
.cmp-lvl{font-size:11px;color:var(--muted);margin-bottom:10px;}
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cmp-col-title{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
.cmp-row{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text);}
.cmp-row .eff{color:var(--or);font-weight:600;}
.cmp-row.pilled{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:'Inter',sans-serif;}
/* Trio de 1º ATK — 1º degrau da régua (o mais eficiente agora) */
.cmp-row.trio-best{border-left:2px solid var(--or);padding-left:8px;margin-left:-2px;}
#trio-1oatk-card .cmp-row.pilled{margin-bottom:5px;}
.trio-ess-toggle{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted);cursor:pointer;}
.trio-ess-toggle input{margin-top:2px;}

/* ---------------------------------------------------------------------- */
/* Bolhas (pills) — envolve números soltos (ganho/custo/eficiência/etapa/  */
/* atributos) pra separar visualmente cada valor, em vez de texto corrido */
/* com " · ". Usado no Comparador, Orçamento, Conversor e na camada de    */
/* Atributos Completos do Monte Myouboku. Reaproveitar essas classes em   */
/* qualquer tela nova que precise do mesmo tratamento.                    */
/* ---------------------------------------------------------------------- */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid;font-variant-numeric:tabular-nums;line-height:1.6;}
.pill.gain{background:rgba(67,199,155,.14);color:var(--green);border-color:rgba(67,199,155,.35);}
.pill.cost{background:var(--or-wash,rgba(255,122,24,.14));color:var(--or);border-color:var(--or-line,rgba(255,122,24,.4));}
.pill.eff{background:rgba(108,140,255,.14);color:var(--blue,#6c8cff);border-color:rgba(108,140,255,.35);}
.pill.etapa{background:rgba(154,163,173,.14);color:var(--muted);border-color:rgba(154,163,173,.3);}
/* Custo ainda não confirmado (2026-09-19, ver packFCPillHtml em tools.js) --
   mesma paleta neutra do .pill.etapa, pra não parecer "grátis" (.pill.cost
   normal) nem um erro (vermelho). */
.pill.cost-indisponivel{background:rgba(154,163,173,.14);color:var(--muted);border-color:rgba(154,163,173,.3);font-style:italic;}
/* atributos completos (Vida, Ataque, Dano etc.) — cor por significado, */
/* mesma paleta usada nos quadradinhos de resumo. */
.pill.attr-vida{background:rgba(224,113,106,.14);color:var(--red,#e0716a);border-color:rgba(224,113,106,.35);}
.pill.attr-ataque,.pill.attr-dano{background:rgba(255,122,47,.14);color:var(--orange2,var(--or));border-color:rgba(255,122,47,.35);}
.pill.attr-defesa,.pill.attr-resistencia{background:rgba(108,140,255,.14);color:var(--blue,#6c8cff);border-color:rgba(108,140,255,.35);}
.pill.attr-combo,.pill.attr-ninjutsu{background:rgba(176,120,232,.14);color:var(--purple);border-color:rgba(176,120,232,.35);}
.pill.attr-critico,.pill.attr-ataque-critico,.pill.attr-dano-critico{background:rgba(224,113,106,.14);color:var(--red,#e0716a);border-color:rgba(224,113,106,.35);}
.pill.attr-controle,.pill.attr-1oataque{background:rgba(67,199,155,.14);color:var(--green);border-color:rgba(67,199,155,.35);}
.cmp-maxed{font-size:12px;color:var(--muted);font-style:italic;}
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:7px;color:#8d95a1;font-size:12.5px;font-weight:600;background:transparent;border:none;font-family:'Inter',sans-serif;cursor:pointer;}
.nav-dropdown-trigger:hover{color:#f3f5f7;background:#141922;}
.nav-dropdown.open .nav-dropdown-trigger{color:#fff;background:#1a1f27;box-shadow:inset 0 0 0 1px #2b333e;}
#navDropdown:has(.nav-dropdown-item.active) .nav-dropdown-trigger{color:#fff;background:#1a1f27;box-shadow:inset 0 0 0 1px #2b333e;}
.lang-dropdown-menu{left:auto;right:0;min-width:170px;}
.lang-dropdown-trigger{padding:8px 10px;font-size:12px;}
.lang-flag{font-size:15px;line-height:1;}
.lang-dropdown-item{padding:9px 11px;font-size:13px;font-weight:600;color:#c3c9d3;gap:9px;}
.lang-dropdown-item.active{color:var(--or);background:rgba(255,122,26,.08);}
@media(max-width:700px){.lang-dropdown{display:none;}}
.nav-dropdown-arrow{font-size:10px;transition:transform .15s;}
.nav-dropdown.open .nav-dropdown-arrow{transform:rotate(180deg);}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:320px;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:40;}
.nav-dropdown.open .nav-dropdown-menu{display:flex;flex-direction:column;gap:2px;}
.nav-dropdown-item{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:10px 12px;border-radius:9px;background:transparent;border:none;font-family:'Inter',sans-serif;cursor:pointer;}
.nav-dropdown-item:hover:not(:disabled){background:#1a1f27;}
.nav-dropdown-item.active{background:rgba(255,122,26,.08);}
.nav-dropdown-item.active .nav-dropdown-title{color:var(--or);}
.nav-dropdown-item:disabled{cursor:not-allowed;opacity:.5;}
.nav-dropdown-icon{font-size:20px;line-height:1;flex-shrink:0;margin-top:1px;}
.nav-dropdown-text{display:flex;flex-direction:column;gap:2px;}
.nav-dropdown-title{color:#fff;font-size:13.5px;font-weight:700;}
.nav-dropdown-desc{color:#8d95a1;font-size:11.5px;line-height:1.4;}
@media(max-width:700px){
  .nav-dropdown{display:none;}
}
@media(max-width:760px){
  .navrow{padding:10px 16px;align-items:center;}
  .brand-logo{height:34px!important;max-width:150px;}
  .tabs{overflow-x:auto;max-width:65vw;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;padding:8px 10px;}
  .wrap{padding:0 16px;}
  .hero{padding-top:48px;}
  .hero h1{font-size:36px;}
}
@media(max-width:480px){.hero h1{font-size:31px}.pkg-grid{grid-template-columns:1fr!important}.navrow{gap:12px}.brand-logo{max-width:120px;object-fit:contain;object-position:left center;}}
h1,h2{font-family:var(--display);}
h3,.brand{font-family:'Inter',system-ui,sans-serif;}
.brand{font-size:19px;font-weight:700;letter-spacing:.01em;display:flex!important;align-items:center;text-decoration:none;line-height:0;flex:none;}
.routebar-inner span:last-child{color:var(--or);font-weight:700;}
.hero{padding:82px 0 20px;}
.eyebrow{font-family:var(--mono);text-transform:uppercase;margin-bottom:10px;color:var(--or);font-size:10.5px;letter-spacing:.15em;font-weight:500;}
.hero h1{margin-bottom:18px;font-size:50px;letter-spacing:-.02em;line-height:1.02;margin:0 0 20px;max-width:850px;font-weight:800;}
.hero h1 .hl{background:linear-gradient(90deg,#fff 0%,var(--or-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{margin:0 0 10px;max-width:700px;color:#aeb6c0;font-size:15px;line-height:1.8;}
.hero p.thanks{color:#6f7883;font-size:12.5px;margin-top:14px;}
.section-title{font-weight:700;margin-top:58px;font-size:22px;letter-spacing:-.025em;margin:60px 0 7px;color:#f0f2f4;}
.section-sub{color:#727c88;font-size:13px;margin-bottom:20px;}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.coach-alvo-add-row{display:flex;gap:10px;margin-top:10px;}
.coach-alvo-add-row input{flex:1;min-width:0;}
.coach-alvo-add-row .btn{flex:none;width:auto;white-space:nowrap;}
.coach-alvos-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.coach-alvos-empty{margin:12px 0 0;}
.coach-alvo-chip{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:7px 8px 7px 14px;font-size:13px;}
.coach-alvo-chip.sem-dados{opacity:.6;border-style:dashed;}
.coach-alvo-remover{all:unset;cursor:pointer;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);font-size:14px;line-height:1;transition:background .15s,color .15s;}
.coach-alvo-remover:hover{background:rgba(255,90,90,.18);color:#ff8a8a;}
.coach-itens-title{font-weight:700;font-size:13.5px;margin:16px 0 6px;}
.coach-fonte-card{padding:13px 15px;background:linear-gradient(180deg,#12171d,#0f1318);border:1px solid #252c34;border-radius:12px;margin-bottom:10px;}
.coach-fonte-card .coach-fonte-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.coach-fonte-card .coach-fonte-nome{font-weight:700;font-size:13.5px;}
.coach-fonte-card .coach-fonte-custo{font-weight:700;color:var(--or);}
.coach-fonte-card .coach-fonte-nota{color:var(--muted);font-size:12px;margin-top:5px;}
.coach-fonte-card.nao-garantida{opacity:.75;border-style:dashed;}
.coach-personagem-block{margin-bottom:22px;}
.coach-personagem-block h4{margin:0 0 6px;font-size:14.5px;}
.coach-ranking-title{font-weight:700;font-size:13.5px;margin:18px 0 6px;}
.coach-ficha-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.coach-ficha-actions .btn{padding:8px 14px;font-size:12.5px;}
.pkg-card{padding:15px;background:linear-gradient(180deg,#12171d,#0f1318);border:1px solid #252c34;border-top:1px solid #303842;border-radius:14px;box-shadow:0 16px 42px rgba(0,0,0,.20);transition:.18s;}
.pkg-card:hover{transform:translateY(-3px);border-color:#3a434e;box-shadow:0 20px 55px rgba(0,0,0,.28);}
.pkg-card .pkg-name{text-transform:uppercase;font-weight:800;margin-bottom:8px;color:#eef1f3!important;letter-spacing:.07em;font-size:11px!important;}
.pkg-card>div:nth-child(2){color:#a0a9b3!important;}
.pkg-card ul{color:#b9c1c9!important;}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;border:none;font-weight:700;font-size:14px;font-family:'Inter',sans-serif;cursor:pointer;background:var(--or)!important;color:#111!important;box-shadow:0 9px 26px rgba(255,122,24,.16)!important;border-radius:8px;padding:11px 17px;}
.cta:hover{filter:brightness(1.07);}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:8px;gap:16px;}
.minicard{transition:.2s;background:var(--s-850);border:1px solid #232a32;border-radius:12px;padding:20px;}
.minicard:hover{border-color:#3b444f;transform:none;}
.minicard h3{margin:0 0 4px;font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:#e9edf0;}
.minicard p{margin:0;line-height:1.5;font-size:12px;color:#7f8995;}
select,input[type="text"],input[type="number"],textarea{background:#0c1015;border-color:#2a3139;}
select:focus,input[type="text"]:focus,textarea:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}
.result-hero{border:1px solid #2a2647;background:linear-gradient(145deg,#171b20,#11151a 60%,var(--s-850));border-color:#313944;}
.badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;margin-left:6px;background:var(--or);color:#111318;}
.badge-old{background:#3a3f47;color:#b8bfc8;}
tr.pkg-row.historical{opacity:.6;}
.sys-card{border:1px solid var(--border);padding:16px 16px 14px;cursor:pointer;transition:.15s;text-align:left;position:relative;background:var(--s-850);border-color:#252c34;border-radius:12px;}
.sys-card:hover{border-color:var(--or);background:#13181e;transform:translateY(-2px);}
.sys-card.special{border-color:var(--or-line,rgba(255,122,24,.30));background:linear-gradient(160deg,#11161c,var(--or-wash,rgba(255,122,24,.045)));}
.sys-card.special .name{color:var(--or-300);}
@media(max-width:760px){
  .navrow{padding:10px 16px;min-height:60px;gap:14px;}
  .brand-logo{height:38px!important;max-width:155px;}
  .tabs{max-width:67vw;overflow-x:auto;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;padding:8px 10px;}
  .routebar-inner{padding:8px 16px;}
  .wrap{padding:0 16px;}
  .hero{padding-top:52px;}
  .hero h1{font-size:38px;}
}
@media(max-width:480px){.hero h1{font-size:32px}.brand-logo{height:34px!important;max-width:125px;}}
/* max-width fixo (era 1120px, depois 1320px) não escala com a tela -- em
   1920px já sobrava ~176px vazios de cada lado, em telas QHD/ultrawide
   passava de 400-900px por lado. Trocado por fluido com teto: cresce
   proporcional ao espaço real disponível (90% de .app-main, que já
   exclui a sidebar) até um limite absoluto de 1560px, pra nunca esticar
   demais o texto em monitor gigante nem virar width:100% indiscriminado. */
.wrap{margin:0 auto;max-width:min(1560px, 90%);padding:0 28px;}
/* "Sidebar fantasma" (auditoria mobile 2026-08-26): a fórmula acima (90%
   de largura + margin:auto) é só desktop -- as regras existentes de
   ≤520/700/760px já reduzem o padding pra 16px, mas nunca soltam o
   max-width, então sobra um gutter de margin:auto (~5% da tela) somado
   ao padding. Medido ao vivo em 8 páginas (Home/Comunidade/Comércio/
   Feed/Jogos/Patrocinadores/Ranking/Sobre): TODAS com o mesmo corte de
   ~34.75px de cada lado em 375px (~70px de conteúdo útil perdido) --
   não é um elemento "fantasma" escondido, é essa mesma fórmula de wrap
   aplicada igual em todo lugar. 880px reaproveita o breakpoint que a
   .app-sidebar/.mobile-menu-btn já usam (não inventa um novo valor). */
@media(max-width:880px){.wrap{max-width:100%;}}
.home-hero{min-height:470px;padding:84px 0 76px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:70px;align-items:center;border-bottom:1px solid #1a1f27;}
.home-hero-copy{max-width:680px;}
.home-hero .eyebrow{color:var(--or);margin-bottom:18px;font-size:10px;letter-spacing:.16em;}
.home-hero h1{font-family:var(--display);font-size:58px;line-height:1.02;letter-spacing:-.022em;margin:0 0 24px;font-weight:900;color:#f4f5f7;}
.home-hero h1 span{color:var(--or);}
.hero-lead{max-width:650px;color:#9da5b2;font-size:16px;line-height:1.75;margin:0;}
.hero-actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;}
.hero-primary,.hero-secondary{border-radius:7px;padding:12px 18px;font:600 13px 'Inter',sans-serif;cursor:pointer;transition:.15s;}
.hero-primary{background:var(--or);color:#101216;border:1px solid var(--or);}
.hero-primary:hover{filter:brightness(1.08);}
.hero-secondary{background:#11151c;color:#dce0e6;border:1px solid #2b313b;}
.hero-secondary:hover{border-color:var(--or);color:#fff;}
/* .hero-discord: apesar do nome, é um botão compartilhado ("Entrar com
   Discord" na doação e em outros pontos do site) -- NÃO é só do hero. O
   hero deixou de usar em 2026-09-03 (leva Nova Home B1), mas a regra fica
   pros outros. */
.hero-discord{display:inline-flex;align-items:center;gap:7px;border-radius:7px;padding:12px 18px;font:600 13px 'Inter',sans-serif;background:#11151c;color:#8d95a1;border:1px solid #2b313b;text-decoration:none;transition:.15s;}
.hero-discord:hover{border-color:#5865F2;color:#fff;background:rgba(88,101,242,.1);}
/* Arte oficial do Hero (redesign visual da Home, 2026-08-24) -- asset
   próprio com transparência real (canal alfa), substitui o antigo
   logotipo em texto (WPG/PROJECT). Sem moldura/card em volta -- a
   máscara dissolve a borda esquerda (lado do texto) direto no fundo,
   sem precisar de gradiente/filtro por cima da imagem. */
/* Sidebar Colapsável (2026-08-24): 440px nunca tinha ficado visivelmente
   pequeno antes porque a área de conteúdo nunca tinha sido tão larga --
   agora que o rail recolhido libera ~176px a mais, o limite antigo passou
   a sobrar espaço vazio à esquerda da arte em vez de a imagem crescer
   junto (coluna .85fr do grid cresce, a imagem não acompanhava por causa
   do cap fixo). Ainda é min(100%,...) -- nunca estoura a célula em telas
   estreitas, só passou a acompanhar melhor telas largas. */
.home-hero-mark{justify-self:end;width:min(100%,560px);position:relative;aspect-ratio:1/.82;}
.home-hero-graph{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 100%);}
.home-section{padding:68px 0 0;}
.home-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px;}
.home-section-head h2{font:800 27px/1.15 var(--display);letter-spacing:-.02em;margin:3px 0 0;}
.home-section-head>p{color:#737b87;font-size:12px;margin:0 0 2px;max-width:330px;text-align:right;line-height:1.5;}
.section-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;font-weight:500;color:var(--or);text-transform:uppercase;}
/* Seções editoriais da Home (Nova Home B2a, 2026-09-03) -- "A outra
   metade" e "Feito por um jogador". Ritmo de texto, não grade de cards:
   .home-beats são 4 linhas soltas com filete, sem box e sem botão. */
.home-lede{max-width:60ch;color:#9da5b2;font-size:clamp(15px,2vw,17px);line-height:1.7;margin:0 0 22px;}
.home-beats{list-style:none;margin:2px 0 24px;padding:2px 0 2px 20px;border-left:2px solid var(--or);display:flex;flex-direction:column;}
.home-beats li{margin:0;padding:13px 2px;font-size:clamp(17px,2.4vw,20px);font-weight:600;color:var(--text);line-height:1.45;letter-spacing:-.01em;}
.home-beats li+li{border-top:1px solid var(--border);}
.home-editorial-close{max-width:56ch;margin:0;padding-top:16px;border-top:1px solid var(--border);font-size:14.5px;font-weight:600;color:#9da5b2;}
.home-madeby-roadmap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font-size:13px;color:var(--muted);line-height:1.55;}
.home-madeby-roadmap .rm-text{max-width:46ch;}
.home-madeby-roadmap a{color:var(--or);font-weight:700;text-decoration:none;white-space:nowrap;}
.home-madeby-roadmap a:hover{filter:brightness(1.1);}
/* Seção "O WPG tá vivo" (Nova Home B2b, 2026-09-03): uma FRESTA pra uma
   conversa que já está acontecendo dentro do WPG -- não uma miniatura da
   página Comunidade. Trilho estreito (3 canais + 1 voz) + a conversa como
   protagonista, recortada por cima (max-height) e por baixo (mask-image).
   Classes .ham-* próprias. aria-hidden + sem interação -- o CTA é o único link. */
.home-alive-mock{display:grid;grid-template-columns:158px 1fr;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0c0f16;margin:10px 0 6px;max-height:216px;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);}
.ham-side,.ham-chat{min-width:0}
.ham-side{border-right:1px solid var(--border);padding:12px 9px;display:flex;flex-direction:column;gap:11px;background:#0a0d14}
.ham-sec{display:flex;flex-direction:column;gap:3px}
.ham-chan{display:flex;align-items:center;gap:6px;font:700 11.5px 'Inter',sans-serif;color:var(--muted);padding:6px 8px;border-radius:7px;white-space:nowrap;overflow:hidden}
.ham-chan.ham-on{background:var(--or-wash,rgba(255,122,26,.14));color:var(--or);box-shadow:inset 3px 0 0 var(--or)}
.ham-chan .ham-h{opacity:.5;flex-shrink:0}
.ham-av{display:flex;margin-left:auto;flex-shrink:0}
.ham-av i{width:13px;height:13px;border-radius:50%;font-style:normal;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#0b0e14;margin-left:-5px;border:1.5px solid #0a0d14}
.ham-chat{padding:10px 16px 16px;display:flex;flex-direction:column;gap:5px;background:#0c0f16;min-width:0}
.ham-chat-hdr{font:700 12px 'Inter',sans-serif;color:var(--text);padding-bottom:7px;border-bottom:1px solid var(--border);margin-bottom:3px}
.ham-msg{max-width:min(76%,310px);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:5px 10px;font-size:11.5px;line-height:1.42;color:#d7dbe1;align-self:flex-start;overflow-wrap:break-word}
.ham-msg-au{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--muted);margin-bottom:3px}
.ham-msg-au i{width:14px;height:14px;border-radius:50%;font-style:normal;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#0b0e14;flex-shrink:0}
.ham-msg-me{align-self:flex-end;background:var(--or-wash,rgba(255,122,26,.13));border-color:var(--or-line,rgba(255,122,26,.3))}
.ham-msg-me .ham-msg-au{color:var(--or)}
/* CTA de seção da Home (botão-fantasma): nasceu no B2b ("Ver a comunidade
   por dentro"), reusado no B2c ("Ver os jogos"). Mesmo tratamento do
   .hero-secondary. */
.home-alive-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 18px;border-radius:7px;background:#11151c;border:1px solid #2b313b;color:#dce0e6;font:600 13px 'Inter',sans-serif;text-decoration:none;transition:border-color .15s,color .15s}
.home-alive-cta:hover{border-color:var(--or);color:#fff}
@media(max-width:600px){
  /* trilho mais apertado (avatares somem), fresta um pouco mais alta (texto quebra mais). */
  .home-alive-mock{grid-template-columns:104px 1fr;max-height:224px}
  .ham-side{padding:10px 7px;gap:9px}
  .ham-chan{font-size:10px;padding:5px 6px;gap:5px}
  .ham-av{display:none}
  .ham-chat{padding:10px 13px 14px}
  .ham-msg{max-width:100%;font-size:11px}
}
/* Seção "Cada jogo tem seu canto" (Nova Home B2c, 2026-09-03): cada jogo =
   um bloco de texto (rótulo de estado + nome + 1 linha), separado por fio,
   SEM card/caixa -- mesmo ritmo editorial das batidas do B2a. */
.home-cantos{margin:2px 0 6px;}
.home-canto{padding:16px 0;border-top:1px solid var(--border);}
.home-canto:first-child{border-top:0;padding-top:4px;}
.home-canto-label{font-family:var(--mono),monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;}
.home-canto-label.is-live{color:var(--or);}
.home-canto-label.is-soon{color:#6b7280;}
.home-canto h3{font:700 clamp(17px,2.3vw,20px) var(--display);letter-spacing:-.01em;margin:0 0 5px;}
.home-canto p{margin:0;color:#9da5b2;font-size:14px;line-height:1.6;max-width:58ch;}
/* Seção "Ajuda a manter de pé" (Nova Home B2d, 2026-09-03): a linha do
   Ranking é secundária -- texto menor/apagado + link, nunca botão (decisão
   4 do B2: Ranking colado no apoio, sem seção própria). */
.home-apoio-rank{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.6;max-width:58ch;}
.home-apoio-rank a{color:var(--or);font-weight:700;text-decoration:none;white-space:nowrap;}
.home-apoio-rank a:hover{filter:brightness(1.1);}
.platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.platform-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent,var(--or));opacity:.9;}
.platform-card:hover{transform:translateY(-3px);border-color:#353c47;background:#11161d;}
.platform-card-soon{opacity:.5;cursor:not-allowed;}
.platform-card-soon:hover{transform:none;border-color:var(--border);background:var(--s-850);}
/* Varredura #1 (cor única): todas as plataformas usam o laranja de acento.
   `var(--accent)` cai em `var(--or)` por fallback onde ainda é referenciado. */
.platform-guias,.platform-jogos,.platform-comunidade,.platform-feed,.platform-streaming{--accent:var(--or);}
.platform-link-soon{background:transparent;color:var(--accent,var(--or));border:1px solid var(--accent,var(--or));box-shadow:none;cursor:default;}
.platform-tag{font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--accent);margin-bottom:9px;}
.platform-card h3{font:650 24px 'Inter',sans-serif;letter-spacing:-.025em;margin:0 0 10px;}
.platform-title{font-size:13px;font-weight:600;color:#d8dce3;margin:0 0 9px;line-height:1.45;}
.platform-desc{font-size:12px;color:#7f8793;line-height:1.6;margin:0;}
.platform-card ul{list-style:none;margin:17px 0 20px;padding:0;color:#9ba3ae;font-size:11.5px;line-height:1.9;}
.platform-card li:before{content:"";display:inline-block;width:4px;height:4px;background:var(--accent);vertical-align:middle;margin:0 8px 2px 0;border-radius:50%;}
.platform-link span{color:#0a0d16;transition:.15s;}
.platform-link:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 10px 20px -6px var(--accent,var(--or));}
.platform-link:hover span{margin-left:3px;}
.platform-link:active{transform:translateY(0);filter:brightness(.96);}
.home-ad{padding-top:34px;}
.ad-slot{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:var(--s-900);border:1px solid #20252d;border-radius:14px;padding:24px;}
.ad-slot-video{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000;}
.ad-slot-thumb-link{position:absolute;top:0;left:0;width:100%;height:100%;display:block;text-decoration:none;background:var(--s-900) linear-gradient(135deg,#171d26,var(--s-900));}
.ad-slot-thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s;}
.ad-slot-thumb-link:hover .ad-slot-thumb-img{filter:brightness(.75);}
.ad-slot-thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(224,9,9,.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:3px;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .15s,background .15s;}
.ad-slot-thumb-link:hover .ad-slot-thumb-play{background:#ff0000;transform:translate(-50%,-50%) scale(1.08);}
.ad-slot-thumb-title{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);color:#f3f5f7;font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ad-slot-copy h2{font-size:22px;margin:6px 0 8px;color:#f3f5f7;}
.ad-slot-copy p{font-size:13px;line-height:1.6;color:#9fa6b8;margin:0 0 16px;}
@media(max-width:820px){.ad-slot{grid-template-columns:1fr;}}

/* WPG FUND — cartão público (/patrocinadores) + blocos do modal "Ver detalhes".
   Reusa .card / .wpg-modal do site; só acrescenta a barra, os rótulos e as
   linhas de composição. Navy + laranja, sem glow (linguagem do redesign). */
.fund-card{background:var(--s-900,#12161f);}
.fund-eyebrow{font:600 10px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--or,#ff7a2f);margin:0 0 12px;}
.fund-goal-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fund-goal-label{font-size:13px;color:var(--muted,#9aa4b2);}
.fund-amount{font:800 26px 'Archivo','Inter',sans-serif;letter-spacing:-.02em;color:var(--text,#f0f3f7);}
.fund-amount small{font-size:14px;font-weight:600;color:var(--muted,#9aa4b2);}
.fund-bar{height:8px;border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 7px;}
.fund-bar i{display:block;height:100%;width:0;background:var(--or,#ff7a2f);border-radius:20px;transition:width .5s ease;}
.fund-progress{font:600 12px 'IBM Plex Mono',ui-monospace,monospace;color:var(--muted,#9aa4b2);margin:0 0 16px;}
.fund-pitch{font-size:13.5px;line-height:1.6;color:var(--text,#e8ebf0);margin:0 0 18px;}
.fund-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.fund-details-btn{background:none;border:0;color:var(--muted,#9aa4b2);font-family:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;}
.fund-details-btn:hover{color:var(--text,#f0f3f7);}
.fund-detail-block{padding:14px 0;border-top:1px solid var(--border,#232b38);}
.fund-detail-block:first-of-type{border-top:0;}
.fund-detail-block strong{display:block;font:700 14px 'Archivo','Inter',sans-serif;color:var(--text,#f0f3f7);margin-bottom:5px;}
.fund-detail-block p{font-size:12.5px;line-height:1.55;color:var(--muted,#9aa4b2);margin:0;}
.fund-detail-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.fund-detail-h strong{margin-bottom:0;}
.fund-detail-v{margin-left:auto;font:600 14px 'IBM Plex Mono',ui-monospace,monospace;color:var(--text,#f0f3f7);white-space:nowrap;}
.fund-detail-v.muted{color:var(--muted,#9aa4b2);font-weight:500;}
.fund-detail-badge{font:700 9px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:20px;}
.fund-detail-badge.now{background:rgba(56,214,160,.16);color:#38d6a0;}
.fund-detail-badge.proj{background:rgba(255,122,26,.16);color:var(--or,#ff7a2f);}
.fund-detail-items{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;}
.fund-detail-items li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--muted,#9aa4b2);}
.fund-detail-spec{margin:6px 0 8px;padding-left:18px;font-size:12.5px;color:var(--muted,#9aa4b2);}
.fund-detail-spec li{margin:3px 0;}
.fund-detail-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:rgba(255,255,255,.04);border-radius:10px;padding:12px 14px;margin:14px 0;}
.fund-detail-total strong{font:800 14px 'Archivo','Inter',sans-serif;color:var(--text,#f0f3f7);}
.fund-detail-total span{font:700 16px 'IBM Plex Mono',ui-monospace,monospace;color:var(--text,#f0f3f7);}
.fund-detail-why{background:var(--s-900,#12161f);border:1px solid var(--border,#232b38);border-radius:12px;padding:16px 18px;margin-top:16px;}
.fund-detail-why strong{display:block;font:700 13px 'Archivo','Inter',sans-serif;color:var(--or,#ff7a2f);margin-bottom:5px;}
.fund-detail-why p{font-size:13px;line-height:1.6;color:var(--text,#e8ebf0);margin:0;}

.home-leaderboards{padding-top:8px;}
.leaderboards-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.rewards-pending-list{max-width:640px;margin:0 auto 24px;display:flex;flex-direction:column;gap:14px;}
.reward-card{background:var(--s-900);border:1px solid #20252d;border-radius:14px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.reward-card-level{font:800 15px 'Inter',sans-serif;color:#f3f5f7;}
.reward-card-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.reward-spin-btn{background:linear-gradient(90deg,var(--or),var(--or-600));border:none;color:#0a0d16;font:800 13px 'Inter',sans-serif;padding:11px 20px;border-radius:9px;cursor:pointer;transition:.15s;}
.reward-spin-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.reward-spin-btn:disabled{opacity:.6;cursor:default;transform:none;filter:none;}
.reward-spin-result{font:800 18px 'Inter',sans-serif;color:var(--or);}
.reward-history-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--muted);}
.reward-history-row:last-child{border-bottom:none;}
.leaderboard-card{background:var(--s-900);border:1px solid #20252d;border-radius:14px;padding:24px 26px;}
.leaderboard-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.leaderboard-icon{font-size:20px;line-height:1;}
.leaderboard-card h3{font:650 18px 'Inter',sans-serif;margin:0;color:#f3f5f7;}
.leaderboard-sub{font-size:12px;color:#7f8793;line-height:1.5;margin:4px 0 16px;}
.leaderboard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.leaderboard-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;font-size:13px;}
.leaderboard-row:nth-child(odd){background:rgba(255,255,255,.02);}
.leaderboard-rank{font:700 11px 'IBM Plex Mono',monospace;color:#565e6b;width:26px;flex-shrink:0;}
.leaderboard-emoji{font-size:16px;flex-shrink:0;}
.leaderboard-name{flex:1;color:#e6e9ee;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leaderboard-tier{font-size:11px;color:#9da5b2;font-weight:600;white-space:nowrap;}
.leaderboard-months{font-size:11px;color:#9da5b2;font-weight:600;white-space:nowrap;}
.leaderboard-name-badge{display:inline-flex;align-items:center;max-width:100%;background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.32);color:var(--or-300);border-radius:999px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Gaveta (drawer) — fechada por padrão, abre ao clicar. Usada no ranking
   de atributos dos trajes, dentro da aba Roupa. */
.drawer-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:14px 16px;margin:0;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background .15s,border-color .15s;}
.drawer-toggle:hover{background:var(--or-wash,rgba(255,122,24,.07));border-color:var(--or-line,rgba(255,122,24,.3));}
.drawer-toggle-title{font-size:17px;font-weight:800;letter-spacing:-.015em;font-family:var(--display);}
.drawer-toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--or-wash,rgba(255,122,24,.14));border:1px solid var(--or-line,rgba(255,122,24,.35));color:var(--or-300);font-size:14px;transition:transform .15s;flex-shrink:0;margin-left:12px;}
.drawer-toggle.open .drawer-toggle-icon{transform:rotate(180deg);}
.drawer-panel{margin-top:14px;}

/* Nota média do site (agregada, sem mostrar quem votou) — perto das
   hero-stats na Início. */
.home-rating-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;background:rgba(255,215,64,.08);border:1px solid rgba(255,215,64,.28);}
.home-rating-badge .stars{color:#ffd740;font-size:15px;letter-spacing:1px;}
.home-rating-badge .rating-avg{font-weight:800;color:#f3f5f7;}
.home-rating-badge .rating-count{color:var(--muted);font-size:12.5px;}

/* Cartão "caixa aninhada" nas Invocações — mostra uma recompensa tipo
   "Pacote de Invocações à escolha IV" que só existe dentro de outros
   pacotes, com o conteúdo dela e a lista de pacotes-fonte, clicáveis. */
.nested-box-card{border-color:rgba(167,139,250,.28);background:rgba(167,139,250,.04);}
.nested-box-source{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:999px;}
.nested-box-source:hover .name-badge,.nested-box-source:focus-visible .name-badge{border-color:var(--or-line,rgba(255,122,24,.5));}
/* Badge "Contém pacote aninhado" (2026-09-19, ver reformulação visual em
   Claude outputs/ADDENDUM-VISUAL-LINHA-TEMPO-E-PACOTES.md, Parte B1) --
   mesmo tom roxo do .nested-box-card acima, pra reforçar visualmente que
   o badge na linha da tabela aponta pro card roxo mais abaixo na página.
   O conector é só uma linha fininha entre a tabela/hero card e o(s)
   card(s) de recompensa aninhada. */
.nested-box-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.35);color:#c9b5fb;border-radius:999px;padding:3px 10px 3px 8px;font-size:10px;font-weight:600;white-space:nowrap;vertical-align:middle;}
.nested-box-badge svg{width:10px;height:10px;flex:0 0 auto;}
.nested-box-connector{width:2px;height:18px;background:rgba(167,139,250,.5);margin:-6px 0 -6px 40px;}

/* Tooltip real de "Pacote de Força" (2026-09-19, Parte B2) -- reaproveita
   o mecanismo genérico [data-tip]:hover::after já existente (ver bloco
   do comparador de build do Genshin/LoL, mais abaixo neste arquivo). */
.pacote-forca-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--muted);background:none;color:var(--muted);font-size:10px;font-weight:700;font-family:inherit;cursor:help;line-height:1;padding:0;vertical-align:middle;position:relative;}
.pacote-forca-tip:hover,.pacote-forca-tip:focus{color:var(--or);border-color:var(--or-line,var(--or));}

/* "Hero card" pra categoria de invocação com 1 pacote só (2026-09-19,
   Parte B3) -- Dourada/Vermelha usam custo/frag; Roxa (compra direta,
   sem fragmento) usa um layout próprio com avatar de iniciais. */
.invoc-hero-card{display:flex;flex-direction:column;gap:14px;border-color:rgba(67,199,155,.35);}
.invoc-hero-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.invoc-hero-name{font-weight:700;font-size:15px;font-family:var(--display);}
.invoc-hero-stats{display:flex;gap:24px;flex-wrap:wrap;}
.invoc-hero-stat{display:flex;flex-direction:column;gap:2px;}
.invoc-hero-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.invoc-hero-stat-value{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;color:var(--text);}
.invoc-hero-stat-value-strong{font-weight:700;color:var(--or);}
.invoc-hero-stat-value small{font-size:11px;font-weight:500;color:var(--muted);}
.invoc-hero-note{margin:0;font-size:11.5px;color:var(--muted);}
.invoc-hero-card-roxa{border-color:rgba(176,120,232,.35);}
.invoc-hero-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--purple,#b078e8);flex:0 0 auto;}
.invoc-hero-onde{font-size:11.5px;}

/* Badge "online agora" no menu — pontinho verde + contagem aproximada.
   Clicável (é um <button> agora) -- abre a lista de quem está online. */
.online-badge-wrap{position:relative;}
.online-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(67,199,155,.1);border:1px solid rgba(67,199,155,.3);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:#5fe0b7;white-space:nowrap;cursor:pointer;font-family:inherit;}
.online-badge:hover{background:rgba(67,199,155,.18);}
.online-dot{width:7px;height:7px;border-radius:50%;background:#43c79b;box-shadow:0 0 0 0 rgba(67,199,155,.6);animation:online-pulse 2s infinite;}
/* Nova Home B3 (2026-09-04) -- tira o número exato do gatilho "N online",
   mantém só o ponto pulsante + a palavra "online" (decisão do usuário: dot
   sozinho ficaria sem contexto nenhum). Só apresentação -- initPresence()
   em main.js continua escrevendo o número aqui (#onlineCount/
   #mobileOnlineCount), display:none só impede o texto de aparecer; o
   dropdown "Quem está online", o ping()/2min e o endpoint não mudam em
   nada. Pontuação/permissão de quem vê a lista seguem 100% intocadas. */
#onlineCount,#mobileOnlineCount{display:none;}
@keyframes online-pulse{
  0%{box-shadow:0 0 0 0 rgba(67,199,155,.5);}
  70%{box-shadow:0 0 0 6px rgba(67,199,155,0);}
  100%{box-shadow:0 0 0 0 rgba(67,199,155,0);}
}
@media (max-width:640px){.online-badge-wrap{display:none;}}
.online-badge-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:220px;max-height:320px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.4);z-index:120;padding:10px;}
.online-badge-dropdown[hidden]{display:none;}
.online-badge-dropdown-title{font:500 10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;padding:0 2px;}
.online-badge-user{display:flex;align-items:center;gap:8px;padding:6px 2px;}
.online-badge-user .user-avatar{width:26px;height:26px;border-radius:50%;background:var(--or);color:#1a1206;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;object-fit:cover;}
.online-badge-user-name{font-size:12.5px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.online-badge-empty{font-size:12px;color:var(--muted);padding:6px 2px;}
.online-badge-anon-note{font-size:11px;color:var(--muted);padding:8px 2px 2px;border-top:1px solid var(--border);margin-top:8px;}

/* "Quem está online" no menu mobile -- acordeão inline (ver initPresence
   em main.js). Fora de @media de propósito: os elementos só existem
   dentro da .mobile-menu, que já só aparece no mobile. */
/* button.* pra vencer .mobile-menu-item{display:block} que vem depois no
   arquivo (dentro do @media da .mobile-menu). */
button.mobile-online-toggle{display:flex;align-items:center;gap:5px;}
.mobile-online-toggle[hidden]{display:none;}
.mobile-online-toggle .online-dot{flex-shrink:0;margin-right:3px;}
.mobile-online-chevron{margin-left:auto;color:var(--muted);transition:transform .18s ease;}
.mobile-online-toggle.open .mobile-online-chevron{transform:rotate(90deg);}
.mobile-online-list{padding:2px 6px 8px 22px;}
.mobile-online-list[hidden]{display:none;}
.mobile-online-list .online-badge-user{padding:5px 2px;}
.mobile-online-list .online-badge-empty{padding:6px 2px;}

/* /vincular -- interstitial do Login "Caminho C" (Leva 2). Card centrado,
   reusa .eyebrow / .btn / .btn-outline / .empty do resto do site.
   .active pra vencer .page.active{display:block} sem quebrar o
   .page{display:none} de quando a página não está ativa. */
#page-vincular.active{display:flex;justify-content:center;padding:48px 20px 80px;}
.vincular-card{width:100%;max-width:420px;}
.vincular-card h1{font-size:22px;margin:6px 0 10px;}
.vincular-lead{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 20px;}
.vincular-lead b{color:var(--text);word-break:break-all;}
.vincular-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.vincular-decline-link{display:block;width:100%;background:none;border:0;color:var(--muted);
  font-family:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:8px;margin-top:4px;}
.vincular-decline-link:hover{color:var(--text);}
.vincular-decline-link:disabled{opacity:.5;cursor:default;}

/* Bolhas de nome (trajes/pacotes) e de número — pill neutro, pra combinar
   visualmente com as bolhas coloridas de atributo sem competir com elas. */
.name-badge{display:inline-flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e6e9ee;border-radius:999px;padding:4px 12px;font-weight:600;}
.num-badge{display:inline-flex;align-items:center;background:rgba(78,168,255,.14);border:1px solid rgba(78,168,255,.35);color:#7cbcff;border-radius:999px;padding:3px 10px;font-weight:700;}

/* Bolhas de atributo do ranking de trajes — cor fixa por atributo, sempre
   a mesma em qualquer linha, pra criar reconhecimento visual rápido. */
.attr-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.attr-badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;border:1px solid transparent;}
.attr-badge-primeiroAtaque{background:rgba(255,122,24,.16);border-color:rgba(255,122,24,.4);color:var(--or-300);}
.attr-badge-ataque{background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.4);color:#ff8080;}
.attr-badge-vida{background:rgba(67,199,155,.16);border-color:rgba(67,199,155,.4);color:#5fe0b7;}
.attr-badge-ninjutsu{background:rgba(78,168,255,.16);border-color:rgba(78,168,255,.4);color:#7cbcff;}
.attr-badge-defesa{background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.4);color:#5fe8d6;}
.attr-badge-resistencia{background:rgba(167,139,250,.16);border-color:rgba(167,139,250,.4);color:#c1adfc;}
.attr-badge-controle{background:rgba(234,179,8,.16);border-color:rgba(234,179,8,.4);color:#f4cd4d;}
.attr-badge-ataqueCritico{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.4);color:#f479b3;}
.attr-badge-danoCritico{background:rgba(220,38,38,.16);border-color:rgba(220,38,38,.4);color:#f27272;}
.attr-badge-combo{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.4);color:#9ea1f5;}
.leaderboard-empty{text-align:center;padding:22px 10px;}
.leaderboard-empty p{font-size:12.5px;color:#7f8793;margin:0 0 14px;line-height:1.5;}
.leaderboard-empty-cta{background:var(--orange2,var(--or));border:1px solid var(--orange2,var(--or));color:#0a0d16;border-radius:8px;padding:10px 18px;font:700 12px 'Inter',sans-serif;cursor:pointer;transition:.15s;}
.leaderboard-empty-cta:hover{filter:brightness(1.1);}
@media(max-width:800px){.leaderboards-grid{grid-template-columns:1fr;}}

/* Fecho da Home (Nova Home B2e, 2026-09-03): um verso só, bookend do Hero.
   Sem logo, sem caixa -- a antiga faixa de marca (logo + lista de features,
   com box-shadow de card) saiu junto com suas regras. */
.home-outro{margin:0;padding:44px 0 8px;border-top:1px solid var(--border);font:700 clamp(17px,2.4vw,21px)/1.4 var(--display);letter-spacing:-.01em;color:var(--text);max-width:44ch;}
.minicard .icon{font-size:26px;margin-bottom:10px;display:none!important;}
@media(max-width:800px){
 .home-hero{grid-template-columns:1fr;gap:30px;padding:60px 0;}.home-hero-mark{display:none;}
 .platform-grid{grid-template-columns:1fr;}
 .home-section-head{align-items:start;flex-direction:column;gap:8px;}.home-section-head>p{text-align:left;}.home-hero h1{font-size:46px;}
}
@media(max-width:520px){.navrow{padding:10px 16px}.wrap{padding:0 16px}.tabs{overflow:auto;max-width:70vw}.tab{padding:8px 10px}.brand-logo{height:32px!important;max-width:120px}.home-hero h1{font-size:38px}.home-hero{padding:48px 0}}
#page-pacotes .pacotes-hero{padding:58px 0 24px;}
#page-pacotes .pacotes-hero h1{font-size:42px;line-height:1.05;letter-spacing:-.02em;margin:8px 0 12px;}
#page-pacotes .pacotes-hero p{max-width:700px;font-size:14px;line-height:1.65;}
/* Varredura: a "unidade de comparação" era um card cheio (borda/sombra/2
   colunas) só pra dizer "tudo em Pacote de Força" — virou 1 linha leve. */
#page-pacotes .reference-strip{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:6px 0 20px;padding:0;border:0;background:none;box-shadow:none;}
#page-pacotes .reference-label{color:var(--t-low);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
#page-pacotes .reference-strip strong{color:var(--or);font-size:12px;font-weight:700;}
#page-pacotes .reference-copy{color:var(--t-low);font-size:11.5px;line-height:1.4;}
/* Abas em formato pílula (2026-09-20), igualando ao tratamento que a
   Linha do Tempo já ganhou (ver #rm-tabs) -- mesma troca: sai a caixa
   única com fundo escuro, entram pílulas individuais com borda, cada uma
   respondendo por si. Reaproveita os MESMOS tokens (--or/--border/--text/
   --muted), nunca um tema à parte. */
#page-pacotes .pacotes-tabs{background:none;border:none;padding:0;position:static;backdrop-filter:none;box-shadow:none;gap:8px;margin-bottom:18px;}
#page-pacotes .pacotes-tabs .subtab{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px;padding:10px 18px;font-size:14px;min-width:0;box-shadow:none;}
#page-pacotes .pacotes-tabs .subtab.active{background:var(--or-wash,rgba(32,211,224,.14));border-color:var(--or);color:var(--or-300,var(--or));box-shadow:none;}
#page-pacotes .pacotes-tabs .subtab:hover:not(.active){border-color:var(--muted);}
#page-pacotes .subpage .card{border-color:#242a33;background:#0f141b;box-shadow:none;}
#page-pacotes .subpage .card label{color:#aeb5bf;font-size:11px;letter-spacing:.03em;}
#page-pacotes .subpage input,#page-pacotes .subpage select{background:#0b0f14;border-color:#29303a;color:#eef1f4;}
#page-pacotes .subpage input:focus,#page-pacotes .subpage select:focus{border-color:var(--or);box-shadow:0 0 0 2px rgba(255,122,24,.10);}
#page-pacotes .formula{background:#0b0f14;border-color:#202630;color:#737d89;}
#page-pacotes .note{border-color:#252b35;color:#6f7885;}
#page-pacotes .badge{background:var(--or-wash,rgba(255,122,24,.12));border-color:var(--or-line,rgba(255,122,24,.28));color:var(--or-300);}
#page-pacotes .empty{background:#0b0f14;color:#69727e;}
#page-pacotes table{border-color:#252b35;}
#page-pacotes th{background:#11161d;color:#8d96a3;border-bottom-color:#252b35;}
#page-pacotes td{border-bottom-color:#202630;color:#d4d8de;}
#page-pacotes .hero .hl{color:var(--or);}
@media(max-width:700px){#page-pacotes .pacotes-hero{padding-top:42px;}#page-pacotes .pacotes-hero h1{font-size:34px;}#page-pacotes .reference-strip{align-items:flex-start;flex-direction:column;gap:10px;}#page-pacotes .reference-copy{text-align:left;max-width:none;}}
.upgrade-section-sub{font-size:12px;color:var(--muted);margin-top:4px;}
#page-upgrade .sys-card:hover{transform:translateY(-2px);border-color:var(--or-line,rgba(255,122,24,.42));background:linear-gradient(180deg,var(--or-wash,rgba(255,122,24,.08)),rgba(255,255,255,.025));box-shadow:0 14px 34px rgba(0,0,0,.22);}
#page-upgrade .sys-card .tag{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent,var(--or));font-weight:800;margin-bottom:10px;}
#page-upgrade .sys-card .name{font-size:15px;font-weight:750;color:#f4f5f8;line-height:1.3;margin-bottom:7px;}
#page-upgrade .sys-card.special{border-color:rgba(255,255,255,.09);}
#page-upgrade .sys-card.special .tag{color:var(--or-300);}
#page-upgrade .note-btn{border:1px solid rgba(255,255,255,.12);background:transparent;color:#aeb5c5;border-radius:50%;width:22px;height:22px;position:absolute;right:14px;top:14px;cursor:pointer;}
#page-upgrade .note-text{display:none;margin-top:10px;font-size:11px;line-height:1.5;color:#aeb5c5;border-top:1px solid rgba(255,255,255,.07);padding-top:10px;}
#page-upgrade .note-text.show{display:block;}
@media(max-width:640px){.upgrade-grid{grid-template-columns:1fr}}

/* ---- Hub do Upgrade: 3 seções (sistemas / conjuntos / ferramentas) ----
   Sistemas: sub-agrupado pelo RECURSO (todas as evoluções dão 1º Ataque,
   então o recurso é o que separa uma da outra). Conjuntos e Ferramentas
   ganham uma borda-guia lateral na cor da seção. Cards compactos. */
#hub-cards{display:flex;flex-direction:column;gap:34px;margin-top:2px;}
.hub-group-head{padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:15px;}
.hub-group-title{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--t-hi);}
.hub-group[data-group="conjuntos"] .hub-group-title{color:var(--signal);}
.hub-group[data-group="ferramentas"] .hub-group-title{color:var(--live);}
.hub-group-sub{font-size:12px;color:var(--t-low);margin-top:3px;}

#page-upgrade #hub-cards .upgrade-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
/* Ícone por sistema (2026-09-11): selo de 30px ao lado do nome, mesma
   densidade de antes (só virou row em vez de column) -- mockup aprovado
   Artifact "Upgrade Hub — Ícones". Ícones desenhados à mão (SVG), NÃO
   print/PNG do item do jogo -- mesmo critério já usado nos .game-card da
   tela de Jogos (ver [[project_genshin_impact_jogos_2026_09_11]]/redesign). */
#page-upgrade #hub-cards .sys-card{display:flex;flex-direction:row;align-items:flex-start;gap:11px;min-height:0;padding:11px 13px;background:var(--s-850);border-color:var(--border);}
#page-upgrade #hub-cards .sys-card:hover{transform:translateY(-2px);border-color:var(--or-line);background:var(--s-800);box-shadow:0 10px 26px -14px rgba(0,0,0,.55);}
#page-upgrade #hub-cards .sys-body{min-width:0;}
#page-upgrade #hub-cards .sys-card .name{font-size:13.5px;font-weight:700;color:var(--t-hi);margin:0 0 3px;line-height:1.2;}
#page-upgrade #hub-cards .sys-card .desc{font-size:11.5px;line-height:1.38;color:var(--t-mid);margin:0;max-width:none;}
#hub-cards .sys-card .mat{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--t-low);margin-bottom:5px;}
#page-upgrade #hub-cards .note-btn{width:17px;height:17px;right:10px;top:10px;font-size:10px;}

#page-upgrade #hub-cards .sys-icon{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--or-wash);border:1px solid var(--or-line);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;}
#page-upgrade #hub-cards .sys-card:hover .sys-icon{background:var(--or);transform:scale(1.06);}
#page-upgrade #hub-cards .sys-icon svg{width:15px;height:15px;stroke:var(--or-300);transition:stroke .15s;}
#page-upgrade #hub-cards .sys-card:hover .sys-icon svg{stroke:#0d0a06;}

#hub-cards .sys-card[data-group="conjuntos"]{border-left:2px solid var(--signal);}
#hub-cards .sys-card[data-group="ferramentas"]{border-left:2px solid var(--live);}
#page-upgrade #hub-cards .sys-card[data-group="conjuntos"]:hover{border-left-color:var(--signal);}
#page-upgrade #hub-cards .sys-card[data-group="ferramentas"]:hover{border-left-color:var(--live);}
#page-upgrade #hub-cards .sys-card[data-group="conjuntos"] .sys-icon{background:rgba(91,139,255,.12);border-color:rgba(91,139,255,.35);}
#page-upgrade #hub-cards .sys-card[data-group="conjuntos"] .sys-icon svg{stroke:var(--signal);}
#page-upgrade #hub-cards .sys-card[data-group="conjuntos"]:hover .sys-icon{background:var(--signal);}
#page-upgrade #hub-cards .sys-card[data-group="conjuntos"]:hover .sys-icon svg{stroke:#0a1224;}
#page-upgrade #hub-cards .sys-card[data-group="ferramentas"] .sys-icon{background:var(--live-wash);border-color:rgba(56,214,160,.35);}
#page-upgrade #hub-cards .sys-card[data-group="ferramentas"] .sys-icon svg{stroke:var(--live);}
#page-upgrade #hub-cards .sys-card[data-group="ferramentas"]:hover .sys-icon{background:var(--live);}
#page-upgrade #hub-cards .sys-card[data-group="ferramentas"]:hover .sys-icon svg{stroke:#062018;}

/* Cor por família (2026-09-14, mockup aprovado "WPG Upgrade Hub Cores"):
   antes todo o grupo "Sistemas" usava a mesma cor laranja pra 15 sistemas
   bem diferentes entre si -- achado do usuário ("achei espaçoso e
   grandioso demais, queria dar mais vida"). Mesmo padrão já usado acima
   pra Conjuntos/Ferramentas, agora por sub-família dentro de Sistemas. */
#hub-cards .sys-card[data-fam="chaves"]{border-left:2px solid #F0A93D;}
#hub-cards .sys-card[data-fam="selo"]{border-left:2px solid #9B6EF3;}
#hub-cards .sys-card[data-fam="montes"]{border-left:2px solid #45B57C;}
#hub-cards .sys-card[data-fam="proprio"]{border-left:2px solid #20D3E0;}
#page-upgrade #hub-cards .sys-card[data-fam="chaves"]:hover{border-left-color:#F0A93D;}
#page-upgrade #hub-cards .sys-card[data-fam="selo"]:hover{border-left-color:#9B6EF3;}
#page-upgrade #hub-cards .sys-card[data-fam="montes"]:hover{border-left-color:#45B57C;}
#page-upgrade #hub-cards .sys-card[data-fam="proprio"]:hover{border-left-color:#20D3E0;}
#page-upgrade #hub-cards .sys-card[data-fam="chaves"] .sys-icon{background:rgba(240,169,61,.12);border-color:rgba(240,169,61,.35);}
#page-upgrade #hub-cards .sys-card[data-fam="chaves"] .sys-icon svg{stroke:#F0A93D;}
#page-upgrade #hub-cards .sys-card[data-fam="chaves"]:hover .sys-icon{background:#F0A93D;}
#page-upgrade #hub-cards .sys-card[data-fam="chaves"]:hover .sys-icon svg{stroke:#241804;}
#page-upgrade #hub-cards .sys-card[data-fam="selo"] .sys-icon{background:rgba(155,110,243,.13);border-color:rgba(155,110,243,.38);}
#page-upgrade #hub-cards .sys-card[data-fam="selo"] .sys-icon svg{stroke:#9B6EF3;}
#page-upgrade #hub-cards .sys-card[data-fam="selo"]:hover .sys-icon{background:#9B6EF3;}
#page-upgrade #hub-cards .sys-card[data-fam="selo"]:hover .sys-icon svg{stroke:#1a1030;}
#page-upgrade #hub-cards .sys-card[data-fam="montes"] .sys-icon{background:rgba(69,181,124,.12);border-color:rgba(69,181,124,.35);}
#page-upgrade #hub-cards .sys-card[data-fam="montes"] .sys-icon svg{stroke:#45B57C;}
#page-upgrade #hub-cards .sys-card[data-fam="montes"]:hover .sys-icon{background:#45B57C;}
#page-upgrade #hub-cards .sys-card[data-fam="montes"]:hover .sys-icon svg{stroke:#06231a;}
#page-upgrade #hub-cards .sys-card[data-fam="proprio"] .sys-icon{background:rgba(32,211,224,.12);border-color:rgba(32,211,224,.38);}
#page-upgrade #hub-cards .sys-card[data-fam="proprio"] .sys-icon svg{stroke:#20D3E0;}
#page-upgrade #hub-cards .sys-card[data-fam="proprio"]:hover .sys-icon{background:#20D3E0;}
#page-upgrade #hub-cards .sys-card[data-fam="proprio"]:hover .sys-icon svg{stroke:#052426;}

@media(max-width:640px){#page-upgrade #hub-cards .upgrade-grid{grid-template-columns:1fr;}}

.events-intro{max-width:820px;margin-bottom:28px;}
.server-disclaimer{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--muted);}
.server-disclaimer:before{content:'🇧🇷';font-size:12px;}
.events-intro h1{margin-bottom:10px;}
.events-nav{display:flex;flex-direction:column;gap:18px;margin:26px 0 30px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.events-week-group .subtabs{display:flex;gap:8px;flex-wrap:wrap;}
.events-week-group .hub-group-head{border-bottom:none;padding-bottom:6px;margin-bottom:10px;}
.events-nav .subtab{border:1.5px solid var(--sub-accent, var(--line));background:color-mix(in srgb, var(--sub-accent, var(--muted)) 8%, var(--panel));color:var(--sub-accent, var(--muted));border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;transition:.18s;}
.events-nav .subtab:hover{color:var(--sub-accent, var(--text));background:color-mix(in srgb, var(--sub-accent, var(--muted)) 16%, var(--panel));}
.events-nav .subtab.active{background:var(--sub-accent, var(--or));border-color:var(--sub-accent, var(--or));color:#0a0d16;box-shadow:0 6px 16px -6px var(--sub-accent, var(--or));}
/* Varredura #1 (cor única): sem cor por evento. Aba inativa = neutra
   (var(--muted)), aba ativa = laranja (fallback var(--or) já embutido
   nas regras .subtab / .subtab.active acima). */
.event-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 18px;}
.event-section-head h2{margin:0;font-size:21px;}
.event-section-head p{margin:4px 0 0;color:var(--muted);font-size:14px;}
.event-meta{font-size:12px;color:var(--muted);white-space:nowrap;}
.event-input-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));}
.event-result-card{border-color:rgba(255,138,0,.28);}
@media(max-width:700px){.event-section-head{display:block}.event-meta{margin-top:8px}.events-week-group .subtabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px}.events-nav .subtab{white-space:nowrap}}
nav{position:sticky;top:0;z-index:10;background:rgba(10,13,18,.94);border-bottom:1px solid var(--border);}
.navrow{margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1120px;padding:12px 28px;min-height:66px;}
.brand-logo{max-width:150px;object-fit:contain;height:34px;width:auto;display:block;}
.tabs{display:flex;border-radius:10px;margin-left:auto;background:transparent;border:0;padding:0;gap:2px;}
.tab:hover{color:var(--text);background:rgba(255,255,255,.04);}
.route-root{font-weight:700;color:#707985;}
.route-sep{padding:0 8px;color:#4c5560;margin:0 7px;}
.routebar-inner #route-label{color:#c3c9cf;}
.hero h1,.home-hero h1{letter-spacing:-.02em;}
.card,.platform-card,.reference-strip{box-shadow:0 8px 28px rgba(0,0,0,.12);}
.platform-link{margin-top:auto;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent,var(--or));border:1px solid var(--accent,var(--or));padding:11px 16px;border-radius:9px;color:#0a0d16;font:700 12.5px 'Inter',sans-serif;cursor:pointer;transition:.18s;box-shadow:0 6px 16px -6px var(--accent,var(--or));font-weight:600;}
.wpg-footer{justify-content:center;margin-top:10px;border-top-color:#20262e;padding-top:24px;max-width:980px;margin:56px auto 0;padding:24px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;}
.wpg-footer img{opacity:.82;height:28px;width:auto;display:block;}
@media(max-width:700px){.navrow{padding:12px 16px}.brand-logo{height:29px}.tabs{overflow-x:auto;max-width:72vw}.tab{padding:8px 11px}.routebar-inner{padding:8px 16px}.wrap{padding:0 16px;}}
/* ======================================================================
   DIREÇÃO VISUAL v1 (branch redesign/visual-direction-v1)
   Camada de token nova. Estratégia: adiciona as rampas e faz os tokens
   legados (--orange, --orange2, --focus) apontarem pros novos, pra
   unificar os ~5 laranjas que existiam soltos SEM varrer 3206 linhas.
   Migração em levas -- ver memory project-redesign-visual-wpg-2026-08-28.
   ====================================================================== */
:root{
  /* — SUPERFÍCIE — rampa navy (hue ~222 unificada). Leva 3-b: valores
     conservadores, ~1-2 pts de luminância dos atuais, só harmoniza o tom
     (tira o leve verde que o card tinha). --bg/--card/etc. abaixo apontam aqui.
     Literais de card (0f1419/0f1319/0d1117) varridos p/ cá; hovers/inputs
     de componente (171d24, 1a1f27, 11151c...) deixados -- não são superfície primária. */
  --s-950:#090c13; --s-900:#0c0f16; --s-850:#0f131c;
  --s-800:#141a25; --s-700:#1a2130; --s-600:#232c3b;
  /* — LINHA — */
  --line-hi:#3a4759;
  /* — TEXTO — */
  --t-hi:#f0f3f7; --t-mid:#a7b0bd; --t-low:#6b7686;
  /* — LARANJA — rampa; --or é O acento único — */
  --or-100:#ffe0c9; --or-300:#ffb082; --or:#ff7a2f; --or-600:#e2661f; --or-800:#a5490f;
  --or-wash:rgba(255,122,47,.10); --or-line:rgba(255,122,47,.32);
  /* — SEMÂNTICOS — separados do acento — */
  --live:#38d6a0; --live-wash:rgba(56,214,160,.12);
  --signal:#5b8bff;
  /* — TIPOGRAFIA — */
  --display:'Archivo','Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* — LEGADO — mantido pra não quebrar; superfície e acento apontam pros tokens novos — */
  --red:#e0716a;--green:#43c79b;--bg:var(--s-950);--bg-alt:var(--s-850);--card:var(--s-800);--card2:var(--s-700);--border:#29313d;--text:#f1f3f5;--muted:#9aa3ad;--orange:var(--or);--orange2:var(--or);--blue:#6c8cff;--blue2:#8f6ff5;--purple:#b078e8;--pink:#f16fa0;--cyan:#4fd1e0;--gold:#e3b341;--focus:rgba(255,122,47,.20);--surface-strong:var(--s-700);--surface-soft:var(--s-850);--border-strong:#303844;--line:var(--border);--panel:var(--card);--surface-hi:var(--surface-strong);}
html{scroll-behavior:smooth;}
body{margin:0;color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;padding:0 0 40px;background:var(--bg);min-height:100vh;min-height:100dvh;}
button,input,select{font-family:inherit;outline:none;}
button:focus-visible,input:focus-visible,select:focus-visible{box-shadow:0 0 0 3px var(--focus);}
.tab{cursor:pointer;background:transparent;font-family:inherit;transition:.15s;position:relative;font-weight:600;color:#8f96a3;font-size:12px;letter-spacing:.01em;border:1px solid transparent;border-radius:7px;padding:9px 14px;min-height:36px;}
.tab.active{border-color:rgba(243,154,61,.28);background:var(--surface-strong);color:#fff;box-shadow:inset 0 -2px 0 var(--or);}
.tab-vip{color:var(--or);font-weight:800;border:1px solid rgba(255,122,26,.28);background:rgba(255,122,26,.06);}
.tab-vip:hover{color:var(--or);background:rgba(255,122,26,.12);}
/* Cor por linha no menu lateral -- pedido do usuário (referência: site
   concorrente chinês com botão de destaque colorido por item). Só nas
   linhas habilitadas (Streaming/Partners continuam .tab-soon, cinza). O
   .active de cada uma escurece o fundo um pouco mais, mas mantém a barra
   lateral laranja de "página atual" (.tab.active já cuida disso). */
/* Varredura #1 (cor única, 2026-08-29): a cor por seção na aba ativa
   (que a rodada de 2026-08-23 tinha mantido como "você está aqui") sai.
   Agora TODA aba ativa usa o mesmo destaque laranja — o .tab.active base
   já põe a barra laranja; aqui só reforçamos o fundo/borda, iguais pra
   todas as seções. */
.tab-color-home.active,.tab-color-community.active,.tab-color-feed.active,
.tab-color-jogos.active,.tab-color-ranking.active{
  background:var(--or-wash,rgba(255,122,47,.12));color:#fff;border-color:var(--or-line,rgba(255,122,47,.32));
}
/* Sidebar "acompanha" a página ativa (2026-09-14) -- Início/Jogos ganham
   destaque ciano quando são a página ativa, igual à identidade dessas
   páginas (ver #page-home/#page-jogos). Nunca mexe na variável --or em
   si (vazaria pro .tab-vip, que é laranja/dourado de propósito, sempre,
   sinal de marca de VIP) -- só sobrescreve as regras específicas do
   destaque de aba ativa, com valores literais. */
body.sidebar-theme-ciano .tab-color-home.active,
body.sidebar-theme-ciano .tab-color-jogos.active,
body.sidebar-theme-ciano .tab-color-community.active,
body.sidebar-theme-ciano .tab-color-feed.active{
  background:rgba(32,211,224,.12);border-color:rgba(32,211,224,.38);
}
body.sidebar-theme-ciano .app-sidebar-nav .tab.active{box-shadow:inset 3px 0 0 #20D3E0;}
body.sidebar-theme-ciano .app-sidebar-toggle-btn:hover{border-color:rgba(32,211,224,.4);}
.routebar{border-bottom:1px solid rgba(255,255,255,.045);background:rgba(10,13,22,.72);border-bottom-color:rgba(255,255,255,.045);}
.routebar-inner{color:#68717c;max-width:980px;margin:auto;padding:9px 24px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;}
.card{border:1px solid var(--border);padding:22px;margin-bottom:16px;background:var(--s-850);border-radius:13px;border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,.10);}
.card:hover{border-color:var(--border-strong);}
input[type=text],input[type=number],select,textarea{transition:border-color .15s,box-shadow .15s,background .15s;}
input[type=text]:hover,input[type=number]:hover,select:hover,textarea:hover{border-color:#343c49;background:#111720;}
input[type=range]{accent-color:var(--or);}
.subtabs{display:flex;gap:6px;border:1px solid var(--border);padding:4px;margin-bottom:24px;flex-wrap:wrap;background:var(--s-850);border-color:#252c34;border-radius:9px;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);}
.subtab{display:inline-flex;align-items:center;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:transparent;font-family:inherit;transition:color .15s,background .15s,box-shadow .15s;}
.subtab.active{background:#171d24;color:var(--or);box-shadow:inset 0 -2px 0 var(--or);}
/* 2026-09-20, achado ao vivo (print do usuário na Linha do Tempo): páginas
   de "ferramenta única" (Coach, Linha do Tempo) têm 1 <button class="subtab"
   hidden> só pra fazer o mecanismo de /events/loader.js funcionar -- nunca
   deveria aparecer. Mesmo empate de especificidade [hidden] vs .subtab já
   documentado várias vezes neste arquivo (buscar ".wpg-modal[hidden]" pra
   outros exemplos): [hidden]{display:none} do navegador e .subtab{display:
   inline-flex} têm a mesma especificidade, e o CSS de autor (este arquivo)
   sempre vence por ordem de origem -- sem esta regra, o botão "fantasma"
   aparecia como um chip solto colado no cabeçalho da página.  */
.subtab[hidden]{display:none;}
.subtab-icon{width:15px;height:15px;stroke:currentColor;margin-right:6px;flex:0 0 auto;}

/* Cor por família (2026-09-14) no painel de calculadora compartilhado
   (#sub3-calc atende Pedra/Invocações/Ajuda de Ninja/Refino -- famílias
   diferentes, mesma tela). openSystem() em main.js seta data-fam conforme
   HUB_CARDS_DATA().fam do sistema aberto, mesmas 4 cores já usadas no Hub. */
#sub3-calc{--calcfam:var(--or);--calcfam-wash:var(--or-wash);--calcfam-line:var(--or-line);--calcfam-dark:#1a1006;}
#sub3-calc[data-fam="chaves"]{--calcfam:#F0A93D;--calcfam-wash:rgba(240,169,61,.12);--calcfam-line:rgba(240,169,61,.4);--calcfam-dark:#241804;}
#sub3-calc[data-fam="selo"]{--calcfam:#9B6EF3;--calcfam-wash:rgba(155,110,243,.13);--calcfam-line:rgba(155,110,243,.4);--calcfam-dark:#1a1030;}
#sub3-calc[data-fam="montes"]{--calcfam:#45B57C;--calcfam-wash:rgba(69,181,124,.12);--calcfam-line:rgba(69,181,124,.4);--calcfam-dark:#06231a;}
#sub3-calc[data-fam="proprio"]{--calcfam:#20D3E0;--calcfam-wash:rgba(32,211,224,.13);--calcfam-line:rgba(32,211,224,.4);--calcfam-dark:#052426;}
#sub3-calc .back-btn{border-color:var(--calcfam-line)!important;background:var(--calcfam-wash)!important;color:var(--calcfam)!important;box-shadow:none!important;}
#sub3-calc .back-btn:hover{background:var(--calcfam)!important;color:var(--calcfam-dark)!important;filter:none;}
#sub3-calc .subtab.active{background:var(--calcfam);color:var(--calcfam-dark);box-shadow:none;}
.calc-fam-eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--calcfam);margin-bottom:6px;min-height:13px;}
.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row .field{flex:1 1 160px;min-width:0;}

/* Ferramentas (Comparador/Conversor) -- mesma direção visual dos sistemas
   (2026-09-14), cor verde já usada no Hub pra esse grupo (--live). Ícone
   reaproveita exatamente o path de SYS_ICONS.comparador/conversor, pra o
   card do Hub e o topo da tela combinarem. */
.calc-fam-eyebrow-ferramentas{color:var(--live);}
.calc-title-row{display:flex;align-items:center;gap:12px;margin-bottom:2px;}
.calc-title-row .calc-title{margin:0;}
.calc-header-icon{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--live-wash);border:1px solid rgba(56,214,160,.35);}
.calc-header-icon svg{width:17px;height:17px;stroke:var(--live);}
#screen-comparador .back-btn,#screen-conversor .back-btn{border-color:rgba(56,214,160,.4)!important;background:var(--live-wash)!important;color:var(--live)!important;box-shadow:none!important;}
#screen-comparador .back-btn:hover,#screen-conversor .back-btn:hover{background:var(--live)!important;color:#062018!important;filter:none;}

/* Mesma cor por família nas telas próprias de sistema (Amuleto, Pergaminho,
   Bandana, Trio, Monte/Artefato) -- Conjuntos reaproveita --signal (mesmo
   azul já usado no Hub pra esse grupo). Monte troca em runtime (openMonte,
   tools.js) porque atende 3 sistemas de famílias diferentes. */
.screen[data-fam]{--calcfam:var(--or);--calcfam-wash:var(--or-wash);--calcfam-line:var(--or-line);--calcfam-dark:#1a1006;}
.screen[data-fam="chaves"]{--calcfam:#F0A93D;--calcfam-wash:rgba(240,169,61,.12);--calcfam-line:rgba(240,169,61,.4);--calcfam-dark:#241804;}
.screen[data-fam="selo"]{--calcfam:#9B6EF3;--calcfam-wash:rgba(155,110,243,.13);--calcfam-line:rgba(155,110,243,.4);--calcfam-dark:#1a1030;}
.screen[data-fam="montes"]{--calcfam:#45B57C;--calcfam-wash:rgba(69,181,124,.12);--calcfam-line:rgba(69,181,124,.4);--calcfam-dark:#06231a;}
.screen[data-fam="proprio"]{--calcfam:#20D3E0;--calcfam-wash:rgba(32,211,224,.13);--calcfam-line:rgba(32,211,224,.4);--calcfam-dark:#052426;}
.screen[data-fam="conjuntos"]{--calcfam:var(--signal);--calcfam-wash:rgba(91,139,255,.13);--calcfam-line:rgba(91,139,255,.4);--calcfam-dark:#0a1224;}
.screen[data-fam] .back-btn{border-color:var(--calcfam-line)!important;background:var(--calcfam-wash)!important;color:var(--calcfam)!important;box-shadow:none!important;}
.screen[data-fam] .back-btn:hover{background:var(--calcfam)!important;color:var(--calcfam-dark)!important;filter:none;}
.screen[data-fam] .calc-fam-eyebrow{color:var(--calcfam);}
.screen[data-fam] .calc-header-icon{background:var(--calcfam-wash);border-color:var(--calcfam-line);}
.screen[data-fam] .calc-header-icon svg{stroke:var(--calcfam);}
table{width:100%;margin-top:12px;font-size:13px;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:10px;}
th{color:var(--muted);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:1;}
/* Varredura: o resultado do Pacotes (#resultCard/#resultCardTraje) ganha o
   mesmo acento laranja que os 5 event tools já têm — o bloco de resultado
   salta em vez de ser um .card qualquer. */
.result-hero,.event-result-card,#resultCard,#resultCardTraje{border-color:var(--or-line,rgba(255,122,24,.24));background:linear-gradient(180deg,var(--or-wash,rgba(255,122,24,.055)),rgba(255,255,255,.018));}
.result-hero .v,.event-result-card .v{letter-spacing:-.025em;}
.note,.disclaimer{color:#6f7885;line-height:1.65;}
/* min-height:310px tirado -- nenhum desses 4 cards (Comunidade/Comércio/
   Streaming/Convide e Ganhe) tem conteúdo suficiente pra preencher isso,
   sobrava vazio empurrado pro fundo (margin-top:auto no botão). O mobile
   já zerava isso (ver @media max-width:700px abaixo) -- agora cresce só
   com o conteúdo em qualquer tamanho de tela, mesmo padrão do .game-card. */
.platform-card{position:relative;background:var(--s-850);border:1px solid #222831;border-radius:12px;padding:24px;overflow:hidden;transition:.18s;cursor:pointer;border-color:var(--border);display:flex;flex-direction:column;}
.platform-card .platform-link{margin-top:auto;}
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:stretch;}
#page-upgrade .sys-card{position:relative;min-height:142px;padding:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;}
#page-upgrade .sys-card .desc{font-size:12px;line-height:1.55;color:#9fa6b8;max-width:34em;margin-bottom:auto;}
.back-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;padding:8px 14px;margin-bottom:14px;font-family:'Inter',sans-serif;font-weight:600;color:#111!important;border:1px solid var(--or)!important;background:var(--or)!important;border-radius:999px!important;box-shadow:0 9px 22px rgba(255,122,24,.16)!important;transition:border-color .15s,background .15s,color .15s;}
.back-btn:hover{filter:brightness(1.08);border-color:var(--or-line,rgba(255,122,24,.42));color:#fff;background:var(--or-wash,rgba(255,122,24,.06));}
.quick-set button{background:var(--card2);border:1px solid var(--border);color:var(--muted);font-family:'Inter',sans-serif;font-size:12px;font-weight:700;padding:7px 13px;border-radius:20px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.quick-set button:hover{border-color:var(--or-line,rgba(255,122,24,.42));color:#fff;background:var(--or-wash,rgba(255,122,24,.06));}
/* Estado selecionado dos botões de modo do Tesouro da Sorte (giro único vs.
   x10) — sem isso os dois botões ficavam visualmente idênticos e ninguém
   sabia qual modo estava ativo. */
.quick-set button.active{background:var(--or);border-color:var(--or);color:#1a1206;}
.quick-set button.active:hover{background:var(--or);color:#1a1206;filter:brightness(1.06);}
.empty{color:var(--muted);font-size:13.5px;padding:26px 0;text-align:center;border-style:dashed;}
/* ---------------------------------------------------------------------- */
/* Meus Pergaminhos — lista dinâmica de linhas (tipo + nível atual/alvo). */
/* Cada linha é independente: usuário adiciona/remove quantas quiser.     */
/* ---------------------------------------------------------------------- */
/* Mapa (2026-08-27) -- 4ª coluna, mais estreita que as demais (é só um
   número). grid-template-columns ganha uma faixa extra; o resto do
   componente (num badge, botão de remover, breakpoint mobile) continua
   igual. */
.perg-row{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;gap:12px 14px;align-items:end;margin-bottom:16px;padding:20px 44px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:13px;transition:border-color .15s,background .15s;}
.perg-row:hover{border-color:var(--or-line,rgba(255,122,24,.28));}
.perg-row .field{margin-bottom:0;}
.perg-row-num{position:absolute;top:-10px;left:16px;background:var(--or);color:#1a1206;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 11px;border-radius:999px;box-shadow:0 4px 10px rgba(255,122,24,.28);}
.perg-remove{position:absolute;top:14px;right:14px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:14px;font-weight:700;width:28px;height:28px;border-radius:50%;cursor:pointer;transition:border-color .15s,color .15s,background .15s;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.perg-remove:hover{border-color:rgba(224,113,106,.5);color:var(--red);background:rgba(224,113,106,.1);}
.btn-outline{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1.5px dashed var(--border-strong);color:var(--muted);border-radius:11px;padding:12px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:.15s;margin:2px 0 18px;}
.btn-outline:hover{border-color:var(--or);color:var(--or);background:rgba(255,122,24,.05);}
.perg-detail-line{font-size:12.5px;color:var(--text);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.perg-detail-line:last-child{border-bottom:none;}
@media(max-width:700px){
  .perg-row{grid-template-columns:1fr;padding:22px 40px 16px 14px;}
  .perg-row-num{left:12px;}
}
@media(max-width:700px){
  .navrow{padding:11px 16px;gap:12px;align-items:flex-start;}
  .brand-logo{max-width:120px;height:auto;}
  .tabs{overflow-x:auto;max-width:100%;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:8px 12px;white-space:nowrap;}
  .routebar-inner{padding:8px 16px;}
  .wrap{padding:0 16px;}
  .subtabs{top:58px;overflow-x:auto;scrollbar-width:none;}
  .subtabs::-webkit-scrollbar{display:none;}
  .subtab{white-space:nowrap;}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;box-shadow:inset -18px 0 14px -14px rgba(0,0,0,.5);}
  table th:first-child,table td:first-child{position:sticky;left:0;background:var(--card,#11151d);box-shadow:1px 0 0 var(--border,#242b36);}
  table th:first-child{z-index:2;}
  table td:first-child{z-index:1;}

  

  .quick-set button{padding:10px 14px;font-size:13px;}

  

  .field-row-5{grid-template-columns:repeat(3,1fr);}
  .field-row-5 select{padding:9px 6px;font-size:13px;}
  .field-row-5 label{font-size:11px;}

  .field-row-6{grid-template-columns:repeat(3,1fr);}
  .field-row-6 select{padding:9px 6px;font-size:13px;}
  .field-row-6 label{font-size:11px;}

  

  #page-upgrade .note-btn::after{content:'';position:absolute;inset:-11px;}
}
@media(max-width:420px){
  .field-row-5{grid-template-columns:repeat(2,1fr);}
  .field-row-6{grid-template-columns:repeat(2,1fr);}
}


/* ---- extraído de: <style id="wpg-vip-plans-css"> ---- */
.vip-lock{margin-top:14px;padding:18px 18px;border:1px solid rgba(255,122,24,.32);background:linear-gradient(180deg,rgba(255,122,24,.075),rgba(255,255,255,.018));border-radius:12px;}
.vip-lock-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-300);font-weight:500;margin-bottom:7px;}
.vip-lock-title{font-size:15px;font-weight:750;color:#f4f5f8;margin-bottom:6px;}
.vip-lock-copy{font-size:12px;line-height:1.55;color:#9fa6b8;margin:0;}
/* Bloqueio do cálculo gratuito (upgrade/vip-gate.js): a mensagem única substitui os cartões de resultado. */
.results.vip-gated > :not(.vip-gate){display:none !important;}
.vip-gate{margin-top:16px;text-align:center;}
.vip-gate .vip-lock-copy{margin:0 auto 14px;max-width:520px;}
.vip-lock-value{font-family:'IBM Plex Mono',monospace;color:var(--or-300);font-weight:650;}
.vip-badge{display:inline-flex;align-items:center;border:1px solid rgba(255,122,24,.32);color:var(--or-300);border-radius:999px;padding:3px 7px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-left:7px;vertical-align:middle;}
.vip-next-lock-panel{display:block;}
.vip-next-lock-panel .vip-lock{margin-top:0;}
.vip-lock-action{display:inline-flex;margin-top:13px;padding:9px 12px;border:1px solid rgba(255,122,24,.35);border-radius:8px;color:var(--or-300);font-size:11px;font-weight:700;background:rgba(255,122,24,.06);}
.subtab .vip-badge{pointer-events:none;}
.cmp-card.vip-locked{opacity:.72;border-color:rgba(255,122,24,.2);}
.cmp-card.vip-locked .cmp-name:after{content:'VIP';display:inline-block;margin-left:8px;font-size:8px;letter-spacing:.08em;color:var(--or-300);border:1px solid rgba(255,122,24,.3);border-radius:999px;padding:2px 5px;vertical-align:2px;}


/* ---- extraído de: <style> ---- */

/* ===== WPG — Discord account control ===== */
.discord-account{position:relative;margin-left:10px;flex:0 0 auto}
.discord-login-btn,.discord-profile-btn{min-height:36px;border:1px solid #2b333e;border-radius:8px;background:#10151b;color:#e9edf2;font:600 12px 'Inter',sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.discord-login-btn:hover,.discord-profile-btn:hover{border-color:var(--or);background:#151b22;color:#fff}
.discord-profile-btn{display:none;align-items:center;gap:9px;padding:5px 9px 5px 6px}
.discord-profile-btn.visible{display:inline-flex}
.discord-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#242b35;display:block}
.discord-profile-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discord-profile-status{color:var(--or-300);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.discord-menu{position:absolute;top:calc(100% + 9px);right:0;width:230px;display:none;padding:8px;background:#10141a;border:1px solid #2b333e;border-radius:10px;box-shadow:0 18px 45px rgba(0,0,0,.35);z-index:30}
.discord-menu.open{display:block}
.discord-menu-head{padding:10px 10px 11px;border-bottom:1px solid #222a33}
.discord-menu-name-row{display:flex;align-items:center;margin-bottom:4px}
.discord-menu-name{color:#f4f5f7;font-size:13px;font-weight:700}
.discord-menu-meta{color:#858f9d;font-size:10px;line-height:1.5}
.discord-menu-status{margin-top:8px;display:inline-flex;padding:3px 7px;border:1px solid rgba(255,122,24,.30);border-radius:999px;color:var(--or-300);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.discord-menu-action{width:100%;margin-top:7px;padding:9px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aeb6c1;text-align:left;font:600 11px 'Inter',sans-serif;cursor:pointer}
.discord-menu-action:hover{background:#171d24;color:#fff}
.discord-menu-action.logout:hover{color:#ff9a8f}
.discord-menu-divider{height:1px;background:#222a33;margin:9px 0 5px;}
.discord-menu-label{padding:0 10px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#65707d;}
@media(max-width:760px){.discord-account{margin-left:5px}.discord-login-btn{padding:8px 10px;font-size:11px}.discord-profile-name{display:none}.discord-profile-btn{padding-right:7px}.discord-menu{right:0;width:215px}}
@media(max-width:520px){.discord-account{margin-left:2px}.discord-login-btn{font-size:0;padding:8px 10px}.discord-login-btn::after{content:'Discord';font-size:11px}}

.wpg-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.wpg-modal[hidden]{display:none;}
.wpg-modal-backdrop{position:absolute;inset:0;background:rgba(6,8,12,.72);backdrop-filter:blur(2px);}
.wpg-modal-panel{position:relative;width:100%;max-width:460px;max-height:80vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.wpg-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.wpg-modal-head h3{margin:0;font-size:17px;color:#fff;}
.wpg-modal-close{background:transparent;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.wpg-modal-close:hover{color:#fff;background:var(--card2);}

/* Visualizador de imagem do chat (lightbox, 2026-08-27) -- reaproveita
   .wpg-modal/.wpg-modal-backdrop (overlay/z-index/Esc já padronizados);
   sem .wpg-modal-panel aqui, é só a imagem centralizada, então zera o
   padding do container pra max-width/max-height em vw/vh valerem a
   viewport inteira de verdade. */
.community-image-lightbox{padding:0;}
.community-image-lightbox-img{position:relative;max-width:92vw;max-height:92vh;border-radius:6px;object-fit:contain;}
.community-image-lightbox-close{position:fixed;top:18px;right:18px;z-index:1;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.community-image-lightbox-close:hover{background:rgba(255,255,255,.22);}
.wpg-modal-sub{color:var(--muted);font-size:12.5px;margin:2px 0 16px;}
/* Modal "Criar comunidade" (redesign 2026-08-24) -- só este modal ganha
   cabeçalho/rodapé fixos (sticky) e mais largura; .wpg-modal-panel padrão
   (usado por todos os outros modais) fica intocado. */
.wpg-modal-panel.community-create-panel{max-width:640px;padding:0;display:flex;flex-direction:column;overflow:hidden;}
/* Bottom-sheet mobile (levantamento 2026-08-26, Etapa 1 -- só os 9 "A" do
   inventário, 2 ficaram de fora por serem literalmente .wpg-modal-auth
   mesmo estando na lista A: mfaLoginModal/mfaDisableModal, a pedido
   explícito de não tocar em "outros modais de autenticação" nesta
   etapa). Marcador (.wpg-modal-sheet) fica só no <div class="wpg-modal">
   de cada um dos 7 -- .wpg-modal-panel BASE (usado pelos 15 B, 3 C e o
   loginModal) fica 100% intocado, nem essa regra nem o resto do CSS
   dele muda uma vírgula. Mesmo breakpoint canônico (880px) já usado
   pela .app-sidebar/.mobile-menu-btn (auditoria mobile 2026-08-26) --
   cobre 320/375/390/812(paisagem), não toca 1440 desktop.
   !important só em max-width: 3 desses 7 modais (communityConfirmModal/
   comercioInterestConfirmModal/communityPromptModal) têm
   style="max-width:...px" inline no próprio HTML (pra ficarem menores
   que o padrão no desktop) -- inline sempre vence classe, então sem
   !important o modal ficaria preso nesse width fixo mesmo em mobile. */
@media(max-width:880px){
  .wpg-modal.wpg-modal-sheet{align-items:flex-end;padding:0;}
  .wpg-modal.wpg-modal-sheet .wpg-modal-panel{
    width:100%;max-width:none!important;
    border-radius:16px 16px 0 0;
    max-height:85vh;max-height:85dvh;
    padding:20px 20px max(20px,env(safe-area-inset-bottom));
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
  }
}
/* Etapa 2 (2026-08-26) -- os 15 "B" do inventário viram "quase
   fullscreen" no mobile: mesma ideia do .wpg-modal-sheet acima, mas sem
   flutuar de baixo -- ocupa a tela quase inteira (100dvh, cantos retos),
   porque o conteúdo desses 15 é mais longo (formulário com vários
   campos, upload, abas ou galeria) e não cabe bem num sheet parcial.
   Mesmo truque de especificidade (3 classes encadeadas) vence tanto
   .wpg-modal-wide (comercioAdDetailModal) quanto .community-create-panel
   (communityCreateModal) sem precisar de !important extra além do que
   os 2 já exigiam por conta própria. communityCreateModal mantém seu
   cabeçalho/rodapé sticky internos intocados -- sticky só depende de um
   ancestral com scroll, que continua existindo seja qual for o tamanho
   externo do modal. */
@media(max-width:880px){
  .wpg-modal.wpg-modal-full{align-items:stretch;padding:0;}
  .wpg-modal.wpg-modal-full .wpg-modal-panel{
    width:100%;max-width:none!important;
    height:100vh;height:100dvh;max-height:none!important;
    border-radius:0;
  }
  /* communityCreateModal usa padding:0 de propósito (o próprio
     cabeçalho/corpo/rodapé sticky já cuidam do próprio respiro) --
     :not() evita dobrar o padding só nele; os outros 14 ganham
     safe-area em cima/embaixo, já que agora encostam nas bordas de
     verdade (diferente do sheet, que só encostava embaixo). */
  .wpg-modal.wpg-modal-full .wpg-modal-panel:not(.community-create-panel){
    padding-top:max(22px,env(safe-area-inset-top));
    padding-bottom:max(22px,env(safe-area-inset-bottom));
  }
  /* Abas de communitySettingsModal/communitySecurityModal (únicos 2 dos
     15 com abas) -- pedido explícito do usuário: ficam visíveis no topo
     enquanto o conteúdo rola, pra não precisar voltar ao topo só pra
     trocar de aba num modal bem mais alto. Só nesta variante mobile --
     desktop continua sem sticky, como sempre foi. */
  .wpg-modal.wpg-modal-full .community-modal-tabs{
    position:sticky;top:0;background:var(--card);z-index:2;
    padding-top:4px;margin-bottom:4px;
  }
}
.community-create-panel .wpg-modal-sub{padding:0 22px 12px;margin:0;}
.community-create-sticky-head{position:sticky;top:0;background:var(--card);z-index:2;padding:22px 22px 4px;margin:0;}
.community-create-body{padding:0 22px 18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.community-create-sticky-foot{position:sticky;bottom:0;background:var(--card);padding:14px 22px 22px;border-top:1px solid var(--border);z-index:2;}
.wpg-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.wpg-field-row{grid-template-columns:1fr;}}
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.field-label-row .field-label{margin-bottom:0;}
.field-counter{font-size:10.5px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums;}
.field-label-action{background:none;border:none;color:var(--or);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;white-space:nowrap;}
.field-label-action:hover{text-decoration:underline;}
/* Seletor de arquivo com prévia (reaproveitável -- usado no Criar
   comunidade e no Configurações/Aparência). <label> de propósito (clique
   nativo abre o input), por isso reseta o texto herdado da regra global
   `label{text-transform:uppercase}` -- só o field-label acima dele deve
   ficar maiúsculo. */
.wpg-file-picker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 12px;border:1.5px dashed #333d4b;border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:0;text-transform:none;letter-spacing:normal;font-weight:400;}
.wpg-file-picker:hover{border-color:var(--or);background:var(--or-wash,rgba(255,122,24,.05));}
.wpg-file-picker-preview{flex:0 0 auto;background:#11151c;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden;}
.wpg-file-picker-preview svg{width:20px;height:20px;}
.wpg-file-picker-preview img{width:100%;height:100%;object-fit:cover;}
.wpg-file-picker-preview-round{width:52px;height:52px;border-radius:50%;}
.wpg-file-picker-preview-wide{width:96px;height:54px;border-radius:8px;}
.wpg-file-picker-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.wpg-file-picker-cta{font-size:12.5px;font-weight:700;color:var(--text,#fff);}
.wpg-file-picker-hint{font-size:10.5px;color:var(--muted);}

/* Acesso como cards clicáveis (redesign 2026-08-24) -- select nativo
   escondido continua sendo a fonte de verdade lida pelo JS de submit,
   os cards só escrevem o valor dele; nenhuma lógica de envio muda. */
.wpg-access-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.wpg-access-options{grid-template-columns:1fr;}}
.wpg-access-option{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--card2,var(--card));cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s,background .15s;}
.wpg-access-option:hover{border-color:#3a4250;}
.wpg-access-option.active{border-color:var(--or);background:var(--or-wash,rgba(255,122,24,.08));}
.wpg-access-radio{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-strong,#3a4250);margin-top:1px;position:relative;}
.wpg-access-option.active .wpg-access-radio{border-color:var(--or);}
.wpg-access-option.active .wpg-access-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--or);}
.wpg-access-text{display:flex;flex-direction:column;gap:2px;}
.wpg-access-title{font-size:13px;font-weight:700;color:var(--text,#fff);text-transform:none;}
.wpg-access-desc{font-size:11px;color:var(--muted);line-height:1.4;text-transform:none;}
.vip-pay-methods{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.vip-pay-method-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--card2);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,transform .15s;}
.vip-pay-method-btn:hover{border-color:var(--or);background:rgba(255,122,24,.08);transform:translateY(-1px);}
.vip-pay-method-icon{font-size:22px;line-height:1;}
.vip-pay-method-text{display:flex;flex-direction:column;gap:2px;}
.vip-pay-method-text strong{font-size:14px;}
.vip-pay-method-text small{color:var(--muted);font-size:12px;}
.vip-pay-method-btn:disabled{opacity:.55;cursor:wait;}
.perm-owner-line{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;background:rgba(255,122,24,.08);border:1px solid rgba(255,122,24,.25);font-size:12.5px;color:var(--or-300);margin-bottom:10px;}
.perm-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.perm-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:8px;background:var(--card2);border:1px solid var(--border);font-size:12.5px;color:var(--text);}
.perm-item small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px;}
.perm-item button{background:transparent;border:1px solid rgba(224,113,106,.35);color:#f0a89f;border-radius:6px;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer;}
.perm-item button:hover{background:rgba(224,113,106,.1);}
/* Ações positivas (Tornar Parceiro/Aprovar) usam --green em vez do
   vermelho padrão de .perm-item button (que é pensado pra "Remover"). */
.perm-item button.btn-promote,.perm-item button.btn-approve{border-color:rgba(63,191,107,.35);color:var(--green);}
.perm-item button.btn-promote:hover,.perm-item button.btn-approve:hover{background:rgba(63,191,107,.1);}
.partner-status{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.partner-status.approved{color:var(--green);border-color:rgba(63,191,107,.35);}
.partner-status.pending_review{color:var(--gold);border-color:rgba(216,168,74,.35);}
.partner-status.suspended{color:#f0a89f;border-color:rgba(224,113,106,.35);}
.perm-add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:flex-end;}
.perm-add-row input,.perm-add-row textarea{flex:1;min-width:110px;background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);font-size:12.5px;font-family:inherit;resize:vertical;}
/* Campo com legenda visível acima (2026-09-20, achado ao vivo: quando o
   input já chega preenchido -- ver "Tornar Parceiro" em creator-
   partners.js -- o placeholder some e ninguém sabe qual campo é qual). */
.perm-add-row .perm-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:110px;}
.perm-add-row .perm-field-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.perm-add-row .perm-field input{width:100%;min-width:0;}
.perm-add-row button{background:var(--or);color:#111;border:none;border-radius:7px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.perm-add-row .perm-field select{width:100%;background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);font-size:12.5px;font-family:inherit;}
#page-dashboard .perm-add-row select{background:var(--dsh-card2);border-color:var(--dsh-border);color:var(--dsh-text);}
.vip-cupom{margin-top:12px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;}
.vip-cupom summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);}
.vip-cupom[open] summary{color:var(--text);}
.vip-cupom-row{display:flex;gap:8px;margin-top:8px;}
.vip-cupom-row input{flex:1;min-width:0;background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);font-size:13px;text-transform:uppercase;}
.vip-cupom-hint{margin:6px 0 0;font-size:11px;color:var(--muted);}
.vip-cupom-msg{margin:6px 0 0;font-size:12.5px;font-weight:600;}
.vip-cupom-msg.ok{color:var(--ok,#3ecf8e);}
.vip-cupom-msg.error{color:var(--err,#ff6b6b);}
.perm-msg{margin-top:10px;font-size:12px;min-height:16px;}
.dash-avisos-item{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--card2);}
.dash-avisos-item-title{font:700 13.5px 'Inter',sans-serif;color:var(--text);}
.dash-avisos-item-body{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:pre-wrap;}
.dash-avisos-item-date{font-size:11px;color:var(--muted);margin-top:6px;opacity:.7;}
.atend-layout{display:grid;grid-template-columns:240px 1fr;gap:14px;min-height:420px;}
@media(max-width:760px){.atend-layout{grid-template-columns:1fr;}}
.atend-threads{border:1px solid var(--border);border-radius:12px;background:var(--card2);overflow:hidden;display:flex;flex-direction:column;max-height:520px;}
.atend-threads-head{padding:10px 12px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);}
.atend-thread-list{overflow-y:auto;}
.atend-thread-item{display:block;width:100%;text-align:left;padding:11px 12px;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:12.5px;font-family:inherit;cursor:pointer;}
.atend-thread-item:hover{background:rgba(255,122,24,.08);}
.atend-thread-item.active{background:rgba(255,122,24,.14);color:var(--or);font-weight:700;}
.atend-chat{border:1px solid var(--border);border-radius:12px;background:var(--card2);display:flex;flex-direction:column;min-height:420px;max-height:520px;}
.atend-chat-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);}
.atend-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.atend-messages[hidden]{display:none;}
/* CALL principal (pedido do usuário 2026-08-22, PDF de direção): chat fica
   do LADO da CALL, não escondido -- grid em vez de mais um flex aninhado
   pra não precisar de wrapper novo em volta de voice-panel+chat-column
   (cabeçalho continua ocupando a linha toda por cima dos dois). */
/* Achado ao vivo 2026-08-22 (relato + print do usuário, depois da correção
   de responsividade acima): o teto de altura de 640px do card inteiro
   (inline style em #communityAtendChat, pensado originalmente só pro chat
   de texto) sobrava pouco espaço vertical pra call -- o vídeo, respeitando
   a proporção real (object-fit:contain), acabava pequeno mesmo estando
   corretamente encaixado. !important necessário pra vencer o inline style
   (não dá pra editar o style="" sem duplicar a regra em outro lugar);
   height:calc(100vh-220px) do próprio inline continua valendo, só o teto
   artificial de 640px some no modo de voz -- estoura tela cheia se sobrar
   viewport, sem risco de overflow (grid+flex já garantem isso acima). */
.atend-chat.voice-mode{max-height:none !important;}
.atend-chat.voice-mode{display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto minmax(0,1fr);overflow:hidden;}
.atend-chat.voice-mode>.atend-chat-head{grid-column:1/-1;grid-row:1;}
.atend-chat.voice-mode>.community-voice-panel{grid-column:1;grid-row:2;overflow-y:auto;min-height:0;}
.atend-chat.voice-mode>.community-chat-column{grid-column:2;grid-row:2;border-left:1px solid var(--border);min-height:0;}
.community-chat-column{display:flex;flex-direction:column;min-height:0;flex:1;}
@media(max-width:860px){
  /* No celular o painel de voz/vídeo fica com a linha FLEXÍVEL e o chat
     vira uma faixa no rodapé (capada em 240px) -- "tipo Discord mobile".
     Antes era o contrário (chat com 1fr, painel do vídeo em `auto`), o
     que fazia o <video> em destaque desabar pro min-height:80px, já que
     ele é position:absolute e não contribui altura nenhuma (P1 da
     investigação mobile 2026-09-03). Desktop inalterado. */
  .atend-chat.voice-mode{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;}
  .atend-chat.voice-mode>.community-voice-panel{grid-column:1;grid-row:2;}
  .atend-chat.voice-mode>.community-chat-column{grid-column:1;grid-row:3;border-left:none;border-top:1px solid var(--border);max-height:240px;}
}
/* Modo maximizado (pedido do usuário 2026-08-22: manter o chat do lado
   mesmo com a tela compartilhada ampliada -- API nativa de Fullscreen não
   permite isso, só mostra 1 elemento sozinho). CSS puro em vez disso: só
   cobre a página inteira, mesmo grid de voice-mode continua valendo (vídeo
   em destaque cresce sozinho por ocupar mais espaço, chat permanece do
   lado). position:relative de base pra o botão de fechar se posicionar. */
.atend-chat{position:relative;}
/* Achado ao vivo 2026-08-22 (relato do usuário: "quando clico em expandir,
   expande o lobby em vez da transmissão"): o height:100vh acima nunca
   vencia de verdade o style="" inline de #communityAtendChat
   (height:calc(100vh - 220px)) -- especificidade de inline sempre ganha de
   classe, então o card "maximizado" ficava com a MESMA altura de sempre
   (só a largura crescia, via position:fixed;inset:0, que não tem
   competidor inline) -- a transmissão nunca ficava maior de verdade.
   !important nos dois pra garantir que os dois vencem o inline. */
.atend-chat.voice-mode-maximized{position:fixed;inset:0;z-index:500;border-radius:0;max-height:none !important;height:100vh !important;}
.community-voice-maximize-close{position:absolute;top:14px;right:14px;z-index:10;width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;}
.community-voice-maximize-close:hover{border-color:var(--or);color:var(--or);}
.community-voice-maximize-close[hidden]{display:none;}
/* Chat opcional/minimizável (pedido do usuário 2026-08-22) -- independente
   do modo maximizado, funciona nos dois (a coluna some, o vídeo ganha o
   espaço todo). Nunca mexe em communityWs/RTK, só layout. */
.atend-chat.voice-mode.chat-collapsed{grid-template-columns:1fr;}
.atend-chat.voice-mode.chat-collapsed>.community-chat-column{display:none;}
.community-chat-column{position:relative;}
.community-chat-collapse-btn{position:absolute;top:8px;right:8px;z-index:5;width:24px;height:24px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:.15s;}
.community-chat-collapse-btn:hover{color:var(--text);border-color:var(--or-line,rgba(255,122,24,.4));}
/* Correção de responsividade (2026-08-22, PDF "Correção do Screen Share"):
   painel vira coluna flex de altura real (a grid do voice-mode já dá a ele
   uma altura definida via a linha 1fr) -- controles fixos em cima,
   screenshare cresce pro espaço que sobrar (sem depender de vh, que era a
   causa do vídeo estourar a altura em telas mais baixas/janela menor que
   1080p) e a lista de presença ganha teto+scroll próprio em vez de
   empurrar tudo pra fora da área visível. */
.community-voice-panel{position:relative;display:flex;flex-direction:column;min-height:0;}
.community-voice-controls{flex:0 0 auto;position:relative;}
.community-voice-chat-reopen{position:absolute;right:14px;bottom:14px;z-index:10;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:.15s;}
.community-voice-chat-reopen:hover{border-color:var(--or);}
.community-voice-chat-reopen[hidden]{display:none;}
/* overflow-wrap:break-word (2026-08-27, junto da correção de imagem que
   vazava): o texto solto da mensagem (contentEl em chat.js, um <div> sem
   classe própria) não tinha nenhuma regra de quebra -- uma URL/string
   comprida sem espaço vazava da bolha do mesmo jeito que a imagem vazava,
   mesma causa-raiz (filho maior que o max-width do pai, sem nada
   permitindo ele encolher/quebrar). */
.atend-msg{max-width:80%;padding:8px 11px;border-radius:10px;font-size:12.5px;line-height:1.4;background:var(--card);border:1px solid var(--border);color:var(--text);align-self:flex-start;overflow-wrap:break-word;}
.atend-msg.staff{align-self:flex-end;background:rgba(255,122,24,.14);border-color:rgba(255,122,24,.3);}
/* Achado ao vivo 2026-08-26 (bug "bolha de mensagem curta"): .atend-msg
   não tem largura fixa (shrink-to-fit) e .atend-msg-author é flex sem
   wrap -- quando o autor tem nome+selos (Discord/país/verificado/criador)
   mais largos do que a bolha acabou ficando (seja pelo shrink-to-fit de
   uma mensagem curta, seja pelo max-width:80% cortando uma mensagem
   longa), nome/selos/botão de menu vazavam pra fora da bolha em vez de
   quebrar linha -- confirmado por medição real (menu.right passando do
   bubble.right em +39px num teste com nome longo). flex-wrap:wrap
   contém isso (methodun a segunda linha em vez de vazar); min-width:0 na
   identidade permite ela encolher dentro do espaço disponível em vez de
   forçar a linha a abrir; flex-shrink:0 no menu mantém o botão inteiro
   (nunca espremido a ponto de ficar ilegível). */
.atend-msg-author{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:3px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;}
.atend-msg-author-identity{min-width:0;overflow-wrap:break-word;word-break:break-word;}
.community-msg-menu{flex-shrink:0;}
/* Mantém as quebras de linha digitadas com Shift+Enter (ver chat.js). */
.community-msg-content{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;}
.atend-msg.staff .atend-msg-author{color:var(--or);}
/* Comunidade V2 -- Lapidação, item 5 (2026-08-24): o chat da Comunidade
   reaproveita .atend-msg (componente do Atendimento/Dashboard), mas usava
   a MESMA classe .staff pra marcar "mensagem própria" -- nada a ver com o
   cargo Staff da plataforma, colisão de nome pura. .atend-msg.staff
   continua intocado (é o Atendimento de verdade, atendimento.js); a
   Comunidade passa a usar .own, mesmo visual, nome correto. */
.atend-msg.own{align-self:flex-end;background:rgba(255,122,24,.14);border-color:rgba(255,122,24,.3);}
.atend-msg.own .atend-msg-author{color:var(--or);}
/* Agrupar mensagens consecutivas do mesmo autor (pedido do PDF "Sugestões
   de Melhoria" 2026-08-22, item Chat) -- some com o nome/selos repetidos
   (fica só o botão de ações, pra editar/apagar continuar acessível) e
   aproxima do balão anterior (.atend-messages usa gap:10px uniforme, isso
   reduz só pras agrupadas em vez de reestruturar o layout todo). */
.atend-msg.grouped{margin-top:-4px;}
.atend-msg.grouped .atend-msg-author-identity{display:none;}
.atend-msg.grouped .atend-msg-author{margin-bottom:0;min-height:0;}
.community-msg-menu{position:relative;display:inline-flex;margin-left:auto;}
.community-msg-menu-btn{font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:6px;padding:1px 7px;cursor:pointer;opacity:.7;line-height:1.5;}
.community-msg-menu-btn:hover{opacity:1;color:var(--text);}
.community-msg-menu-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:110px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:20;display:flex;flex-direction:column;padding:4px;}
.community-msg-menu-dropdown[hidden]{display:none;}
.community-msg-menu-dropdown button{background:transparent;border:none;color:var(--text);font-size:11.5px;text-align:left;padding:7px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.community-msg-menu-dropdown button:hover{background:var(--border);}
.community-channel-tab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;text-align:left;font:700 12px 'Inter',sans-serif;padding:7px 10px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;}
.community-chan-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
/* Presença de voz ocupa a linha de baixo inteira, alinhada com o rótulo
   (não com o badge de inicial à esquerda) -- antes era block empilhado
   direto, agora o botão é flex row por causa do badge. */
.community-channel-tab .community-voice-tab-presence{flex:0 0 100%;margin-left:28px;}
/* Navegador de comunidades: grade de cards (era uma fileira de pills
   centralizada, ficava "estranho" -- feedback do usuário 2026-08-20).
   Mesma linguagem visual de .platform-card/.games-grid (Jogos/Comércio),
   não copiada de nenhuma outra plataforma de chat. */
/* Filtro "Todas / Minhas comunidades" do Portal (2026-08-23) -- mesma
   receita visual do .comercio-status-tab (pílula, ativo em laranja), só
   com nome próprio do domínio pra não confundir quem for ler este arquivo
   futuramente achando que é um componente de Comércio. */
.community-filter-tabs{display:flex;gap:8px;justify-content:center;margin:0 auto 16px;flex-wrap:wrap;}
.community-filter-tabs[hidden]{display:none;}
.community-switcher{max-width:1100px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.community-switcher-item{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:20px;border-radius:13px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s;}
.community-switcher-item:hover{border-color:var(--or-line,rgba(255,122,24,.4));transform:translateY(-2px);}
.community-switcher-item.active{border-color:var(--or);}
.community-switcher-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.community-switcher-icon{width:44px;height:44px;border-radius:11px;background:var(--or);color:#1a1206;font:800 16px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.community-switcher-icon-img{width:44px;height:44px;border-radius:11px;object-fit:cover;flex-shrink:0;}
.community-switcher-name{font:700 16px 'Inter',sans-serif;color:var(--text);display:block;margin-bottom:3px;}
.community-switcher-game{font:500 12.5px 'Inter',sans-serif;color:var(--muted);display:block;margin-bottom:14px;}
.community-switcher-members{font:600 11.5px 'Inter',sans-serif;color:var(--muted);display:block;margin:-10px 0 14px;opacity:.8;}
.community-switcher-official{font:800 9px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1a1206;background:linear-gradient(90deg,var(--or),var(--or-600));padding:2px 7px;border-radius:999px;}
.community-switcher-cta{margin-top:auto;width:100%;background:transparent;border:1px solid var(--border-strong,var(--border));color:var(--text);border-radius:9px;padding:10px;font:700 12.5px 'Inter',sans-serif;text-align:center;transition:.15s;}
.community-switcher-item:hover .community-switcher-cta{background:var(--or);color:#1a1206;border-color:var(--or);}
.community-switcher-item.active .community-switcher-cta{background:var(--or);color:#1a1206;border-color:var(--or);}
.community-switcher-cta.primary{background:var(--or);color:#1a1206;border-color:var(--or);}
/* Redesign visual do Portal (2026-08-24) -- pills de jogo, cabeçalho com
   contador, e blocos secundários com ícone. Puramente visual, ver
   community.js pra onde hidden/show e o texto do contador são setados. */
.community-game-pills{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 auto 16px;}
.community-game-pills[hidden]{display:none;}
.community-game-pill{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font:700 12px 'Inter',sans-serif;color:var(--muted);cursor:pointer;transition:.15s;}
.community-game-pill:hover{border-color:var(--border-strong);color:var(--text);}
.community-game-pill.active{background:var(--or);border-color:var(--or);color:#1a1206;cursor:default;}
.community-game-pill[disabled]{opacity:.45;cursor:not-allowed;}
.community-game-pill[disabled]:hover{border-color:var(--border);color:var(--muted);}
.community-game-pills-note{font-size:11px;color:var(--muted);font-weight:600;margin-left:2px;}
/* Comunidade V2 -- Lapidação, item 4 (2026-08-24): chip único substituindo
   as 4 pills desabilitadas -- borda tracejada (não sólida) marca "isto não
   é uma opção clicável agora", diferente do padrão active/hover das pills
   reais. Nomes dos jogos continuam no title (hover), nada foi apagado. */
.community-game-pill-soon{border-style:dashed;opacity:.55;cursor:default;font-size:11px;}
.community-game-pill-soon:hover{border-color:var(--border);color:var(--muted);}
.community-list-head{display:flex;align-items:baseline;gap:10px;margin:0 auto 14px;}
.community-list-head[hidden]{display:none;}
.community-list-eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.community-list-count{font-size:12px;color:var(--muted);}
.community-secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 auto 24px;}
.community-secondary-card{background:var(--card2,var(--card));border:1px solid var(--border);border-radius:12px;padding:16px 18px;gap:12px;align-items:center;transition:border-color .15s;}
.community-secondary-card:hover{border-color:var(--border-strong);}
.community-secondary-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.community-secondary-ico svg{width:17px;height:17px;}
/* Varredura #1 (cor única): ícones dos cards secundários da Comunidade
   eram roxo/ciano -> laranja de acento (wash). */
.community-secondary-ico-purple,.community-secondary-ico-cyan{color:var(--or);background:var(--or-wash);}
.community-secondary-text{font-size:13px;font-weight:700;color:var(--text);margin-right:auto;}
.community-secondary-cta{width:auto !important;margin-left:12px;}
@media(max-width:640px){.community-secondary-row{grid-template-columns:1fr;}}
/* Capa/banner por comunidade (pedido do usuário 2026-08-20) -- fundo com
   a imagem enviada, gradiente escuro por cima pra garantir que nome/CTA
   continuem legíveis em cima de qualquer foto (sem isso, uma imagem clara
   deixaria o texto branco ilegível). */
.community-switcher-item.has-banner{background-size:cover;background-position:center;position:relative;}
.community-switcher-item.has-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.25),rgba(10,8,6,.88));border-radius:inherit;}
.community-switcher-item.has-banner>*{position:relative;z-index:1;}
/* Prévia de "não sou membro" -- ícone/nome da comunidade em destaque,
   pedido de acesso como fluxo principal, código de convite escondido
   atrás de um link secundário (a maioria não tem um). */
.community-gate-identity{text-align:center;margin-bottom:20px;}
.community-gate-icon{width:48px;height:48px;border-radius:12px;background:var(--or);color:#1a1206;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;object-fit:cover;}
.community-gate-identity .card-title{font-family:var(--display);font-weight:700;margin:0 0 6px;text-transform:none;letter-spacing:-.01em;font-size:16px;color:var(--text);}
.community-gate-identity .wpg-modal-sub{margin:0;}
.community-gate-invite-toggle{display:block;width:100%;text-align:center;background:transparent;border:none;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;margin-top:14px;padding:4px;}
.community-gate-invite-toggle:hover{color:var(--text);}
#communityGateInviteWrap{margin-top:12px;padding-top:14px;border-top:1px solid var(--border);}
/* Comunidade C4 (2026-09-04) -- estado vazio do chat principal (#geral e
   qualquer canal/grupo/DM sem mensagem). Escopado a esta classe nova de
   propósito: .atend-empty/.atend-messages (base) são compartilhadas com o
   Atendimento do Comércio, Negociações e o Dashboard -- nenhuma delas foi
   tocada. .atend-messages já é display:flex;flex-direction:column, então
   margin:auto 0 no filho único (sem mensagem = 1 filho só) centraliza
   verticalmente no espaço entre o cabeçalho do canal e o composer, sem
   mexer no container. Reusa .community-gate-icon (mesmo ícone 👋 do prompt
   de login do C3) tal como já existe, sem novo estilo pro ícone em si. */
.community-chat-empty{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:2px;}
.community-chat-empty .community-gate-icon{margin:0 auto 10px;}
.community-chat-empty-title{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--text);}
.community-chat-empty-sub{font-size:12.5px;color:var(--muted);}
/* Layout de 2 colunas dentro de uma comunidade -- mesmo padrão de
   grid+sticky que #page-dashboard .dash-sidebar já usa, mas com a paleta
   padrão do site (var(--or)/var(--border)/var(--bg-alt)) em vez da
   paleta índigo/dourada exclusiva do Dashboard. Abaixo de 860px empilha
   (sidebar vira uma barra horizontal rolável acima do chat). */
.community-shell{display:grid;grid-template-columns:224px minmax(0,1fr);gap:14px;align-items:start;}
/* Comunidade V2 -- Lapidação (2026-08-24): a sidebar interna tinha o
   mesmo tratamento de "cartão" (borda inteira + cantos arredondados +
   --bg-alt, igual à sidebar externa do site) -- lida como uma segunda
   sidebar competindo com a de navegação principal. Vira só uma extensão
   do ambiente: mesmo fundo do conteúdo (--bg), sem cartão, só uma linha
   divisória. Nenhuma seção/funcionalidade mudou, só o tratamento visual.
   Aprovado via mockup (Artifact) antes deste código. */
.community-sidebar{position:sticky;top:16px;display:flex;flex-direction:column;gap:18px;padding:14px;border-right:1px solid var(--border);background:var(--bg);max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;}
.community-sidebar-section{display:flex;flex-direction:column;gap:6px;}
/* Títulos de seção CANAIS/VOZ/GRUPOS/DMs -- alinhados à linguagem de
   rótulo do redesign (mono, peso 500, tracking largo) em vez do Inter 800
   #b7bfc9 que soava "gritado" no celular (feedback do usuário 2026-08-29).
   Visível pra escanear, sem competir com os nomes dos canais. */
.community-sidebar-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono),ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid,var(--muted));padding:0 2px;}
.community-sidebar-add{width:18px;height:18px;border-radius:5px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.community-sidebar-add:hover{color:var(--text);border-color:var(--or-line,rgba(255,122,24,.4));}
.community-sidebar-add[hidden]{display:none;}
.community-sidebar-list{display:flex;flex-direction:column;gap:2px;}
.community-sidebar-dm{position:relative;}
.community-sidebar-dm input{width:100%;box-sizing:border-box;font-size:12.5px;padding:7px 9px;}
.community-sidebar-dm-btn{width:100%;padding:8px;font-size:12px;}
.community-sidebar-blocked{width:100%;padding:8px;font-size:12px;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;box-shadow:none;}
.community-sidebar-blocked:hover{color:var(--text);}
.community-main{min-width:0;}
/* Sidebar Colapsável (2026-08-24): recolher escondia a sidebar inteira
   (display:none), o botão ☰ no cabeçalho do chat reabria. Vira rail
   estreito ícone-só igual à sidebar principal do site -- nunca some de
   verdade, .community-main (min-width:0, coluna 1fr) reflui sozinho. */
.community-shell.sidebar-collapsed{grid-template-columns:64px minmax(0,1fr);transition:grid-template-columns .2s ease;}
.community-shell.sidebar-collapsed .community-sidebar{padding:14px 8px;align-items:center;}
.community-shell.sidebar-collapsed .community-sidebar-header{margin:-14px -8px 10px;}
.community-shell.sidebar-collapsed .community-sidebar-header-btn{justify-content:center;padding:12px 4px;}
.community-shell.sidebar-collapsed .community-sidebar-header-btn span:first-child{display:none;}
.community-shell.sidebar-collapsed .community-sidebar-head,
.community-shell.sidebar-collapsed .community-sidebar-add,
.community-shell.sidebar-collapsed .community-chan-lbl,
.community-shell.sidebar-collapsed .community-voice-tab-presence,
.community-shell.sidebar-collapsed .community-channel-menu,
.community-shell.sidebar-collapsed .community-sidebar-dm,
.community-shell.sidebar-collapsed .community-sidebar-dm-btn,
.community-shell.sidebar-collapsed .community-sidebar-blocked{display:none;}
.community-shell.sidebar-collapsed .community-channel-row{justify-content:center;}
.community-shell.sidebar-collapsed .community-channel-tab{display:flex;justify-content:center;padding:0;
  width:36px;height:36px;position:relative;background:rgba(255,255,255,.025);}
.community-shell.sidebar-collapsed .community-channel-tab:hover{transform:translateY(-1px);}
/* Tooltip -- mesma técnica/visual da sidebar principal (data-tooltip lido
   via attr(), só aparece no modo recolhido). */
.community-shell.sidebar-collapsed .community-channel-tab::after{
  content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(-4px);background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:7px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:30;
}
.community-shell.sidebar-collapsed .community-channel-tab:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}
.community-chan-badge{width:20px;height:20px;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:800;color:#0a0d12;}
.community-sidebar-toggle-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;width:22px;height:22px;font-size:10.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;transition:.15s;}
.community-sidebar-toggle-btn:hover{color:var(--text);border-color:var(--or-line,rgba(255,122,24,.4));}
.community-sidebar-toggle-btn.active{color:var(--or);border-color:var(--or-line,rgba(255,122,24,.3));background:var(--or-wash,rgba(255,122,24,.06));}
@media (max-width:860px){
  /* Mobile chat-first (2026-08-29, pedido do usuário): o chat ocupa a
     tela; a lista de Canais/Voz/Grupos/DMs vira GAVETA que desliza da
     esquerda (mesmo padrão do painel de Membros logo abaixo). O ☰ do
     cabeçalho abre/fecha; escolher um canal fecha sozinho. */
  /* `.sidebar-collapsed` é comportamento só de desktop (trilha de ícones).
     No celular a sidebar é gaveta -- o JS já não adiciona essa classe
     aqui, isto é só defesa pro instante de rotação/resize: nunca deixar a
     grid `64px minmax(0,1fr)` da trilha espremer o chat/voz. */
  .community-shell,
  .community-shell.sidebar-collapsed{grid-template-columns:1fr;}
  .community-sidebar{
    position:fixed;left:0;top:0;height:100vh;height:100dvh;
    width:min(84vw,300px);z-index:56;
    flex-direction:column;flex-wrap:nowrap;gap:18px;
    max-height:none;overflow-y:auto;overflow-x:hidden;
    border-right:1px solid var(--border);border-bottom:none;
    padding:16px 14px 20px;background:var(--bg);
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 44px rgba(0,0,0,.55);
  }
  .community-sidebar-section{flex:initial;min-width:0;}
  .community-shell.channels-open .community-sidebar{transform:translateX(0);}
  .community-shell.channels-open::before{
    content:"";position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);
  }
  /* chat em tela cheia -- vence o height inline do #communityAtendChat.
     `body.community-env-mode` (setado em communityShowEnv) casa a
     specificity com a regra de desktop mais abaixo. Rodapé escondido nesse
     modo, então sobra só topbar (62) + "← Portal" + margens. */
  body.community-env-mode .community-main .atend-chat{
    height:calc(100dvh - 140px)!important;
    min-height:0!important;max-height:none!important;
  }
  #communityChatCard{border:none;background:transparent;}
}
/* Dentro de uma comunidade = contexto de "app" (chat), não página de
   marketing (2026-08-29, revisão visual): esconde o rodapé e deixa o
   chat ocupar a altura da janela em vez de travar em max-height:640px
   (que deixava ~200px de vazio + o rodapé pendurado no desktop). Mesma
   ideia do body.dash-mode. Mobile tem sua própria regra no @media acima
   -- por isso a altura aqui fica atrás de min-width:861px (senão, mesma
   specificity + fonte depois = venceria dentro do @media mobile). */
body.community-env-mode .wpg-footer-full{display:none!important;}
@media (min-width:861px){
  body.community-env-mode .community-main .atend-chat{
    max-height:none!important;
    height:calc(100vh - 100px)!important;
  }
}
/* Preferência de orientação: paisagem (2026-08-26) -- só ativa quando o
   usuário escolheu "Preferir paisagem" (html[data-orientation-pref],
   ver applyOrientationPref em main.js) E o aparelho está fisicamente
   deitado E a largura é de celular/tablet pequeno. O max-width:960px é
   o que garante nunca bater numa janela de desktop de verdade -- toda
   janela de desktop já é "paisagem" pela própria definição do media
   query, é a largura que separa os dois casos. min-width:600px exclui
   aparelhos pequenos demais (ex. iPhone SE em paisagem, 568px) onde nem
   sobra largura suficiente pra valer a pena -- caem de volta no
   empilhamento normal acima. Restaura os grids de 2 colunas do desktop
   (canais ao lado do conteúdo, vídeo/voz ao lado do chat) em vez do
   empilhamento vertical: paisagem sobra largura e falta altura, então
   empilhar é o pior uso possível do espaço disponível. Retrato no mesmo
   aparelho não é afetado -- só existe dentro dessas condições
   combinadas. Especificidade do seletor com atributo já garante que
   isso vence a regra ≤860px acima independente da ordem no arquivo. */
@media (orientation:landscape) and (min-width:600px) and (max-width:960px){
  html[data-orientation-pref="landscape"] .community-shell{
    grid-template-columns:190px minmax(0,1fr);
  }
  html[data-orientation-pref="landscape"] .community-sidebar{
    position:sticky;max-height:calc(100vh - 24px);overflow-y:auto;
    flex-direction:column;flex-wrap:nowrap;gap:18px;
    border-right:1px solid var(--border);border-bottom:none;padding-bottom:0;
  }
  html[data-orientation-pref="landscape"] .community-sidebar-section{flex:initial;min-width:0;}

  html[data-orientation-pref="landscape"] .atend-chat.voice-mode{
    grid-template-columns:1fr 260px;grid-template-rows:auto minmax(0,1fr);
  }
  html[data-orientation-pref="landscape"] .atend-chat.voice-mode>.community-voice-panel{
    grid-column:1;grid-row:2;
  }
  html[data-orientation-pref="landscape"] .atend-chat.voice-mode>.community-chat-column{
    grid-column:2;grid-row:2;border-left:1px solid var(--border);border-top:none;max-height:none;
  }
}
/* Ambiente de uma comunidade especifica -- Portal (grade de cards) e este
   bloco nunca ficam visiveis ao mesmo tempo (communityShowEnv em
   community.js alterna hidden entre os dois). Reestruturado 2026-08-23
   (mapeamento "Comunidade como ambiente"): deixou de ser um dashboard com
   abas -- entra direto no .community-shell (canais + chat), que já existia
   e reaproveita 100%. */
#communityEnv{max-width:1200px;margin:0 auto 40px;}
.community-env-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--muted);font:700 12.5px 'Inter',sans-serif;cursor:pointer;padding:6px 2px;margin-bottom:14px;}
.community-env-back:hover{color:var(--text);}
.community-env-banner{height:130px;border-radius:14px;margin-bottom:16px;background-size:cover;background-position:center;border:1px solid var(--border);}
/* .community-env-body/-nav/-tab/-content: removidas daqui quando a
   Comunidade virou ambiente persistente (commit 40316a5, mesmo dia),
   mas o Perfil já tinha reaproveitado essas 4 classes horas antes pras
   próprias sub-abas (Identidade/Conta/Segurança/Preferências/Ajuda) --
   ficaram sem CSS desde então sem ninguém perceber (achado ao vivo
   2026-08-25, quase 2 dias depois). Restauradas aqui só pro Perfil,
   único consumidor hoje. */
.community-env-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start;}
.community-env-nav{display:flex;flex-direction:column;gap:3px;padding:14px 10px;border-radius:14px;border:1px solid var(--border);background:var(--bg-alt);position:sticky;top:16px;}
.community-env-tab{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);font:700 12px 'Inter',sans-serif;cursor:pointer;font-family:inherit;}
.community-env-tab:hover:not(:disabled){color:var(--text);background:var(--card);}
.community-env-tab.active{background:var(--or-wash,rgba(255,122,24,.14));border-color:var(--or-line,rgba(255,122,24,.4));color:var(--or);}
.community-env-tab:disabled{opacity:.42;cursor:not-allowed;}
.community-env-content{min-width:0;}
@media (max-width:720px){
  .community-env-body{grid-template-columns:1fr;}
  .community-env-nav{position:static;flex-direction:row;flex-wrap:wrap;}
  .community-env-tab{width:auto;flex:1 1 auto;text-align:center;}
}
/* Header fixo (nome+identidade) no topo da sidebar de canais -- clique
   abre o menu contextual (Portal/Membros/Cargos/Criar canal/Convidar/
   Configurações/Segurança/Sair), mesma lógica do clique no nome do
   servidor no Discord. */
.community-sidebar-header{position:relative;margin:-14px -14px 10px;padding:0;}
.community-sidebar-header-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 14px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font:700 13.5px 'Inter',sans-serif;cursor:pointer;text-align:left;font-family:inherit;}
.community-sidebar-header-btn:hover{color:var(--or);}
.community-sidebar-header-btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.community-sidebar-header-chevron{font-size:11px;flex-shrink:0;opacity:.6;}
.community-sidebar-header-chevron.active{opacity:1;}
/* position:fixed com top/left calculados em JS (ver community.js) --
   achado ao vivo 2026-08-23: absolute dentro da sidebar (overflow-y:auto)
   nunca escapa pra fora dela, então o menu sempre acabava cobrindo Canais/
   Voz/Grupos/DM por inteiro. Fixed + coordenada real do botão abre pro
   lado, sobre o chat, sem tocar em nenhum canal. */
.community-context-menu{position:fixed;min-width:220px;max-width:min(280px,calc(100vw - 20px));z-index:30;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:1px;}
/* Achado ao vivo 2026-08-23: [hidden] sozinho perde o empate de
   especificidade contra a regra acima (mesma especificidade, autor sempre
   vence o UA stylesheet) -- "fechar" nunca escondia o menu de verdade,
   só parecia funcionar às vezes por causa de posição/sobreposição. */
.community-context-menu[hidden]{display:none;}
.community-context-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;border:none;background:transparent;color:var(--text);font:700 12.5px 'Inter',sans-serif;cursor:pointer;font-family:inherit;}
.community-context-menu button:hover{background:var(--bg-alt);color:var(--or);}
.community-context-menu button.community-context-menu-danger{color:#ff6b6b;}
.community-context-menu button.community-context-menu-danger:hover{background:rgba(255,107,107,.1);color:#ff8a8a;}
.community-context-menu hr{border:none;border-top:1px solid var(--border);margin:5px 2px;}
/* Painel de Membros -- 3ª coluna do grid, só existe quando aberto (ver
   .community-shell.members-open abaixo), nunca rouba espaço fechado --
   mesmo mecanismo já usado por .sidebar-collapsed do lado esquerdo. */
.community-shell.members-open{grid-template-columns:224px minmax(0,1fr) 260px;}
.community-members-panel{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-alt);max-height:calc(100vh - 32px);overflow-y:auto;}
/* Mesmo bug de especificidade já achado e corrigido em .community-context-menu
   acima (2026-08-23): [hidden] sozinho perde o empate contra a regra de
   cima (mesma especificidade, autor sempre vence UA stylesheet) -- o
   painel aparecia sempre visível, fora do lugar (grid ainda 2 colunas,
   já que .members-open nunca era aplicado de verdade com o painel preso
   sempre aberto), mesmo com hidden presente no HTML e o toggle de
   comunitySetMembersOpen funcionando certo por baixo. */
.community-members-panel[hidden]{display:none;}
.community-members-panel-head{display:flex;align-items:center;justify-content:space-between;font:800 11px 'Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#b7bfc9;padding:0 2px;}
.community-members-panel-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px;}
.community-members-panel-close:hover{color:var(--text);}
/* Sub-abas simples dentro de um modal (ex.: Convites/Banidos em
   #communitySecurityModal) -- mesmo idioma visual usado nos badges/botões
   compactos do resto do domínio, não é a barra de abas removida da
   comunidade. */
.community-modal-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.community-modal-tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font:700 12.5px 'Inter',sans-serif;padding:8px 4px;cursor:pointer;font-family:inherit;}
.community-modal-tab:hover{color:var(--text);}
.community-modal-tab.active{color:var(--or);border-bottom-color:var(--or);}
.community-member-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-alt);margin-bottom:8px;flex-wrap:wrap;}
.community-member-name{font-size:13px;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Comunidade V2 -- Lapidação, item 3 (2026-08-24): mesmo tamanho/receita
   visual do avatar já usado na presença de voz (community-voice-tab-avatar),
   só um pouco maior por estar sozinho na linha, não empilhado. */
.community-member-avatar{width:26px;height:26px;border-radius:50%;background:var(--or);color:#1a1206;
  font:800 11px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;flex:0 0 auto;object-fit:cover;}
.community-member-role{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--card);color:var(--muted);border:1px solid var(--border);}
.community-member-role-owner{background:rgba(255,122,24,.14);border-color:rgba(255,122,24,.4);color:var(--or);}
.community-member-role-admin{background:rgba(176,120,232,.14);border-color:rgba(176,120,232,.4);color:var(--purple);}
/* Agrupamento por hierarquia da aba Membros (Creator/Moderador/Membros) --
   pedido do usuário 2026-08-22, PDF "Página de Membros" com referência ao
   Discord. Badge de cargo custom (VIP etc.) fica dentro da linha, separado
   do agrupamento em si. */
.community-member-group{margin-bottom:18px;}
.community-member-group:last-child{margin-bottom:0;}
.community-member-group-header{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 2px 8px;}
.community-member-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:rgba(255,122,24,.1);border:1px solid rgba(255,122,24,.3);color:var(--or);}
.community-member-badge-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;}
.community-member-badge-remove{background:transparent;border:none;color:inherit;opacity:.55;cursor:pointer;font-size:9px;padding:0;line-height:1;}
.community-member-badge-remove:hover{opacity:1;}
.community-member-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}
.community-member-assign-role{font-size:10.5px;font-weight:700;background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 8px;cursor:pointer;}
/* Governança P0/UI -- reduzida a um "⋯" por linha (mapeamento "Comunidade
   como ambiente" 2026-08-23: lista de membros limpa, ações só sob demanda,
   igual ao Discord). O botão só existe quando canActOnTarget é true (ver
   community.js) -- nunca aparece desabilitado, some por completo pra quem
   não pode agir. Popover reaproveita o idioma visual de
   .community-context-menu. */
.community-member-governance{position:relative;padding-left:6px;margin-left:2px;border-left:1px solid var(--border);}
.community-member-gov-kebab{font-size:13px;font-weight:700;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:6px;width:24px;height:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.community-member-gov-kebab:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.community-member-gov-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:170px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:1px;}
/* Comunidade C5 (2026-09-04) -- sem isso, o `hidden` que o JS liga/desliga
   (community.js, toggle do "⋯") não tinha efeito nenhum: a regra acima já
   fixa display:flex, e classe x atributo empatam em especificidade -- em
   empate, CSS de autor sempre vence o [hidden]{display:none} padrão do
   navegador. Resultado ao vivo (confirmado via getComputedStyle em
   produção): as popovers de TODOS os membros ficavam sempre visíveis e
   empilhadas, mesmo com hidden=true. Mesmo padrão que .community-voice-
   panel[hidden]/.community-members-panel[hidden]/.atend-messages[hidden]
   já usam neste arquivo -- só faltou aqui. */
.community-member-gov-popover[hidden]{display:none;}
.community-member-gov-popover button{display:block;width:100%;text-align:left;padding:7px 9px;border-radius:7px;border:none;background:transparent;color:var(--text);font:700 12px 'Inter',sans-serif;cursor:pointer;font-family:inherit;}
.community-member-gov-popover button:hover{background:var(--bg-alt);color:var(--or);}
.community-member-gov-popover hr{border:none;border-top:1px solid var(--border);margin:5px 2px;}
.community-member-gov-popover button.community-member-gov-danger{color:#ff6b6b;}
.community-member-gov-popover button.community-member-gov-danger:hover{background:rgba(255,107,107,.1);color:#ff8a8a;}
/* Convites por comunidade -- mesmo idioma visual de .community-role-card. */
.community-invite-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12.5px;flex-wrap:wrap;}
.community-invite-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.community-invite-code{font-weight:700;color:var(--text);font-family:monospace;letter-spacing:.04em;cursor:pointer;}
.community-invite-code:hover{color:var(--or);}
.community-invite-meta{color:var(--muted);font-size:11px;}
.community-invite-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.community-invite-copy-btn{background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:11px;padding:5px 10px;border-radius:6px;font-weight:600;}
.community-invite-copy-btn:hover{border-color:var(--or);color:var(--or);}
.community-invite-revoke{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:2px 6px;font-weight:700;}
.community-invite-revoke:hover{color:var(--text);}
/* Banidos -- lista simples, motivo/data secundários. */
.community-ban-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12.5px;}
.community-ban-row-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.community-ban-row-name{font-weight:700;color:var(--text);}
.community-ban-row-meta{color:var(--muted);font-size:11px;}
/* A barra lateral fixa do site (.app-sidebar, ~248px) já come parte da
   largura da viewport antes mesmo de chegar aqui -- com o painel de
   Membros aberto (3ª coluna, 260px) o mesmo aperto real que já existia
   nesse range volta a acontecer bem antes do breakpoint padrão de 860px
   de outras telas do site. Abaixo de 1300px o painel de Membros vira
   drawer sobreposto (mesma técnica do mobile), em vez de tentar espremer
   3 colunas. */
@media (max-width:1300px){
  .community-shell.members-open{grid-template-columns:224px minmax(0,1fr);}
  .community-shell.members-open>.community-members-panel{position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(84vw,320px);z-index:50;border-radius:0;max-height:none;}
}
@media (max-width:860px){
  .community-shell.members-open{grid-template-columns:1fr;}
}
.community-reply-bar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--card2,var(--card));border-top:1px solid var(--border);font-size:12px;color:var(--muted);}
.community-reply-bar[hidden]{display:none;}
.community-reply-bar-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.community-reply-bar-cancel{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 6px;}
.community-reply-bar-cancel:hover{color:var(--text);}
/* Achado ao vivo 2026-08-27 (imagem vazando da bolha): max-width:260px era
   um valor fixo em pixels, sem relação com a largura real de .atend-msg
   (que é shrink-to-fit, max-width:80% do painel do chat) -- sempre que 80%
   do painel dava menos que 260px (comum em mobile e até desktop com
   sidebar aberta), a imagem ultrapassava a bolha e criava scroll
   horizontal (.atend-messages só declara overflow-y, então overflow-x vira
   auto sozinho por spec). max-width:100% agora é relativo ao pai de
   verdade (a bolha); height:auto preserva proporção; max-height continua
   limitando imagem muito alta; object-fit:cover mantido (não estava
   causando o bug, e não faz mal deixar). Imagem pequena nunca é ampliada
   -- max-width/max-height só encolhem, nunca esticam além do tamanho
   original. */
.community-msg-image{display:block;max-width:100%;height:auto;max-height:260px;border-radius:8px;margin-top:6px;cursor:pointer;object-fit:cover;}
/* "Digitando..." (pedido do PDF "Sugestões de Melhoria" 2026-08-22, item
   Chat) -- linha discreta acima do composer, some sozinha (sem [hidden])
   quando ninguém está digitando. */
.community-typing-indicator{padding:4px 14px;font-size:11px;font-style:italic;color:var(--muted);}
.community-typing-indicator[hidden]{display:none;}
.community-role-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;max-width:420px;font-size:12.5px;}
.community-role-swatch{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;}
.community-role-card-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.community-role-card-name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.community-role-card-count{color:var(--muted);font-size:11px;}
.community-role-card-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.community-role-card-actions button{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px;}
.community-role-card-actions button:hover{color:var(--text);}
.community-role-member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12.5px;}
.community-role-member-row button{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px;}
.community-role-member-row button:hover{color:var(--text);}
.atend-msg-reply-preview{display:flex;gap:6px;align-items:baseline;font-size:11.5px;color:var(--muted);margin-bottom:2px;border-left:2px solid var(--border);padding-left:8px;}
.atend-msg-reply-preview b{color:var(--text);font-size:11.5px;}
.atend-msg-reply-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;}
.community-blocked-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.community-blocked-row:last-child{border-bottom:none;}
.community-voice-panel{padding:24px;text-align:center;}
.community-voice-panel[hidden]{display:none;}
/* Tela compartilhada ocupa a área principal da CALL automaticamente, sem
   clique em "Assistir" (pedido do usuário 2026-08-22, PDF de direção
   "WPG_CALL_Estilo_Discord" -- substitui o antigo modelo opt-in +
   lightbox em tela cheia, que foi removido). 1 destaque grande + miniaturas
   clicáveis das outras pessoas compartilhando ao mesmo tempo (se houver). */
.community-screenshare-grid{margin-top:16px;}
.community-screenshare-grid:empty{margin-top:0;}
.community-screenshare-grid:not(:empty){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;}
/* Pedido do usuário 2026-08-22 ("Refinamentos no Screen Share"): sem
   barras claras nas laterais -- fundo escuro de verdade (mesma cor do
   <video>, não só parecida) preenchendo qualquer sobra, flex centraliza
   em vez de depender só do tamanho do conteúdo, object-fit:contain nunca
   distorce/estica. Se ainda aparecer uma borda clara depois disso, ela
   está gravada dentro dos próprios frames capturados (moldura da janela
   do SO) -- aí não tem CSS que tire, só compartilhando sem essa borda. */
.community-screenshare-featured{position:relative;background:#000;border:1px solid #20252d;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:80px;width:100%;}
.community-screenshare-featured video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;transition:transform .12s ease-out;}
.community-screenshare-tile-label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
/* Controle de zoom (pedido do usuário 2026-08-22) -- só sobre o vídeo em
   destaque (transform:scale via JS), nunca mexe no zoom real da página. */
.community-screenshare-zoomctl{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.65);border-radius:999px;padding:4px 6px;}
.community-screenshare-zoom-btn{background:transparent;border:none;color:#fff;font-size:13px;font-weight:800;width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;}
.community-screenshare-zoom-btn:hover{background:rgba(255,255,255,.18);}
.community-screenshare-zoom-btn.community-screenshare-zoom-fit{width:auto;border-radius:999px;padding:0 9px;font-size:10.5px;font-weight:700;}
.community-screenshare-zoom-label{color:#fff;font-size:10.5px;font-weight:700;min-width:34px;text-align:center;}
/* Ampliar (pedido do PDF "Compartilhamento de Tela" 2026-08-22): fullscreen
   nativo do navegador no vídeo em destaque -- Esc fecha de graça. */
.community-screenshare-expand-btn{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;}
.community-screenshare-expand-btn:hover{background:rgba(0,0,0,.85);}
/* "Modo assistir" mobile (leva WPG Comunidade Mobile 2026-09-03): tela
   cheia de verdade + PiP + maximizar, agrupados no canto inferior direito
   da transmissão em destaque (não colidem com o rótulo em baixo-esquerda
   nem o zoom em cima-esquerda). */
.community-screenshare-watchctl{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;z-index:2;}
.community-screenshare-watchbtn{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;}
.community-screenshare-watchbtn:hover{background:rgba(0,0,0,.85);}
/* Dica "gire o celular" (leva WPG Comunidade Mobile 2026-09-03): só no
   celular em retrato, quando NÃO está em tela cheia -- em tela cheia o
   Android já travou em paisagem e o iPhone usa o player nativo. */
.community-screenshare-rotate-hint{display:none;}
@media(max-width:860px) and (orientation:portrait){
  .community-screenshare-featured .community-screenshare-rotate-hint{display:flex;align-items:center;gap:5px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;z-index:3;pointer-events:none;white-space:nowrap;}
}
.community-screenshare-featured:fullscreen .community-screenshare-rotate-hint,.community-screenshare-featured:-webkit-full-screen .community-screenshare-rotate-hint{display:none!important;}
.community-screenshare-featured:fullscreen{width:100vw;height:100vh;border:none;border-radius:0;}
.community-screenshare-featured:-webkit-full-screen{width:100vw;height:100vh;border:none;border-radius:0;}
.community-screenshare-featured:fullscreen video,.community-screenshare-featured:-webkit-full-screen video{object-fit:contain;}
.community-screenshare-thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:2px;flex:0 0 auto;}
.community-screenshare-thumb{flex-shrink:0;width:150px;position:relative;background:var(--s-900);border:1px solid #20252d;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;}
.community-screenshare-thumb video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000;pointer-events:none;}
.community-screenshare-thumb span{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;}
.community-screenshare-thumb:hover{border-color:var(--or-line,rgba(255,122,24,.4));}
/* Encolher participantes (pedido do usuário 2026-08-22): botão discreto
   pra quem quiser mais espaço vertical pro vídeo -- o vídeo (flex:1 lá em
   cima) toma o espaço sozinho via CSS quando a lista some, sem precisar
   recalcular a altura do card (isso já é feito por communityUpdateVoiceModeHeight
   com base na posição do card, não no conteúdo interno). */
.community-voice-presence-toggle{align-self:flex-end;flex:0 0 auto;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;cursor:pointer;margin-top:10px;transition:.15s;}
.community-voice-presence-toggle:hover{border-color:var(--or);color:var(--or);}
.community-voice-panel.presence-collapsed .community-voice-presence{display:none;}
.community-voice-presence{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;flex:0 1 auto;max-height:140px;overflow-y:auto;}
.community-voice-status-bar{display:flex;align-items:center;gap:7px;margin-top:22px;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;font-weight:700;color:#3ddc73;flex:0 0 auto;}
.community-voice-status-dot{width:8px;height:8px;border-radius:50%;background:#3ddc73;flex-shrink:0;box-shadow:0 0 0 3px rgba(61,220,115,.18);}
/* Reconectando/Desconectado (pedido do PDF "Sugestões de Melhoria"
   2026-08-22, prioridade Voz) -- mesma barra, só cor+animação mudam. */
.community-voice-status-bar.reconnecting{color:var(--or);}
.community-voice-status-bar.reconnecting .community-voice-status-dot{background:var(--or);box-shadow:0 0 0 3px rgba(255,122,24,.18);animation:wpgVoiceStatusPulse 1s ease-in-out infinite;}
.community-voice-status-bar.disconnected{color:#ff6b6b;}
.community-voice-status-bar.disconnected .community-voice-status-dot{background:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.18);animation:none;}
@keyframes wpgVoiceStatusPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.community-voice-user{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);width:64px;position:relative;}
.community-voice-user-avatar{width:44px;height:44px;border-radius:50%;background:var(--or);color:#111;font:800 16px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;transition:box-shadow .1s;object-fit:cover;}
.community-voice-user.speaking .community-voice-user-avatar{box-shadow:0 0 0 3px #3ddc73;}
.community-voice-mute-badge{display:none;position:absolute;top:28px;left:36px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;align-items:center;justify-content:center;border:2px solid var(--card2);}
.community-voice-user.is-muted .community-voice-mute-badge{display:flex;}
.community-voice-vol-btn{background:transparent;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:1px;opacity:.7;}
.community-voice-vol-btn:hover{opacity:1;}
.community-dm-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35);}
.community-dm-results[hidden]{display:none;}
.community-dm-result-item{display:block;width:100%;text-align:left;padding:8px 12px;background:transparent;border:none;color:var(--text);font:600 12.5px 'Inter',sans-serif;cursor:pointer;}
.community-dm-result-item:hover{background:var(--border);}
.community-dm-result-empty{padding:8px 12px;font-size:12px;color:var(--muted);}
.community-invite-group-wrap{position:relative;}
.community-invite-group-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:210px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.4);}
.community-invite-group-popover[hidden]{display:none;}
.community-invite-group-popover input{width:100%;box-sizing:border-box;font-size:12px;padding:7px 9px;}
.community-invite-group-popover .community-dm-results{position:static;margin-top:6px;box-shadow:none;}
.community-group-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.community-group-chips:empty{margin-bottom:0;}
.community-group-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:4px 6px 4px 10px;font-size:12px;color:var(--text);}
.community-group-chip button{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:2px;line-height:1;}
.community-group-chip button:hover{color:var(--red);}
/* position:fixed + top/left calculados em JS (communityPositionVolumePopover
   em voice.js), não relativo a nenhum container -- appendado direto em
   document.body pra escapar do overflow-y:auto de .community-voice-presence
   (que cortava o popover antes, em qualquer tamanho de janela). z-index
   acima do widget de voz (150) e do toast (220), abaixo do lightbox de
   imagem (260) -- é um popover de controle, não precisa disputar com modal. */
.community-voice-vol-popover{position:fixed;width:150px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);padding:10px;z-index:240;text-align:left;}
.community-voice-settings-popover{position:absolute;top:100%;right:0;margin-top:8px;width:240px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);padding:12px;z-index:30;text-align:left;}
.community-voice-settings-popover[hidden]{display:none;}
.community-voice-settings-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.community-voice-settings-row label{font-size:11px;color:var(--muted);}
.community-voice-settings-row select{background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:7px 8px;color:var(--text);font-size:12px;}
.community-voice-mic-meter{height:6px;border-radius:999px;background:var(--card2);overflow:hidden;margin-bottom:10px;}
.community-voice-mic-meter-fill{height:100%;width:0%;background:var(--or);transition:width .05s linear;}
.community-voice-vol-mute{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);margin-bottom:8px;cursor:pointer;}
.community-voice-vol-popover input[type=range]{width:100%;accent-color:var(--or);}
.community-voice-vol-value{display:block;text-align:right;font-size:10.5px;color:var(--muted);margin-top:2px;}
/* Menu de contexto (botão direito) no nome/avatar de quem tá na call --
   position:fixed + coordenadas do clique (community.js
   communityWireVoiceUserContextMenu), não relativo a nenhum ancestral. */
.community-voice-user-menu-dropdown{position:fixed;min-width:150px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.4);z-index:60;display:flex;flex-direction:column;padding:4px;}
.community-voice-user-menu-dropdown button{background:transparent;border:none;color:var(--text);font-size:12px;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.community-voice-user-menu-dropdown button:hover{background:var(--border);}
.wpg-voice-widget-participant{cursor:pointer;}
.notif-bell-wrap{position:relative;display:flex;}
.notif-bell-wrap[hidden]{display:none;}
.notif-bell-btn{position:relative;background:var(--surface-strong);border:1px solid var(--border);border-radius:999px;color:var(--text);font-size:15px;cursor:pointer;padding:7px 9px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;}
.notif-bell-btn:hover{border-color:rgba(255,122,24,.4);background:#171d24;}
.notif-bell-count{position:absolute;top:-2px;right:-2px;background:var(--or);color:#111;font:800 10px 'Inter',sans-serif;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.notif-bell-count[hidden]{display:none;}
/* position:fixed (não absolute) -- achado ao vivo 2026-08-22: a sidebar
   (.app-sidebar) tem overflow-y:auto, e por regra do CSS (overflow-x/y só
   podem ser "visible" nos dois OU nenhum, senão o navegador força o outro
   eixo pra "auto" também) isso corta qualquer dropdown absolute que tente
   vazar pra fora dela -- aparecia cortado/misturado com o menu de baixo.
   Mesmo padrão já usado em .community-voice-user-menu-dropdown pra escapar
   desse mesmo tipo de corte. Posição (top/right) calculada via JS no clique
   (getBoundingClientRect do botão), não mais fixa por CSS. */
.notif-bell-dropdown{position:fixed;width:280px;max-height:360px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.4);z-index:120;padding:6px;}
.notif-bell-dropdown[hidden]{display:none;}
.notif-bell-empty{color:var(--muted);font-size:12.5px;padding:14px 10px;text-align:center;}
.notif-bell-item{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:8px;padding:9px 10px;cursor:pointer;}
.notif-bell-item:hover{background:var(--card2,var(--border));}
.notif-bell-item-title{font:700 12px 'Inter',sans-serif;color:var(--text);}
.notif-bell-item-text{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.inbox-item-text{font-size:11.5px;color:var(--muted);white-space:pre-wrap;margin-top:2px;}
.community-channel-tab:hover{color:var(--text);background:var(--card);}
/* Canal ativo (pedido do PDF "Sugestões de Melhoria" 2026-08-22, item UX:
   "reforçar o canal atualmente ativo" + "estados consistentes") --
   mesma barrinha lateral de destaque que o menu principal já usa pra
   marcar a página atual (.app-sidebar-nav .tab.active), em vez de
   inventar um padrão novo só pra aqui. */
.community-channel-tab.active{background:var(--or-wash,rgba(255,122,24,.14));border-color:var(--or-line,rgba(255,122,24,.4));color:var(--or);box-shadow:inset 3px 0 0 var(--or);}
/* Linha canal/grupo + botão de renomear -- dois <button> irmãos (nunca um
   dentro do outro, quebraria o HTML), só o botão de renomear aparece pra
   quem administra a comunidade (canal) ou criou o grupo. */
.community-channel-row{display:flex;align-items:center;gap:2px;}
.community-channel-row .community-channel-tab{flex:1;min-width:0;}
.community-channel-rename-btn{flex-shrink:0;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:6px 6px;border-radius:6px;opacity:.6;transition:.15s;}
.community-channel-rename-btn:hover{opacity:1;background:var(--card);color:var(--text);}
/* Engrenagem que substitui lápis+máscara sempre visíveis (pedido do usuário
   2026-08-22: "esconder atrás de uma engrenagem, igual um menu") -- mesmo
   padrão visual do menu de mensagem (.community-msg-menu*), classes
   próprias só pra não colidir com aquele CSS. */
.community-channel-menu{position:relative;flex-shrink:0;}
.community-channel-menu-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:6px 6px;border-radius:6px;opacity:.6;transition:.15s;}
.community-channel-menu-btn:hover{opacity:1;background:var(--card);color:var(--text);}
.community-channel-menu-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:190px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:20;display:flex;flex-direction:column;padding:4px;}
.community-channel-menu-dropdown[hidden]{display:none;}
.community-channel-menu-dropdown button{background:transparent;border:none;color:var(--text);font-size:11.5px;text-align:left;padding:7px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.community-channel-menu-dropdown button:hover{background:var(--border);}
.community-channel-menu-dropdown button.community-channel-menu-danger{color:#ff6b6b;}
.community-channel-menu-dropdown button.community-channel-menu-danger:hover{background:rgba(255,107,107,.12);}
/* Quem tá na call, visível sem precisar entrar no canal (pedido do usuário
   2026-08-20) -- pilha de avatares embaixo do nome do canal de voz, mesmo
   padrão visual do widget flutuante (wpg-voice-widget-participants). */
.community-voice-tab-presence{display:flex;align-items:center;min-height:16px;margin-top:3px;}
/* Sem ninguém na call, a linha de presença fica vazia -- some em vez de
   reservar ~19px de altura por canal de voz (feedback: "espaçamento
   estranho dos canais de voz" 2026-08-29). Volta a aparecer quando entra
   alguém (aí tem avatar dentro, não é mais :empty). */
.community-voice-tab-presence:empty{display:none;}
.community-voice-tab-avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;background:var(--or);color:#1a1206;font:800 8px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bg-alt);margin-left:-4px;}
.community-voice-tab-avatar:first-child{margin-left:0;}
.community-voice-tab-extra{font:700 9px 'Inter',sans-serif;color:var(--muted);margin-left:5px;}
.community-system-msg{align-self:center;font-size:11px;color:var(--muted);font-style:italic;padding:2px 0;}
.atend-composer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);}
.atend-composer[hidden]{display:none;}
.atend-composer textarea{flex:1;resize:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:12.5px;font-family:inherit;min-height:40px;max-height:100px;}
.atend-composer button{background:var(--or);color:#111;border:none;border-radius:8px;padding:0 16px;font-size:12.5px;font-weight:700;cursor:pointer;}
.atend-composer button:disabled{opacity:.5;cursor:default;}
.atend-empty{color:var(--muted);font-size:12.5px;padding:16px;text-align:center;}
.perm-msg.error{color:#f0a89f;}
.perm-msg.ok{color:var(--green);}
.perm-empty{color:var(--muted);font-size:12px;padding:6px 2px;}

.donate-nav-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;border:1px solid rgba(247,201,72,.35);background:rgba(247,201,72,.08);color:#f7c948;font:700 12px 'Inter',sans-serif;cursor:pointer;transition:.15s;}
.donate-nav-btn:hover{background:rgba(247,201,72,.16);border-color:rgba(247,201,72,.55);}
@media(max-width:700px){.donate-nav-btn{display:none;}}
.donate-amounts{display:flex;gap:8px;flex-wrap:wrap;}
.donate-amount-btn{flex:1;min-width:70px;padding:12px 8px;border-radius:9px;border:1px solid var(--border);background:var(--card2);color:var(--text);font:700 14px 'Inter',sans-serif;cursor:pointer;transition:.15s;}
.donate-amount-btn:hover{border-color:#f7c948;color:#f7c948;}
.donate-amount-btn.active{border-color:#f7c948;background:rgba(247,201,72,.12);color:#f7c948;}
#donateCustomAmount{width:100%;margin-top:6px;background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:9px 11px;color:var(--text);font-size:13px;}
#donateGoBtn{background:#f7c948;color:#101216;border:none;}
#donateGoBtn:hover{filter:brightness(1.08);}

.vip-plans-list{display:flex;flex-direction:column;gap:8px;}
.vip-plan-btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card2);cursor:pointer;transition:.15s;text-align:left;}
.vip-plan-btn:hover{border-color:var(--or);}
.vip-plan-btn.featured{border-color:rgba(255,122,24,.5);background:rgba(255,122,24,.06);}
.vip-plan-name{font-size:13.5px;font-weight:700;color:var(--text);}
.vip-plan-price{font-size:13px;font-weight:700;color:var(--or);display:flex;align-items:baseline;gap:4px;}
.vip-plan-price small{font-size:10.5px;font-weight:600;color:var(--muted);}
/* Varredura #1 (cor única): selo de desconto era verde -> agora neutro com
   texto laranja; o "melhor custo-benefício" (.best) segue laranja sólido
   pra manter a hierarquia sem cor de fora. */
.vip-plan-badge{position:absolute;top:-8px;right:12px;background:var(--s-700);border:1px solid var(--or-line);color:var(--or);font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;}
.vip-plan-badge.best{background:var(--or);border-color:var(--or);color:#0a0d16;}
/* ===== Fix de interação dos cards do Planner Upgrade ===== */
#page-upgrade .sys-card{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:1}
#page-upgrade .sys-card .tag,#page-upgrade .sys-card .name,#page-upgrade .sys-card .desc,#page-upgrade .sys-card .note-text{pointer-events:none}
#page-upgrade .sys-card .note-btn{pointer-events:auto;z-index:2}

/* ===== Aviso: site em desenvolvimento (dismissível — lembra no navegador) ===== */
.dev-banner{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,122,24,.08);border-bottom:1px solid rgba(255,122,24,.22);
  color:#e0b48f;font-size:12px;font-weight:500;padding:8px 44px;text-align:center;
}
.dev-banner.is-dismissed{display:none;}
.dev-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--or);flex-shrink:0;}
.dev-banner-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#e0b48f;font-size:17px;line-height:1;
  cursor:pointer;padding:2px 6px;border-radius:5px;opacity:.65;transition:opacity .12s,background .12s;
}
.dev-banner-close:hover{opacity:1;background:rgba(255,255,255,.06);}
@media(max-width:600px){.dev-banner{font-size:11px;padding:8px 40px;}}

/* ===== Seletor de idioma ===== */
.lang-switch{
  background:var(--card2,#151a23);border:1px solid var(--border,#262d40);color:var(--text,#eef1f7);
  font:600 12px 'Inter',sans-serif;padding:7px 8px;border-radius:8px;cursor:pointer;
}
.lang-switch:focus{outline:2px solid rgba(255,122,24,.35);outline-offset:1px;}
@media(max-width:520px){.lang-switch{padding:6px;font-size:11px;}}

.discord-login-btn{
  padding:7px 8px;
}

/* =========================================================
   WPG MOBILE — APP HEADER
   ========================================================= */

.mobile-menu-btn{
  display:none;
}

@media (max-width:700px){

  .navrow{
    width:100%;
    box-sizing:border-box;
    padding:10px 16px;
    min-height:62px;
    gap:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .brand{
    flex:0 0 auto;
  }

  .brand-logo{
    height:34px!important;
    width:auto;
    max-width:105px!important;
    object-fit:contain;
  }

  .tabs{
    display:none!important;
  }

  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;
    padding:0;
    margin-left:auto;

    border:1px solid var(--border);
    border-radius:10px;

    background:var(--card2);
    color:var(--text);

    font-size:22px;
    line-height:1;

    cursor:pointer;
  }

  .mobile-menu-btn:active{
    transform:scale(.96);
  }

}

@media (max-width:520px){

  .navrow{
    padding:9px 14px;
  }

  .brand-logo{
    height:31px!important;
    max-width:95px!important;
  }

  .mobile-menu-btn{
    width:40px;
    height:40px;
    font-size:21px;
  }

}

/* =========================================================
   WPG MOBILE — DROPDOWN MENU
   ========================================================= */

.mobile-menu{
  display:none;
}

@media (max-width:700px){

  .mobile-menu{
    position:absolute;
    top:62px;
    right:14px;
    width:230px;
    box-sizing:border-box;
    padding:8px;

    background:var(--card2);
    border:1px solid var(--border);
    border-radius:12px;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

    z-index:1000;

    /* Achado ao vivo 2026-08-22: sem isso, em tela baixa (celular deitado,
       por exemplo) o menu (mais alto que a viewport) simplesmente cortava
       embaixo sem scroll -- idioma e botão do Discord ficavam inacessíveis. */
    max-height:calc(100vh - 76px);
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
  }

  .mobile-menu.open{
    display:block;
  }

  .mobile-menu-item{
    display:block;
    width:100%;
    padding:12px 14px;
    margin:0;

    border:0;
    border-radius:8px;

    background:transparent;
    color:var(--text);

    text-align:left;
    font-family:inherit;
    font-size:14px;
    font-weight:600;

    cursor:pointer;
  }

  .mobile-menu-item:hover,
  .mobile-menu-item.active{
    background:var(--card);
    color:var(--or);
  }

  .mobile-menu-divider{
    height:1px;
    margin:8px 4px;
    background:var(--border);
  }

  .mobile-menu-label{
    padding:7px 10px 5px;

    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-lang-switch{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;

    border:1px solid var(--border);
    border-radius:8px;

    background:var(--card);
    color:var(--text);

    font-family:inherit;
    font-size:13px;
    font-weight:600;
  }

  .mobile-discord-btn{
    display:block;
    width:100%;
    padding:11px 12px;

    border:1px solid rgba(88,101,242,.45);
    border-radius:8px;

    background:rgba(88,101,242,.08);
    color:var(--text);

    font-family:inherit;
    font-size:13px;
    font-weight:700;

    cursor:pointer;
  }

  .mobile-discord-btn:active{
    transform:scale(.98);
  }

}


/* ---- extraído de: <style> ---- */
  .wpg-footer-full{
    margin-top:64px;
    position:relative;
    border-top:1px solid var(--border);
    background:
      radial-gradient(800px 300px at 10% 0%, rgba(111,111,240,.06), transparent),
      var(--bg-alt);
  }
  .wpg-footer-full:before{
    content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
    background:linear-gradient(90deg,var(--or),transparent 55%);
  }
  .wpg-footer-full .wrap{
    padding:48px 24px 28px;
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:36px;
  }
  .wpg-footer-full .ff-brand{display:flex;flex-direction:column;gap:12px;}
  .wpg-footer-full .ff-brand-row{display:flex;align-items:center;gap:10px;}
  .wpg-footer-full .ff-brand img{height:30px;width:auto;display:block;}
  .wpg-footer-full .ff-brand-name{font-weight:800;letter-spacing:.04em;color:var(--text);font-size:15px;}
  .wpg-footer-full .ff-brand-desc{color:var(--muted);font-size:13px;line-height:1.6;max-width:280px;}
  .wpg-footer-full .ff-discord,.wpg-footer-full .ff-whatsapp,.wpg-footer-full .ff-youtube{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:4px;padding:9px 14px;width:fit-content;
    border:1px solid var(--border);border-radius:8px;
    color:var(--text);text-decoration:none;font-size:13px;font-weight:600;
    background:var(--card);transition:border-color .15s,background .15s,transform .15s;
  }
  .wpg-footer-full .ff-discord:hover,.wpg-footer-full .ff-whatsapp:hover,.wpg-footer-full .ff-youtube:hover{
    transform:translateY(-1px);
  }
  .wpg-footer-full .ff-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
  .wpg-footer-full .ff-discord{border-color:#5865F2;}
  .wpg-footer-full .ff-discord:hover{border-color:#7983f5;background:rgba(88,101,242,.10);}
  .wpg-footer-full .ff-whatsapp{border-color:#25D366;}
  .wpg-footer-full .ff-whatsapp:hover{border-color:#3ee27c;background:rgba(37,211,102,.10);}
  .wpg-footer-full .ff-youtube{border-color:#FF0000;}
  .wpg-footer-full .ff-youtube:hover{border-color:#ff4d4d;background:rgba(255,0,0,.10);}
  .wpg-footer-full h4{
    margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
  }
  .wpg-footer-full ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .wpg-footer-full li a{
    color:#c4cbd5;text-decoration:none;font-size:13.5px;transition:color .15s,padding-left .15s;
  }
  .wpg-footer-full li a:hover{color:var(--or);padding-left:3px;}
  .wpg-footer-full .ff-bottom{
    border-top:1px solid var(--border);
    padding:18px 24px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
    color:var(--muted);font-size:12px;
  }
  .wpg-footer-full .ff-bottom strong{color:var(--or);}
  @media(max-width:820px){
    .wpg-footer-full .wrap{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:520px){
    .wpg-footer-full .wrap{grid-template-columns:1fr;}
  }


/* ---- extraído de: <style id="wpg-dashboard-css"> ---- */
/* ================= WPG DASHBOARD — OWNER Command Center =================
   Visual próprio pro Dashboard: sidebar fixa + paleta índigo/dourado,
   separada da identidade laranja do resto do site. Só entra em vigor
   dentro de #page-dashboard — nada aqui vaza pras outras páginas. */

body.dash-mode .dev-banner,
body.dash-mode .routebar{display:none!important;}
body.dash-mode .wpg-footer-full{display:none!important;}

#page-dashboard{
  --dsh-plane:#07070b;
  --dsh-bg:#0b0b13;
  --dsh-card:#131320;
  --dsh-card2:#181826;
  --dsh-border:rgba(144,133,233,.14);
  --dsh-border-strong:rgba(144,133,233,.34);
  --dsh-text:#f5f4fc;
  --dsh-muted:#948fb0;
  --dsh-accent:#9085e9;
  --dsh-accent-strong:#b0a7f4;
  --dsh-accent-soft:rgba(144,133,233,.14);
  --dsh-gold:#e3a63e;
  --dsh-gold-soft:rgba(227,166,62,.14);
  max-width:none;
  width:100%;
  padding:0;
  margin:0;
}
#page-dashboard.active{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  align-items:start;
  background:
    radial-gradient(1000px 460px at 12% -8%, rgba(144,133,233,.11), transparent 60%),
    var(--dsh-plane);
  color:var(--dsh-text);
}

/* ---- sidebar ---- */
#page-dashboard .dash-sidebar{
  position:sticky;top:0;
  height:100vh;height:100dvh;overflow-y:auto;
  padding:22px 16px 18px;
  border-right:1px solid var(--dsh-border);
  background:var(--dsh-bg);
  display:flex;flex-direction:column;gap:20px;
}
#page-dashboard .dash-sidebar-brand{display:flex;align-items:center;gap:9px;padding:0 8px;}
#page-dashboard .dash-sidebar-brand img{height:22px;width:auto;border-radius:5px;display:block;}
#page-dashboard .dash-sidebar-brand span{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--dsh-text);text-transform:uppercase;}
#page-dashboard .dash-sidebar-brand b{color:var(--dsh-accent-strong);}

#page-dashboard .dash-sidebar-user{
  display:flex;align-items:center;gap:11px;
  padding:11px;border-radius:12px;
  background:var(--dsh-card);border:1px solid var(--dsh-border);
}
#page-dashboard .dash-sidebar-avatar{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--dsh-accent),#4c3fc9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(144,133,233,.28);
}
#page-dashboard .dash-sidebar-userinfo{min-width:0;}
#page-dashboard #dashWelcome{
  all:unset;display:block;
  font-size:12.5px;font-weight:700;color:var(--dsh-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}
#page-dashboard .dash-role-badge{
  display:inline-block;margin-top:5px;padding:3px 10px;border-radius:999px;
  background:var(--dsh-accent-soft);border:1px solid var(--dsh-border-strong);
  color:var(--dsh-accent-strong);font-size:9.5px;font-weight:800;letter-spacing:.06em;
}
#page-dashboard .dash-role-badge.is-owner{
  background:var(--dsh-gold-soft);border-color:rgba(227,166,62,.35);color:var(--dsh-gold);
}

#page-dashboard .dash-sidebar-nav{display:flex;flex-direction:column;gap:3px;}
#page-dashboard .dash-nav-btn{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  background:transparent;border:1px solid transparent;
  color:var(--dsh-muted);font-size:13px;font-weight:600;
  font-family:'Inter',sans-serif;cursor:pointer;text-align:left;width:100%;
  transition:background .15s,color .15s,border-color .15s;
}
#page-dashboard .dash-nav-icon{width:17px;height:17px;flex-shrink:0;}
#page-dashboard .dash-nav-btn:hover{background:var(--dsh-card);color:var(--dsh-text);}
#page-dashboard .dash-nav-btn.active{background:var(--dsh-accent-soft);border-color:var(--dsh-border-strong);color:#fff;}
#page-dashboard .dash-nav-btn.active .dash-nav-icon{color:var(--dsh-accent-strong);}
#page-dashboard .dash-nav-btn[hidden]{display:none;}

#page-dashboard .dash-sidebar-back{
  margin-top:auto;
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:10px;
  background:transparent;border:1px solid var(--dsh-border);
  color:var(--dsh-muted);font-size:12.5px;font-weight:600;
  font-family:'Inter',sans-serif;cursor:pointer;
}
#page-dashboard .dash-sidebar-back svg{width:15px;height:15px;flex-shrink:0;}
#page-dashboard .dash-sidebar-back:hover{color:var(--dsh-text);border-color:var(--dsh-border-strong);}

/* ---- main content ---- */
/* min-width:0 -- .dash-main é item de grid (#page-dashboard). Sem isso o
   min-width:auto deixa uma tabela larga (.pag-table, Histórico de Vendas
   tem 8 colunas) esticar a coluna 1fr no mobile e a página inteira ganha
   scroll horizontal, apesar do .pag-table-wrap ter overflow-x:auto. */
#page-dashboard .dash-main{padding:34px 40px 64px;max-width:1180px;width:100%;min-width:0;}
#page-dashboard #dashRestricted{margin-top:4px;}
#page-dashboard .access-closed-badge{background:var(--dsh-gold-soft);border-color:rgba(227,166,62,.35);color:var(--dsh-gold);}
#page-dashboard .access-closed-card{border-color:var(--dsh-border);background:var(--dsh-card);}

#page-dashboard .dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px;}
/* No celular estreito, 2 por linha em vez de 1 (o Histórico de Vendas tem
   5 cartões -- 1 coluna deixava a tela gigante). */
@media(max-width:520px){#page-dashboard .dash-cards{grid-template-columns:1fr 1fr;gap:10px;}#page-dashboard .dash-card{padding:14px 12px;}#page-dashboard .dash-card-num{font-size:24px;}}
#page-dashboard .dash-card{
  padding:20px;border-radius:14px;
  border:1px solid var(--dsh-border);background:var(--dsh-card);
  text-align:left;position:relative;overflow:hidden;
}
#page-dashboard .dash-card:before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--dsh-accent),transparent);
}
#page-dashboard .dash-card-num{font-size:30px;font-weight:700;color:var(--dsh-text);font-family:'Inter',sans-serif;line-height:1.1;}
#page-dashboard .dash-card-label{font-size:12px;color:var(--dsh-muted);margin-top:6px;}

/* ---- aba Pagamentos (atividade do Mercado Pago) ---- */
#page-dashboard .pag-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
#page-dashboard .pag-filters select{
  background:var(--dsh-card2);border:1px solid var(--dsh-border);color:var(--dsh-text);
  border-radius:9px;padding:9px 12px;font-size:12.5px;font-family:'Inter',sans-serif;
}
#page-dashboard .pag-filter-btn{width:auto;padding:9px 18px;font-size:12.5px;box-shadow:none;}
#page-dashboard .pag-summary{margin-bottom:20px;}
#page-dashboard .pag-summary .dash-card:nth-child(1) .dash-card-num{color:#5fd98a;}
#page-dashboard .pag-summary .dash-card:nth-child(2) .dash-card-num{color:#f0837f;}
#page-dashboard .pag-summary .dash-card:nth-child(3) .dash-card-num{color:var(--dsh-gold);}
#page-dashboard .pag-table-wrap{overflow-x:auto;border:1px solid var(--dsh-border);border-radius:14px;background:var(--dsh-card);}
#page-dashboard .pag-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;}
#page-dashboard .pag-table th{
  text-align:left;padding:12px 14px;color:var(--dsh-muted);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--dsh-border);
}
#page-dashboard .pag-table td{padding:11px 14px;border-bottom:1px solid var(--dsh-border);color:var(--dsh-text);}
#page-dashboard .pag-table tr:last-child td{border-bottom:none;}
#page-dashboard .pag-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;}
#page-dashboard .pag-status.approved{background:rgba(12,163,12,.14);color:#5fd98a;border:1px solid rgba(12,163,12,.32);}
#page-dashboard .pag-status.rejected{background:rgba(208,59,59,.14);color:#f0837f;border:1px solid rgba(208,59,59,.32);}
#page-dashboard .pag-status.pending{background:var(--dsh-gold-soft);color:var(--dsh-gold);border:1px solid rgba(227,166,62,.32);}
#page-dashboard .pag-status.other{background:var(--dsh-card2);color:var(--dsh-muted);border:1px solid var(--dsh-border);}
#page-dashboard .pag-reason{color:var(--dsh-muted);font-size:11.5px;}
@media(max-width:700px){
  #page-dashboard .pag-table{font-size:11.5px;}
  #page-dashboard .pag-table th,#page-dashboard .pag-table td{padding:9px 10px;}
}

/* ---- página Convide e Ganhe (fora do Dashboard — usa os tokens normais do site) ---- */
#page-indicacoes .pag-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--card);}
#page-indicacoes .pag-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;}
#page-indicacoes .pag-table th{
  text-align:left;padding:12px 14px;color:var(--muted);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--border);
}
#page-indicacoes .pag-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text);}
#page-indicacoes .pag-table tr:last-child td{border-bottom:none;}
#page-indicacoes .pag-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;}
#page-indicacoes .pag-status.ok{background:rgba(12,163,12,.14);color:#5fd98a;border:1px solid rgba(12,163,12,.32);}
#page-indicacoes .pag-status.warn{background:rgba(255,122,0,.14);color:var(--orange2, var(--or-300));border:1px solid rgba(255,122,0,.32);}
#page-indicacoes .pag-status.pending{background:rgba(154,164,178,.14);color:var(--muted);border:1px solid var(--border);}
@media(max-width:700px){
  #page-indicacoes .pag-table{font-size:11.5px;}
  #page-indicacoes .pag-table th,#page-indicacoes .pag-table td{padding:9px 10px;}
}
#page-dashboard .fx-note{color:var(--dsh-muted);}

#page-dashboard .wpg-modal-sub{color:var(--dsh-muted);}
#page-dashboard .perm-list{background:transparent;}
#page-dashboard .perm-item,#page-dashboard .perm-empty{border:1px solid var(--dsh-border);background:var(--dsh-card);border-radius:11px;padding:12px 14px;margin-bottom:8px;}
#page-dashboard .staff-tag.owner{background:var(--dsh-gold-soft);color:var(--dsh-gold);border:1px solid rgba(227,166,62,.4);}
#page-dashboard .staff-tag.moderador{background:var(--dsh-accent-soft);color:var(--dsh-accent-strong);border:1px solid var(--dsh-border-strong);}
#page-dashboard .staff-tag.criador{background:rgba(255,95,162,.14);color:#ff5fa2;border:1px solid rgba(255,95,162,.35);}
#page-dashboard .perm-add-row input{background:var(--dsh-card2);border-color:var(--dsh-border);color:var(--dsh-text);}
#page-dashboard .btn{background:var(--dsh-accent);color:#fff;box-shadow:0 9px 26px rgba(144,133,233,.22);}
#page-dashboard .btn:hover{filter:brightness(1.08);}

#page-dashboard .atend-threads,#page-dashboard .atend-chat{background:var(--dsh-card);border-color:var(--dsh-border);}
#page-dashboard .atend-thread-item.active{background:var(--dsh-accent-soft);color:#fff;border-color:var(--dsh-border-strong);}
#page-dashboard .atend-msg{background:var(--dsh-card2);}
#page-dashboard .atend-msg.staff{background:var(--dsh-accent-soft);}
#page-dashboard .atend-composer textarea{background:var(--dsh-card2);border-color:var(--dsh-border);color:var(--dsh-text);}
#page-dashboard .atend-composer button{background:var(--dsh-accent);color:#fff;}

@media(max-width:880px){
  #page-dashboard.active{grid-template-columns:1fr;}
  #page-dashboard .dash-sidebar{
    position:relative;top:auto;height:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--dsh-border);
  }
  #page-dashboard .dash-sidebar-nav{flex-direction:row;flex-wrap:wrap;}
  #page-dashboard .dash-sidebar-back{margin-top:0;margin-left:auto;}
  #page-dashboard .dash-main{padding:22px 18px 48px;}
}

/* =================== Sidebar persistente do site inteiro ==================
   Substitui a barra horizontal do topo por uma sidebar fixa à esquerda,
   igual ao padrão já usado só dentro do Dashboard (ver bloco acima) --
   mas com a paleta padrão do site (--orange/--bg-alt/--border), não a
   --dsh-* índigo, já que essa é a navegação principal do site, não uma
   área de produto à parte. Ver docs/plano (seção "Sidebar persistente +
   Nova Home") pro contexto completo da decisão visual. */
body{display:flex;align-items:flex-start;padding:0;}
.app-sidebar{
  position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;
  width:248px;flex:0 0 248px;
  display:flex;flex-direction:column;gap:16px;
  padding:18px 14px 16px;
  border-right:1px solid var(--border);
  background:var(--bg-alt);
  z-index:10;
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease;
}
.app-sidebar .brand{padding:0 8px;display:flex;}
/* Sino ao lado da logo (pedido do usuário 2026-08-20) -- brand fica à
   esquerda, sino à direita, mesma linha. */
.app-sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.app-sidebar-header .brand{padding:0;}
.app-sidebar-header .notif-bell-wrap{flex-shrink:0;}
.app-sidebar-toggle-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:7px;
  height:30px;padding:0 10px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  gap:8px;width:100%;transition:.15s;font-family:inherit;}
.app-sidebar-toggle-btn:hover{color:var(--text);border-color:rgba(255,122,24,.4);}
.app-sidebar-toggle-btn .ic{flex:0 0 auto;font-size:10px;transition:transform .2s ease;}

/* ==== Sidebar Colapsável (2026-08-24) ====
   Antes: recolher escondia a <aside> inteira (display:none) + um botão
   flutuante fora dela reabria. Vira um rail estreito ícone-só, mesma
   lógica do Discord/VS Code -- a navegação nunca desaparece, só perde o
   rótulo de texto; .app-main (flex:1 1 auto) reflui sozinho pro espaço
   liberado. Aprovado via mockup (Artifact) antes deste bloco. */
body.app-sidebar-collapsed .app-sidebar{width:72px;flex:0 0 72px;padding-left:10px;padding-right:10px;}
body.app-sidebar-collapsed .app-sidebar-header{flex-direction:column;gap:10px;}
body.app-sidebar-collapsed .app-sidebar-header .brand{padding:0;justify-content:center;}
body.app-sidebar-collapsed .app-sidebar-toggle-btn{justify-content:center;padding:0;}
body.app-sidebar-collapsed .app-sidebar-toggle-btn .lbl{display:none;}
body.app-sidebar-collapsed .app-sidebar-toggle-btn .ic{transform:rotate(180deg);}
.app-main{flex:1 1 auto;min-width:0;padding-bottom:40px;}

.app-sidebar-nav{display:flex;flex-direction:column;gap:3px;}
/* Agrupado em blocos lógicos (não mais uma lista única de 11) -- dá ritmo
   visual, mesmo conjunto/ordem de sempre. */
.app-sidebar-nav-group{display:flex;flex-direction:column;gap:3px;}
.app-sidebar-nav-group + .app-sidebar-nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
body.app-sidebar-collapsed .app-sidebar-nav-group + .app-sidebar-nav-group{margin-top:6px;padding-top:6px;}
.app-sidebar-nav .tab{width:100%;text-align:left;justify-content:flex-start;display:flex;align-items:center;gap:10px;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;}
.app-sidebar-nav .tab.active{box-shadow:inset 3px 0 0 var(--or);background:var(--surface-strong);}
.app-sidebar-nav .tab-vip{width:100%;text-align:left;}
.app-sidebar-nav .tab-soon{opacity:.42;cursor:not-allowed;}
.app-sidebar-nav .tab-soon:hover{background:transparent;color:#8f96a3;}
/* Ícones desenhados à mão (2026-09-14, pedido do usuário -- "curti aquele
   tipo de ícone", mesmo estilo line-art do SYS_ICONS/cards de Jogos), no
   lugar do emoji antigo. stroke=currentColor acompanha a cor do texto
   sozinho (cinza em repouso, branco em hover/active) -- não precisa mais
   do filter:grayscale(1) que existia só pra domar a cor fixa do emoji. */
.app-sidebar-nav .tab-ic{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s;}
.app-sidebar-nav .tab-ic svg{width:17px;height:17px;}
.app-sidebar-nav .tab:hover .tab-ic,.app-sidebar-nav .tab.active .tab-ic{opacity:1;}
.app-sidebar-nav .tab-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.app-sidebar-collapsed .app-sidebar-nav .tab{justify-content:center;padding:0;position:relative;height:38px;}
/* "Slot" próprio mesmo em repouso -- sem isso os ícones recolhidos viram
   pontinhos soltos, sem peso (é o efeito "pobre" apontado na revisão). */
body.app-sidebar-collapsed .app-sidebar-nav .tab:not(.tab-soon){background:rgba(255,255,255,.025);}
body.app-sidebar-collapsed .app-sidebar-nav .tab:hover{transform:translateY(-1px);}
body.app-sidebar-collapsed .app-sidebar-nav .tab-ic{width:19px;height:19px;}
body.app-sidebar-collapsed .app-sidebar-nav .tab-ic svg{width:18px;height:18px;}
body.app-sidebar-collapsed .app-sidebar-nav .tab-lbl,
body.app-sidebar-collapsed .app-sidebar-nav .nav-new-badge{display:none;}
/* Tooltip -- só existe (via data-tooltip, populado em main.js a partir do
   texto já traduzido) e só aparece no modo recolhido; no aberto o rótulo
   já está visível, tooltip seria redundante. */
body.app-sidebar-collapsed .app-sidebar-nav .tab::after{
  content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(-4px);background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:7px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:30;
}
body.app-sidebar-collapsed .app-sidebar-nav .tab:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}

.app-sidebar .nav-dropdown{width:100%;}
.app-sidebar .nav-dropdown-trigger{width:100%;justify-content:space-between;}
/* Era position:static -- entrava no fluxo normal da sidebar e empurrava o
   resto da navegação pra baixo ao abrir (Idioma e Jogos, os 2 usam essa
   mesma classe). fixed flutua de verdade e escapa do overflow-y:auto do
   .app-sidebar (um position:absolute normal ficaria cortado tentando
   "vazar" pra fora da coluna de 248px) -- posição calculada em JS
   (wpgPositionSidebarFlyout em main.js) porque fixed não segue o
   elemento-pai sozinho. */
.app-sidebar .nav-dropdown-menu{position:fixed;box-shadow:0 16px 40px rgba(0,0,0,.45);border:1px solid var(--border);width:260px;z-index:60;}
.app-sidebar-utils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 4px;}
/* Idioma/online ainda não têm tratamento ícone-só (fora do escopo desta
   etapa) -- somem no modo recolhido pra não espremer texto de forma
   estranha; voltam assim que a sidebar reabre, idioma continua acessível
   pelo /perfil enquanto isso. */
body.app-sidebar-collapsed .app-sidebar-utils{display:none;}
.app-sidebar-profile{margin-top:auto;}
.app-sidebar-profile .vip-badge{background:linear-gradient(90deg,var(--or),var(--or-600));}
/* Mesmo truque já usado no breakpoint mobile de 760px (.discord-profile-name
   {display:none}) -- reaproveitado aqui pro modo recolhido de desktop. */
body.app-sidebar-collapsed .app-sidebar-profile .discord-profile-text,
body.app-sidebar-collapsed .sidebar-profile-xp{display:none;}
body.app-sidebar-collapsed .app-sidebar-profile .discord-account{margin-left:0;display:flex;justify-content:center;}
body.app-sidebar-collapsed .app-sidebar-profile .discord-profile-btn{width:auto;padding:8px;justify-content:center;}
body.app-sidebar-collapsed .app-sidebar-profile .discord-login-btn{font-size:0;padding:8px;width:auto;}
body.app-sidebar-collapsed .app-sidebar-profile .discord-login-btn::after{content:'🔑';font-size:15px;filter:grayscale(1);}

.app-sidebar-collapse-footer{padding-top:8px;border-top:1px solid var(--border);}

.mobile-topbar{display:none;}
.mobile-topbar .discord-account{margin-left:auto;}

/* Card de perfil (#discordAccount reaproveitado, só maior/vertical --
   ver relocação por breakpoint em main.js). Nível/XP fica com scaffold
   pronto e hidden até a Fase de gamificação existir de verdade. */
.discord-profile-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;}
.app-sidebar-profile .discord-account{width:100%;margin-left:0;}
.app-sidebar-profile .discord-login-btn{width:100%;justify-content:center;padding:10px;}
.app-sidebar-profile .discord-profile-btn{width:100%;padding:9px;border-radius:12px;background:var(--surface-strong);}
.app-sidebar-profile .discord-avatar{width:36px;height:36px;}
.app-sidebar-profile .discord-profile-name{max-width:none;white-space:normal;font-weight:700;color:var(--text);font-size:13px;}
.app-sidebar-profile .discord-profile-status.is-vip{background:linear-gradient(90deg,var(--or),var(--or-600));color:#1a1206;padding:2px 8px;border-radius:999px;font-size:9px;}
.app-sidebar-profile .discord-menu{top:auto;bottom:calc(100% + 9px);left:0;right:0;width:auto;z-index:200;max-height:70vh;overflow-y:auto;}
.sidebar-profile-xp{margin-top:10px;padding:0 2px;}
.sidebar-profile-xp-row{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:5px;}
.sidebar-profile-xp-bar{height:6px;border-radius:999px;background:var(--card2);overflow:hidden;}
.sidebar-profile-xp-fill{height:100%;background:linear-gradient(90deg,var(--or),var(--or-600));border-radius:999px;}

/* Home: barra de estatísticas + "Jogos em destaque" -- só número/card real,
   ver comentário no HTML sobre o que ficou de fora de propósito. */
.home-stats{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0;}
.home-stat-card{flex:0 1 160px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:.18s;}
.home-stat-card:hover{border-color:rgba(255,122,24,.35);transform:translateY(-2px);}
/* "Próxima descoberta" (PDF CTR/Descoberta, Prioridade 2: ação secundária
   por página) -- link discreto sugerindo o próximo passo natural, nunca um
   CTA gigante. Mesmo componente reaproveitado em várias páginas. */
.discovery-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card2,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:10px;padding:11px 16px;margin:18px 0;font-size:12.5px;color:var(--muted);}
.discovery-hint-link{background:transparent;border:none;color:var(--or);font:700 12.5px 'Inter',sans-serif;cursor:pointer;padding:0;margin-left:auto;white-space:nowrap;}
.discovery-hint-link:hover{text-decoration:underline;}
.home-stat-card strong{font-size:22px;font-weight:800;color:var(--or);font-variant-numeric:tabular-nums;line-height:1;}
.home-stat-card span{font-size:11.5px;color:var(--muted);font-weight:600;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
/* Varredura: "Jogos em destaque" na Home tem só 1 card (Naruto Online) —
   flex pra ele não esticar a largura toda como o grid auto-fit faria. */
.games-grid-home{display:flex;flex-wrap:wrap;}
.games-grid-home .game-card{flex:0 1 260px;}
.game-card{position:relative;background:linear-gradient(160deg,var(--s-800,var(--s-850)),var(--s-850));border:1px solid var(--border);border-radius:14px;padding:22px 20px 20px;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s;text-align:left;overflow:hidden;}
.game-card:hover{border-color:#3a4759;transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,122,24,.10);}
.game-card-icon{font-size:34px;margin-bottom:10px;}
.game-card-svg-wrap{width:42px;height:42px;border-radius:10px;background:var(--or-wash);border:1px solid var(--or-line);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .2s,transform .2s;}
.game-card:hover .game-card-svg-wrap{background:var(--or);transform:scale(1.05);}
.game-card-svg-wrap svg{width:20px;height:20px;stroke:var(--or-300);transition:stroke .2s;}
.game-card:hover .game-card-svg-wrap svg{stroke:#0d0a06;}
.game-card-icon-img{width:40px;height:40px;margin:0 auto 10px;border-radius:10px;overflow:hidden;background:#1a1e26;}
.game-card-icon-img img{width:100%;height:100%;object-fit:cover;display:block;}
.game-card h3{margin:0 0 6px;font-size:14.5px;font-weight:700;}
.game-card p{margin:0 0 16px;font-size:12px;color:var(--muted);line-height:1.5;min-height:34px;}
.game-card-go{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);background:var(--s-700,#1a2130);border:1px solid #3a4759;padding:7px 13px 7px 14px;border-radius:8px;transition:background .2s,border-color .2s,color .2s,gap .2s;}
.game-card:hover .game-card-go{color:#0d0a06;background:var(--or);border-color:var(--or);gap:9px;}
.game-card-go svg{width:12px;height:12px;stroke:currentColor;}
.game-card-soon{opacity:.42;cursor:not-allowed;}
.game-card-soon:hover{transform:none;border-color:var(--border);box-shadow:none;}

/* Design System "Game Library" (2026-09-14, Etapa 3 do redesign visual
   aprovado -- ver Artifact "WPG Game Library"): ciano + Rubik só dentro de
   #page-jogos, via sobrescrita de custom property em cascata -- nada fora
   desta página muda. Home/Dashboard/resto do site continuam laranja+Archivo. */
#page-jogos{
  --or:#20D3E0; --or-300:#8CEFF5; --or-600:#17A8B3; --or-800:#0E6B73;
  --or-wash:rgba(32,211,224,.12); --or-line:rgba(32,211,224,.38); --or-glow:rgba(32,211,224,.55);
  --display:'Rubik','Archivo','Inter',system-ui,-apple-system,sans-serif;
}

/* Etapa 5 do redesign visual (2026-09-14): a mesma identidade ciano+Rubik
   chega na Home -- ela é a porta de entrada do site, faz sentido já
   apresentar a nova cara. Mesma técnica de escopo por custom property,
   zero mudança de estrutura/densidade (Home continua a referência de
   espaçamento). Dashboard e o resto do site seguem laranja+Archivo até
   a Etapa 6. */
#page-home{
  --or:#20D3E0; --or-300:#8CEFF5; --or-600:#17A8B3; --or-800:#0E6B73;
  --or-wash:rgba(32,211,224,.12); --or-line:rgba(32,211,224,.38); --or-glow:rgba(32,211,224,.55);
  --display:'Rubik','Archivo','Inter',system-ui,-apple-system,sans-serif;
}

/* Etapa 6: resto do Naruto Online herda ciano+Rubik (pedido do usuário,
   2026-09-14 -- "precisa estar dentro de todos os sistemas e ferramentas,
   eventos, etc"). LoL/TFT/Genshin/Dota2/HSR/CS2 não têm #page própria --
   moram inteiros dentro de #page-jogos (ver bloco acima) e já herdam de
   graça. Só as telas exclusivas do Naruto Online que vivem em #page
   separada precisam do bloco explícito: Guias (já tinha), Upgrade
   (Comparador/Conversor de recurso moram dentro, ver #screen-comparador/
   #screen-conversor), Pacotes, Eventos (todas as calculadoras de evento
   são injetadas aqui via events/loader.js, herdam por cascata), Coach e
   Ferramentas (Conversor Lingotes→Cupons + Planejador de Cupons). Cor de
   família do Hub de Upgrade (chaves/selo/montes/conjuntos) não usa --or,
   continua intacta; só "Recurso Próprio" deixa de se destacar do resto
   (mesmo ciano do fundo agora), efeito colateral aceito. */
#page-guias, #page-upgrade, #page-pacotes, #page-eventos, #page-ferramentas, #page-coach,
#page-roadmap, #page-feed, #page-community{
  --or:#20D3E0; --or-300:#8CEFF5; --or-600:#17A8B3; --or-800:#0E6B73;
  --or-wash:rgba(32,211,224,.12); --or-line:rgba(32,211,224,.38); --or-glow:rgba(32,211,224,.55);
  --display:'Rubik','Archivo','Inter',system-ui,-apple-system,sans-serif;
}
/* Feed/Comunidade (2026-09-14, pedido do usuário: "repaginada"). A
   varredura de 29/08 já unificou a cor delas pra var(--or) só -- a
   camada semântica congelada (--green de ganho/cupom, tags Moderador/
   Criador, botão de marca Discord) usa OUTRAS variáveis, nunca --or,
   então continua intocada por este escopo. */

/* Tela "Qual jogo você quer?" -- biblioteca de jogos: arte real do jogo
   domina o card (60-80% da área), nome+contagem na faixa inferior sobre
   gradiente. Antes era logo pequena + texto puro sobre fundo liso. */
.jogos-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:8px;}
.jogos-pick-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;height:210px;border:1px solid var(--border);transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s;display:flex;align-items:flex-end;isolation:isolate;background:linear-gradient(135deg,var(--s-800,#141a25),var(--s-900,#0c0f16));}
.jogos-pick-card:hover{transform:translateY(-4px);border-color:var(--or-line);box-shadow:0 20px 44px -20px rgba(0,0,0,.6);}
.jogos-pick-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.3,1);z-index:-2;}
.jogos-pick-card:hover .jogos-pick-art{transform:scale(1.06);}
.jogos-pick-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,10,15,0) 30%, rgba(8,10,15,.94) 100%);z-index:-1;}
.jogos-pick-body{position:relative;padding:16px 18px;width:100%;}
.jogos-pick-card h3{font-family:var(--display);font-size:17.5px;font-weight:700;margin:0 0 3px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.jogos-pick-card p{font-size:11.5px;color:rgba(255,255,255,.72);margin:0;}
.jogos-pick-card.soon{cursor:default;opacity:.55;}
.jogos-pick-card.soon:hover{transform:none;border-color:var(--border);box-shadow:none;}
.jogos-pick-card.soon .jogos-pick-art{filter:grayscale(.5);}
.jogos-pick-soon-tag{position:absolute;top:14px;right:14px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(0,0,0,.4);border:1px solid #3a4759;padding:3px 8px;border-radius:99px;z-index:1;}
.jogos-back-btn{margin-bottom:20px;}
/* Jogos > Naruto Online: grupos rotulados (Ferramentas / Guias). Substitui
   a grade única de 5 cards por seções com título -- mesmo .game-card. */
.jogos-group{margin-bottom:28px;}
.jogos-group:last-of-type{margin-bottom:0;}
.jogos-group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.jogos-group-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;}
.jogos-group-head p{margin:0;font-size:12px;color:var(--muted);flex:1 1 auto;}
@media(max-width:560px){.jogos-group-head p{flex-basis:100%;}}
/* Galeria de Youtubers (aba dentro de Jogos) -- mesmo espírito visual do
   .game-card, mas cada card já é o próprio link (<a>), abre o canal numa
   aba nova. */
.youtubers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:20px;}
/* Horizontal (avatar do lado) -- pedido do usuário, o vertical tomava
   espaço demais. */
.youtuber-card{display:flex;align-items:center;gap:14px;background:var(--s-850);border:1px solid var(--border);border-radius:14px;padding:16px 18px;text-align:left;text-decoration:none;transition:.18s;}
.youtuber-card:hover{border-color:rgba(224,9,9,.4);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3);}
.youtuber-card-avatar{width:52px;height:52px;flex-shrink:0;border-radius:50%;object-fit:cover;background:#1a1f28;border:2px solid rgba(224,9,9,.35);}
.youtuber-card-avatar-fallback{display:flex;align-items:center;justify-content:center;background:rgba(224,9,9,.9);color:#fff;font-size:17px;padding-left:2px;border-color:transparent;}
.youtuber-card-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.youtuber-card-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.youtuber-card-bio{font-size:11.5px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.youtuber-card-cta{align-self:flex-start;margin-top:2px;font-size:11px;font-weight:700;color:#ff5c5c;padding:4px 12px;border:1px solid rgba(224,9,9,.35);border-radius:999px;transition:.15s;}
.youtuber-card:hover .youtuber-card-cta{background:rgba(224,9,9,.12);}
.youtubers-grid .empty{grid-column:1/-1;}

/* Feed v1: composer + lista de publicações. */
.feed-composer{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:20px;}
.feed-composer textarea{width:100%;resize:vertical;min-height:64px;max-height:220px;background:var(--card2,var(--bg-alt));border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;}
.feed-composer-preview{position:relative;margin-top:10px;display:inline-block;}
.feed-composer-preview img,.feed-composer-preview video{max-width:220px;max-height:160px;border-radius:10px;display:block;object-fit:contain;background:var(--bg-alt);}
.feed-composer-preview button{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:12px;}
.feed-composer-actions{display:flex;align-items:center;gap:10px;margin-top:12px;}
.feed-composer-media-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--border);cursor:pointer;font-size:19px;transition:.15s;}
.feed-composer-media-btn:hover{border-color:var(--or);}
.feed-list{display:flex;flex-direction:column;gap:14px;}
.feed-list .empty{text-align:center;color:var(--muted);padding:32px 0;}
.feed-post{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;}
.feed-post-author{display:flex;align-items:center;gap:10px;}
/* Nome/avatar do autor agora é um link pro Perfil Público (/u/<id>) --
   o <a> assume o mesmo display:flex que .feed-post-author tinha antes,
   pra avatar+info continuarem lado a lado exatamente como antes; flex:1
   herdado de .feed-post-author-info garante que o botão de apagar (irmão
   fora do link) continue empurrado pro fim, sem mudar layout nenhum. */
.feed-post-author-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none;}
.feed-post-author-link:hover .feed-post-author-name{text-decoration:underline;}

/* Identidade clicável -> Perfil Público (Leva 2, core/user-link.js).
   Base neutra: herda a cor do contexto, sublinhado só no hover/foco.
   Cada contexto abaixo mira o alvo certo do sublinhado. O <a> só existe
   quando há id; sem id o helper devolve um <span> com a mesma classe. */
.user-link{color:inherit;text-decoration:none;cursor:pointer;}
.user-link:hover{text-decoration:underline;}
.user-link:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:4px;}
/* align-self:flex-start -- o .feed-comment é um flex sem align-items, então
   um <a> sem altura definida esticaria pra altura toda do comentário e
   viraria uma área de clique invisível gigante embaixo do avatar. Assim o
   link abraça só os 28px do avatar, igual era antes de virar link. */
.user-link-avatar,.user-link-avatar:hover{display:inline-flex;flex-shrink:0;align-self:flex-start;text-decoration:none;}
/* Feed — autor do comentário: mesmo tratamento do autor do post.
   display:flex+min-width:0 -- o <a> herda 16px do .feed-comment-head e,
   sem isso, sua caixa de linha fica maior que o texto de 12px do
   .feed-comment-author dentro dele, engordando o cabeçalho no mobile
   quando o nome quebra. Como flex, o <a> abraça exatamente o span. */
.feed-comment-author-link{color:inherit;display:flex;align-items:center;min-width:0;}
.feed-comment-author-link:hover{text-decoration:none;}
.feed-comment-author-link:hover .feed-comment-author{text-decoration:underline;}
/* Comunidade — linha de membro: avatar + nome viram um alvo só. Sem
   flex:1 -- o bloco fica com a largura do conteúdo, igual antes (o nome
   era content-width); .community-member-actions segue com margin-left:auto. */
.community-member-identity{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;}
.community-member-identity:hover{text-decoration:none;}
.community-member-identity:hover .community-member-name{text-decoration:underline;}
.feed-post-avatar{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--or);color:#1a1206;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;object-fit:cover;}
.feed-post-author-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.feed-post-author-name{font-size:13px;font-weight:700;color:var(--text);}
/* Tag de cargo entre colchetes (pedido do usuário 2026-08-20) -- mesmo
   esquema de cor já usado em .community-member-role-* (aba Membros da
   Comunidade), pra não inventar paleta nova por feature. */
.role-tag{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:6px;margin-left:5px;vertical-align:middle;}
.role-tag-owner{background:rgba(255,122,24,.14);border:1px solid rgba(255,122,24,.4);color:var(--or);}
.role-tag-moderador{background:rgba(176,120,232,.14);border:1px solid rgba(176,120,232,.4);color:var(--purple);}
.role-tag-vip{background:rgba(255,122,24,.14);border:1px solid rgba(255,122,24,.4);color:var(--or);}
.role-tag-criador{background:rgba(224,9,9,.12);border:1px solid rgba(224,9,9,.35);color:#ff6b6b;}
.feed-post-date{font-size:11px;color:var(--muted);}
.feed-post-delete{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:4px;flex-shrink:0;transition:.15s;}
.feed-post-delete:hover{color:var(--red);}
/* Moderação V1 do Feed (D8, 2026-08-27): "..." -> Denunciar. Mesmo padrão
   visual do menu de mensagem da Community (.community-msg-menu*), classes
   próprias só pra não colidir com aquele CSS -- mesmo truque já usado
   antes pro menu de canal (.community-channel-menu*). */
.feed-post-menu{position:relative;flex-shrink:0;}
.feed-post-menu-btn{font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:6px;padding:1px 7px;cursor:pointer;opacity:.7;line-height:1.5;}
.feed-post-menu-btn:hover{opacity:1;color:var(--text);}
.feed-post-menu-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:130px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:20;display:flex;flex-direction:column;padding:4px;}
.feed-post-menu-dropdown[hidden]{display:none;}
.feed-post-menu-dropdown button{background:transparent;border:none;color:var(--text);font-size:11.5px;text-align:left;padding:7px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;}
.feed-post-menu-dropdown button:hover{background:var(--border);}
.feed-post-content{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;}
/* Padronização de mídia do post (pedido do usuário 2026-08-20): altura
   máxima consistente pra imagem e vídeo, e "contain" em vez de "cover" --
   um print/mockup de UI cortado feio pelo cover ficava ilegível, contain
   sempre mostra a imagem inteira, só encaixa numa moldura de fundo. */
.feed-post-image,.feed-post-video{width:100%;max-height:360px;object-fit:contain;background:var(--bg-alt);border-radius:10px;margin-top:12px;display:block;}
.feed-post-actions{margin-top:12px;display:flex;gap:8px;}
.feed-post-like,.feed-post-comment-toggle,.feed-post-share{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:700;transition:.15s;}
.feed-post-like:hover,.feed-post-comment-toggle:hover,.feed-post-share:hover{border-color:var(--or);}
.feed-post-like.active{border-color:rgba(224,9,9,.4);color:#ff5c5c;}
/* Compartilhar (Feed Leva 1, 2026-08-26): só ícone, sem contador ao lado
   (não faz sentido "contar compartilhamentos" nesta etapa -- não fica
   nada registrado, é só copiar link). margin-left:auto empurra pra
   ponta oposta de curtir/comentar, convenção comum (ação "secundária"
   separada das principais). */
.feed-post-share{margin-left:auto;padding:6px 10px;}
/* Destaque temporário do post compartilhado (Feed Leva 1, 2026-08-26):
   chamado por scrollToSharedPost em feed.js, removido via setTimeout --
   só contorno + leve glow que esmaece, não muda layout/tamanho (evita
   "pulo" de conteúdo ao redor). */
.feed-post-highlight{animation:feedPostHighlight 2.6s ease-out;}
@keyframes feedPostHighlight{
  0%{box-shadow:0 0 0 3px var(--or-glow,rgba(255,122,24,.55));border-color:var(--or);}
  100%{box-shadow:0 0 0 3px rgba(255,122,24,0);border-color:var(--border);}
}
.feed-post-comments{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;}
.feed-post-comments[hidden]{display:none;}
.feed-post-comments-list{display:flex;flex-direction:column;gap:10px;}
.feed-comments-empty,.feed-comments-loading{font-size:12px;color:var(--muted);text-align:center;padding:6px 0;}
/* "Carregar mais comentários" (Feed Leva 1, 2026-08-26) -- criado por JS
   (feed-comments.js), então precisa do próprio [hidden] explícito: tem
   display:flex incondicional, que empataria em especificidade com o
   [hidden]{display:none} do navegador e o navegador perderia por ordem
   de origem (mesmo motivo já documentado nos outros [hidden] deste
   arquivo). Menor/mais discreto que o botão de posts (.btn-outline) de
   propósito -- vive dentro de uma thread de comentário, não no nível da
   página. */
.feed-comments-load-more{display:flex;align-items:center;justify-content:center;width:100%;margin-top:6px;background:transparent;border:1px dashed var(--border-strong);color:var(--muted);border-radius:8px;padding:7px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s;}
.feed-comments-load-more:hover{border-color:var(--or);color:var(--text);}
.feed-comments-load-more[hidden]{display:none;}
.feed-comment{display:flex;gap:9px;}
.feed-comment-avatar{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--or);color:#1a1206;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;object-fit:cover;}
.feed-comment-body{flex:1;min-width:0;}
.feed-comment-head{display:flex;align-items:center;gap:7px;}
.feed-comment-author{font-size:12px;font-weight:700;color:var(--text);}
.feed-comment-date{font-size:10.5px;color:var(--muted);}
.feed-comment-delete{margin-left:auto;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:2px 4px;transition:.15s;}
.feed-comment-delete:hover{color:var(--red);}
.feed-comment-content{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.feed-post-comment-composer{display:flex;gap:8px;margin-top:12px;}
.feed-post-comment-composer[hidden]{display:none;}
.feed-post-comment-input{flex:1;min-width:0;background:var(--card2,var(--bg-alt));border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--text);font-size:12.5px;font-family:inherit;}
.feed-post-comment-send{background:var(--or);color:#1a1206;border:none;border-radius:50%;width:32px;height:32px;flex-shrink:0;cursor:pointer;font-size:13px;}
@media(max-width:640px){.feed-composer-preview img{max-width:160px;max-height:120px;}}
/* Feed mobile (Leva 1, 2026-08-26) -- só os pontos do levantamento, sem
   mexer em estrutura nem criar breakpoint novo (880px reaproveita o
   mesmo valor canônico do Mobile Shell, já usado por .app-sidebar/
   .mobile-menu-btn). Curtir/comentar/compartilhar e os 2 campos de texto
   crescem via padding/font-size, continuam o mesmo componente visual,
   só maiores. Apagar post e apagar comentário (fundo transparente, só
   ícone) ganham padding invisível -- mesmo truque já usado no sino de
   notificação, o ✕ continua do mesmo tamanho visual, só a área de toque
   ao redor cresce. */
@media(max-width:880px){
  .feed-post-like,.feed-post-comment-toggle,.feed-post-share{padding:13px 16px;}
  .feed-post-share{padding:13px 14px;}
  .feed-post-delete{padding:14px;}
  .feed-comment-delete{padding:16px 14px;}
  /* Moderação V1 (D8): "..." é botão novo, então já nasce com a mesma
     área de toque invisível dos outros ícones-só, sem precisar de uma
     2ª rodada de auditoria mobile depois. */
  .feed-post-menu-btn{padding:14px;}
  /* font-size:16px evita o zoom automático do iOS Safari ao focar um
     campo com texto menor que isso -- só no mobile, desktop continua
     13px/12.5px como sempre. input[type="text"] na frente (não só a
     classe) é necessário pra vencer a regra global "select,
     input[type="text"], textarea" (styles.css:12) -- ela é mais
     específica que .feed-post-comment-input sozinha (achado testando ao
     vivo: o campo já estava em 14px hoje, não nos 12.5px que a regra do
     componente diz, porque a global sempre venceu por especificidade). */
  .feed-composer textarea,input[type="text"].feed-post-comment-input{font-size:16px;}
}
@media(max-width:700px){.home-stats{margin:18px 0;}.home-stat-card{flex:1 1 130px;padding:13px 14px;}}

/* Perfil Público de Usuário (/u/<id>) -- não é clone de /perfil: sem abas,
   nada editável, só cabeçalho (avatar/nome/cargo/bio/membro desde) +
   estatísticas + lista de publicações (reaproveita .feed-list/.feed-post
   inteiros, mesmo visual/comportamento do Feed). */
.public-profile-header{display:flex;align-items:center;gap:20px;padding:24px 0 20px;}
.public-profile-avatar{width:88px;height:88px;flex-shrink:0;}
.public-profile-avatar-img{width:100%;height:100%;border-radius:50%;background:var(--or);color:#1a1206;font-size:32px;font-weight:800;display:flex;align-items:center;justify-content:center;object-fit:cover;}
.public-profile-info{min-width:0;}
.public-profile-name{font-size:22px;font-weight:800;color:var(--text);margin:0 0 4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.public-profile-bio{font-size:14px;color:var(--text);margin:0 0 6px;line-height:1.4;}
.public-profile-member-since{font-size:12px;color:var(--muted);margin:0;}
.public-profile-stats{display:flex;gap:28px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px;}
.public-profile-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
/* A régua de "vendas" só entra pra quem vende (public-profile.js). Sem
   isto, o display:flex acima ganha do [hidden] do navegador e o stat
   aparece "0 vendas" em todo perfil -- mesmo padrão de .wpg-modal[hidden]
   etc. (ver comentário lá em cima na folha). */
.public-profile-stat[hidden]{display:none;}
.public-profile-stat b{font-size:18px;font-weight:800;color:var(--text);}
.public-profile-stat span{font-size:12px;color:var(--muted);}
.public-profile-posts-title{font-size:16px;font-weight:800;color:var(--text);margin:0 0 12px;}

/* Atividade (Leva 3): entre as estatísticas e "Publicações". Cada linha e
   a seção inteira somem quando não há dado (public-profile.js). */
.public-profile-activity{margin:0 0 24px;}
.public-profile-activity[hidden]{display:none;}
.public-profile-activity-title{font-size:16px;font-weight:800;color:var(--text);margin:0 0 10px;}
.public-profile-activity-row{font-size:13px;color:var(--text);margin:0 0 7px;line-height:1.5;}
.public-profile-activity-row[hidden]{display:none;}
.public-profile-activity-row b{font-weight:800;}
.public-profile-activity-label{color:var(--muted);margin-right:6px;}
.public-profile-communities{display:inline-flex;flex-wrap:wrap;gap:6px;}
.public-profile-community{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--card2,rgba(255,255,255,.05));border:1px solid var(--border);color:var(--text);}

/* Vitrine do Parceiro Criador WPG (Fase 4, 2026-09-19) -- reaproveita o
   mesmo estilo de chip de .public-profile-community, só vira link. */
.creator-profile-socials{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.creator-profile-social-chip{display:inline-block;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--card2,rgba(255,255,255,.05));border:1px solid var(--border);color:var(--text);text-decoration:none;transition:border-color .15s;}
.creator-profile-social-chip:hover{border-color:var(--or);}

@media(max-width:880px){
  .public-profile-header{gap:14px;padding:18px 0 16px;}
  .public-profile-avatar{width:64px;height:64px;}
  .public-profile-avatar-img{font-size:24px;}
  .public-profile-name{font-size:18px;}
  .public-profile-stats{gap:18px;}
}

@media(max-width:880px){
  body{display:block;}
  .app-sidebar{display:none;}
  .app-main{padding-bottom:40px;}
  .mobile-topbar{
    display:flex;align-items:center;justify-content:flex-start;gap:10px;
    position:sticky;top:0;z-index:10;
    padding:12px 16px;min-height:62px;box-sizing:border-box;
    background:rgba(10,13,18,.94);border-bottom:1px solid var(--border);
  }
  .mobile-topbar .brand-logo{height:29px;}
  .subtabs{top:62px;}
  /* o botão hambúrguer só virava display:flex abaixo de 700px (bloco
     "WPG MOBILE — APP HEADER" mais abaixo) -- a sidebar some a partir de
     880px, então precisa funcionar nessa faixa toda (880px→700px) também,
     não só abaixo de 700px. */
  .mobile-menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;padding:0;
    border:1px solid var(--border);border-radius:10px;
    background:var(--card2);color:var(--text);
    font-size:20px;line-height:1;cursor:pointer;
  }
  /* mesmo motivo do botão acima: o painel do menu mobile (.mobile-menu.open)
     só ficava visível abaixo de 700px -- duplicado aqui pra também
     funcionar na faixa 700px-880px. */
  .mobile-menu.open{
    display:block;position:absolute;top:62px;right:14px;width:230px;
    box-sizing:border-box;padding:8px;
    background:var(--card2);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);z-index:1000;
  }
}

/* .roadmap-pill: pills "Fase 1 / Fase 2". Antes moravam no card flutuante
   do roteiro (#roadmapCard, removido na Nova Home B2a 2026-09-03); agora
   ficam na seção "Feito por um jogador" da Home. O resto do CSS do card
   flutuante saiu junto com o elemento. */
.roadmap-pill{font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:999px;}
.roadmap-pill.done{background:rgba(255,122,26,.14);color:var(--or);border:1px solid rgba(255,122,26,.32);}
.roadmap-pill.next{background:rgba(111,111,240,.14);color:#9aa4ff;border:1px solid rgba(111,111,240,.32);}
.roadmap-pill.loading{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border);}

  /* ---- página Sobre ---- */
  .sobre-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px;}
  .sobre-item{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px;}
  .sobre-item h3{margin:0 0 8px;font-size:14.5px;font-weight:700;color:var(--text);}
  .sobre-item p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65;}
  .sobre-loading{display:inline-flex;align-items:center;gap:2px;}
  .sobre-dots span{animation:sobreDotPulse 1.4s infinite;opacity:.25;}
  .sobre-dots span:nth-child(2){animation-delay:.2s;}
  .sobre-dots span:nth-child(3){animation-delay:.4s;}
  @keyframes sobreDotPulse{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

  /* Linha do tempo visual (2026-08-27) -- os 5 marcos reais da história
     (Como começou -> Fase 1 -> Erros -> Fase 2 -> Fase 3) ganham espinha
     dorsal + marcador numerado. Só nas 5 seções marcadas
     .sobre-timeline-step (não em "Por trás"/"Números ao vivo", que não são
     passos cronológicos) -- escopado a #page-sobre pra nunca vazar pro
     .home-section genérico usado em Home/Perfil/etc. */
  #page-sobre{counter-reset:sobreStep;}
  #page-sobre .sobre-timeline-step{position:relative;padding-left:44px;}
  #page-sobre .sobre-timeline-step::before{
    content:'';position:absolute;left:13px;top:32px;bottom:-32px;width:2px;background:var(--border);
  }
  #page-sobre .sobre-timeline-step:last-of-type::before{display:none;}
  #page-sobre .sobre-timeline-step::after{
    counter-increment:sobreStep;content:counter(sobreStep);
    position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;
    background:var(--card);border:2px solid var(--or);color:var(--or);
    font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
    font-variant-numeric:tabular-nums;
  }
  @media(max-width:600px){
    #page-sobre .sobre-timeline-step{padding-left:36px;}
    #page-sobre .sobre-timeline-step::before{left:11px;}
    #page-sobre .sobre-timeline-step::after{width:24px;height:24px;font-size:11.5px;}
  }

  /* Hall da Fama dos Bugs -- mesmo .sobre-item de sempre, só com uma
     etiqueta de "conquista" no topo do card. */
  .sobre-item-badge{border-color:rgba(255,122,26,.3);}
  .sobre-badge-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--or);
    background:rgba(255,122,26,.12);border-radius:999px;padding:3px 10px;margin-bottom:10px;}

  /* Por trás do projeto -- avatar+bio de quem mantém o site, linkando pro
     Perfil Público (primeiro uso real do /u/<id> fora do Feed). */
  .sobre-behind-card{display:flex;align-items:center;gap:18px;background:var(--card);
    border:1px solid var(--border);border-radius:14px;padding:20px;text-decoration:none;
    color:inherit;transition:.18s;}
  .sobre-behind-card:hover{border-color:rgba(255,122,26,.35);transform:translateY(-2px);}
  .sobre-behind-avatar{width:64px;height:64px;flex-shrink:0;border-radius:50%;overflow:hidden;
    background:var(--or);color:#1a1206;font-size:24px;font-weight:800;display:flex;
    align-items:center;justify-content:center;}
  .sobre-behind-avatar img{width:100%;height:100%;object-fit:cover;}
  .sobre-behind-name{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px;}
  .sobre-behind-text p{margin:0;font-size:13px;color:var(--muted);line-height:1.7;max-width:640px;}
  @media(max-width:600px){
    .sobre-behind-card{flex-direction:column;align-items:flex-start;text-align:left;}
  }


/* ---- extraído de: <style id="wpg-auth-css"> ---- */
.auth-panel{max-width:420px;width:100%;}
/* Depois de 2 técnicas de centralização customizadas falharem (":has()"+
   "safe center", depois pseudo-elemento fantasma + inline-block — ambas
   quebravam quando o conteúdo era mais alto que a janela: o topo ficava
   preso fora da área visível e não dava pra rolar até ele), a solução foi
   simplesmente NÃO reinventar a roda: todo .wpg-modal já centraliza certo
   via flexbox (ver regra base .wpg-modal), e .wpg-modal-panel já limita a
   altura a 80vh com scroll interno — é assim que os outros modais do site
   (categoria, anúncio, aviso do Comércio etc.) sempre centralizaram sem
   bug nenhum. O problema nunca foi a centralização em si, era essa classe
   .wpg-modal-auth removendo esse limite de altura (max-height:none) pra
   "deixar crescer" — só que aí nada mais garantia que o topo do modal
   ficasse dentro da tela. Removendo esse override, os modais de login/
   cadastro/perfil voltam a se comportar exatamente como todo o resto. */
.auth-provider-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(135deg,rgba(88,101,242,.16),rgba(88,101,242,.05));border:1px solid rgba(88,101,242,.4);border-radius:11px;padding:13px 14px;cursor:pointer;margin-top:4px;}
.auth-provider-btn:hover{border-color:rgba(88,101,242,.7);background:linear-gradient(135deg,rgba(88,101,242,.24),rgba(88,101,242,.08));}
.auth-provider-btn-secondary{background:var(--card2,#11161d);border-color:var(--border);padding:11px 14px;}
.auth-provider-btn-secondary:hover{border-color:#3a4150;background:var(--border);}
.auth-provider-icon{font-size:20px;flex-shrink:0;}
.auth-provider-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.auth-provider-title{color:#fff;font-size:14px;font-weight:700;}
.auth-provider-desc{color:var(--muted);font-size:11px;line-height:1.4;}
.auth-provider-badge{flex-shrink:0;background:rgba(88,101,242,.22);color:#a9b1ff;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;}
/* Login mobile (2026-08-26): causa raiz medida ao vivo -- em 320x568, o
   botão Entrar nascia em y=635-678, MUITO abaixo do que o próprio painel
   (.wpg-modal-panel, max-height:80vh) conseguia mostrar sem rolar, MESMO
   sem nenhum teclado aberto. O motivo: o card do Discord (título+
   descrição longa+selo) crescia até 220px de altura numa tela estreita
   (a descrição quebra em mais linhas quanto mais estreito), somado aos 2
   botões desabilitados do Google/Facebook (58px cada, só "Em breve") —
   tudo isso ANTES do formulário de email/senha de verdade começar.
   Ajuste: só esconde a descrição (não apaga do HTML -- volta a aparecer
   sozinha se a tela crescer além do breakpoint, não é remoção
   definitiva) e compacta o padding dos botões, em telas estreitas OU
   baixas -- cobre tanto retrato (largura pequena) quanto paisagem de
   celular (altura pequena, ex: 812x375, testado ao vivo). Título e selo
   "Recomendado" do Discord continuam sempre visíveis, e a área de toque
   do botão não encolhe (só o padding vertical, ainda dentro do
   confortável). Nunca afeta desktop (nenhuma tela real de desktop cai
   nessas duas condições ao mesmo tempo). */
@media (max-width:480px),(max-height:600px){
  .auth-provider-btn{padding:9px 12px;}
  .auth-provider-btn-secondary{padding:8px 12px;}
  .auth-provider-desc{display:none;}
}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-divider-email{gap:8px;}
.auth-divider-logo{width:16px;height:16px;border-radius:4px;flex:0 0 auto;object-fit:cover;}
.auth-form input[type="email"],.auth-form input[type="password"],.auth-form input[type="text"],.auth-form input[type="date"],.auth-form select{width:100%;background:var(--card2);border:1px solid var(--border);color:var(--text);padding:11px 12px;border-radius:9px;font-size:14px;font-family:inherit;}
.auth-form input:focus,.auth-form select:focus{outline:2px solid rgba(255,122,26,.35);outline-offset:1px;}
.auth-hint{color:var(--muted);font-size:10.5px;margin-top:6px;}
.auth-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap;}
.auth-link{background:transparent;border:none;color:var(--or-300);font-size:12px;font-weight:600;cursor:pointer;padding:4px;}
.auth-link:hover{color:var(--or-300);text-decoration:underline;}
.auth-links-dot{color:var(--border);font-size:12px;}
.field-help-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--card2);border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:800;cursor:pointer;vertical-align:middle;margin-left:4px;padding:0;line-height:1;}
.field-help-btn:hover{border-color:var(--or);color:var(--or);}
.field-help-text{background:rgba(255,122,26,.06);border:1px solid rgba(255,122,26,.22);border-radius:9px;padding:11px 12px;color:var(--muted);font-size:12px;line-height:1.6;margin:-4px 0 14px;}
.field-help-text[hidden]{display:none;}

.perfil-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.perfil-status-item{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px;}
.perfil-status-item.ok{border-color:rgba(63,191,107,.3);}
.perfil-status-item.warn{border-color:rgba(255,122,26,.35);}
.perfil-status-icon{font-size:18px;flex-shrink:0;line-height:1;margin-top:1px;}
.perfil-status-text strong{display:block;color:#fff;font-size:13.5px;margin-bottom:3px;}
.perfil-status-text p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;}
.perfil-status-text button{margin-top:8px;background:transparent;border:1px solid var(--or);color:var(--or);border-radius:7px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer;}
.perfil-status-text button:hover{background:rgba(255,122,26,.1);}
.perfil-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.perfil-action-card{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px;cursor:pointer;}
.perfil-action-card:hover{border-color:var(--or);background:var(--card2);}
.perfil-action-card[hidden]{display:none;}
.perfil-action-icon{font-size:19px;flex-shrink:0;line-height:1;margin-top:1px;}
.perfil-action-text{display:flex;flex-direction:column;gap:3px;}
.perfil-action-title{color:#fff;font-size:13.5px;font-weight:700;}
.perfil-action-desc{color:var(--muted);font-size:12px;line-height:1.5;}
/* Identidade (/perfil) -- foto + apelido customizados, usados na Comunidade
   e no Feed em vez do nome/avatar cru do provedor de login. */
.perfil-identity-card{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px;flex-wrap:wrap;}
.perfil-identity-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;}
.perfil-identity-avatar{width:76px;height:76px;border-radius:50%;background:var(--or);color:#1a1206;font:800 26px 'Inter',sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.perfil-identity-avatar img{width:100%;height:100%;object-fit:cover;}
.perfil-identity-avatar-btn{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s;}
.perfil-identity-avatar-btn:hover{border-color:var(--or);color:var(--or);}
.perfil-identity-fields{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px;}
.perfil-identity-label{font-size:11.5px;color:var(--muted);font-weight:700;}
.perfil-identity-fields input[type=text]{background:var(--card2,var(--bg-alt));border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-size:13px;font-family:inherit;}
.perfil-identity-fields .btn{width:auto;align-self:flex-start;padding:8px 18px;}
.auth-form .perm-msg{min-height:0;}
.auth-form .perm-msg.error{background:rgba(240,168,159,.1);border:1px solid rgba(240,168,159,.35);border-radius:8px;padding:9px 11px;margin:10px 0 0;}
.auth-form .perm-msg.ok{background:rgba(63,191,107,.1);border:1px solid rgba(63,191,107,.35);border-radius:8px;padding:9px 11px;margin:10px 0 0;}

/* Login "Caminho C" — Leva 3: "Formas de entrar nesta conta" (Perfil > Segurança).
   Reusa .perfil-status-item; só acrescenta os badges e o destaque de retorno. */
.lm-badge{display:inline-block;font:700 9px var(--mono),ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;vertical-align:middle;margin-left:2px;}
.lm-badge-principal{background:rgba(255,122,26,.16);color:var(--or);}
.lm-badge-linked{background:rgba(63,191,107,.16);color:#3fbf6b;}
.lm-badge-current{background:var(--card2);color:var(--muted);border:1px solid var(--border);}
.lm-check{color:#3fbf6b;font-weight:700;}
.lm-row .lm-unlink-btn{border-color:var(--border);color:var(--muted);}
.lm-row .lm-unlink-btn:hover{border-color:var(--or);color:var(--or);background:transparent;}
.lm-row.lm-just{animation:lm-flash 2s ease;}
@keyframes lm-flash{0%,65%{box-shadow:0 0 0 2px rgba(56,214,160,.7) inset;}100%{box-shadow:0 0 0 0 rgba(56,214,160,0) inset;}}

/* Central de Segurança (/perfil) — 2FA, sessões ativas, log de segurança */
.seg-subhead{color:#fff;font-size:14.5px;margin:22px 0 4px;}
.seg-list{display:flex;flex-direction:column;gap:8px;}
.seg-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:12px 14px;flex-wrap:wrap;}
.seg-item.current{border-color:rgba(63,191,107,.35);}
.seg-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.seg-item-info strong{color:#fff;font-size:13px;}
.seg-item-info small{color:var(--muted);font-size:11.5px;}
.seg-item-tag{font-size:10.5px;font-weight:700;color:#3fbf6b;background:rgba(63,191,107,.12);border:1px solid rgba(63,191,107,.3);border-radius:6px;padding:2px 8px;white-space:nowrap;}
.seg-item-revoke{background:transparent;border:1px solid rgba(240,168,159,.4);color:#f0a89f;border-radius:7px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.seg-item-revoke:hover{background:rgba(240,168,159,.1);}
.seg-empty{color:var(--muted);font-size:12.5px;padding:10px 2px;}
.mfa-qr-wrap{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px;max-width:220px;margin:0 auto;}
.mfa-manual-secret{display:block;text-align:center;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:9px;font-size:13px;letter-spacing:1px;word-break:break-all;color:#fff;margin-top:4px;}
.mfa-backup-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:14px;}
.mfa-backup-codes span{font-family:monospace;font-size:13px;color:#fff;text-align:center;background:var(--card);border-radius:6px;padding:6px 4px;}
.btn-danger{background:transparent;border:1px solid rgba(240,168,159,.5);color:#f0a89f;}
.btn-danger:hover{background:rgba(240,168,159,.12);}

.webhook-errors-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0;}
.webhook-errors-head>span{font-weight:800;font-size:13.5px;color:#fff;}
.webhook-errors-list{display:flex;flex-direction:column;gap:8px;padding:10px 16px 16px;}
.webhook-error-item{border:1px solid rgba(240,168,159,.3);background:rgba(208,59,59,.08);border-radius:10px;padding:10px 12px;}
.webhook-error-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.webhook-error-type{font-weight:700;font-size:12.5px;color:#f0a89f;}
.webhook-error-ctx{font-weight:500;color:var(--muted);}
.webhook-error-date{font-size:11px;color:var(--muted);white-space:nowrap;}
.webhook-error-meta{margin-top:5px;font-size:11.5px;color:var(--muted);word-break:break-word;}

/* Balões flutuantes (Sugestões/Bugs/Atendimento) — bottom:90px, z-index
   abaixo dos .wpg-modal (200), pra não flutuar por cima de um modal
   aberto. */
/* Canto inferior DIREITO, não esquerdo -- a sidebar mora à esquerda, e o
   menu da conta (que abre pra cima, do rodapé da sidebar) sempre ia disputar
   espaço/z-index com qualquer coisa flutuando naquele canto. Direita é
   também o padrão mais comum pra esse tipo de widget de suporte. */
/* Widget persistente de voz/tela (Comunidade): a sessão pertence ao
   usuário, não à página -- fica fora de qualquer .page (ver index.html),
   canto esquerdo pra não colidir com o Suporte (direito). Mostrado/escondido
   via wpgVoiceWidgetSync() em community.js, não por CSS de rota. */
.wpg-voice-widget{position:fixed;left:20px;bottom:20px;z-index:150;width:230px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.4);overflow:hidden;cursor:grab;touch-action:none;}
.wpg-voice-widget-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 50%,var(--border) 50%,var(--border) 62%,transparent 62%,transparent 74%,var(--border) 74%,var(--border) 86%,transparent 86%);}
.wpg-voice-widget-resize:hover{background:linear-gradient(135deg,transparent 50%,var(--or) 50%,var(--or) 62%,transparent 62%,transparent 74%,var(--or) 74%,var(--or) 86%,transparent 86%);}
/* BUG CRÍTICO corrigido: display:flex acima tinha a MESMA especificidade
   do [hidden]{display:none} do navegador (ambos 1 seletor) -- como essa
   regra vem depois no CSS, ela ganhava e o atributo hidden virava
   decorativo: o widget aparecia SEMPRE, até deslogado/sem ninguém em
   voz, tampando o botão de login no rodapé da sidebar (reportado ao
   vivo: "ninguém além do owner consegue ver a comunidade" -- na
   verdade era o botão de Entrar tampado). [hidden] junto com a classe
   tem especificidade maior, garante ganhar sempre. */
.wpg-voice-widget[hidden]{display:none;}
body.dash-mode .wpg-voice-widget{display:none!important;}
.wpg-voice-widget.dragging{user-select:none;box-shadow:0 18px 44px rgba(0,0,0,.55);cursor:grabbing;}
.wpg-voice-widget-notice{padding:8px 12px;font-size:10.5px;line-height:1.4;color:#ffc98a;background:rgba(255,158,24,.12);border-bottom:1px solid rgba(255,158,24,.3);}
.wpg-voice-widget-screenshare{display:flex;flex-direction:column;border-bottom:1px solid var(--border);}
.wpg-voice-widget-connecting{display:flex;align-items:center;gap:8px;padding:14px 12px;font-size:11.5px;font-weight:600;color:var(--muted);}
.wpg-voice-widget-spinner{width:13px;height:13px;flex-shrink:0;border-radius:50%;border:2px solid var(--border);border-top-color:var(--or);animation:wpgVoiceSpin .7s linear infinite;}
@keyframes wpgVoiceSpin{to{transform:rotate(360deg);}}
.wpg-voice-widget-sharebody{display:flex;flex-direction:column;}
/* Mesmo bug do [hidden] corrigido acima pro widget inteiro -- essas 3
   sub-partes TAMBÉM setavam display:flex direto na classe, ignorando o
   hidden que community.js liga/desliga (wpgVoiceWidgetSync). Resultado
   visto ao vivo: "Conectando…" e "Compartilhando tela" apareciam juntos,
   empilhados, o widget ficava bem mais alto do que devia (e por isso
   "sumia" da tela ao arrastar perto da borda de baixo). */
.wpg-voice-widget-screenshare[hidden],
.wpg-voice-widget-connecting[hidden],
.wpg-voice-widget-sharebody[hidden]{display:none;}
.wpg-voice-widget-screenshare video{width:100%;height:120px;object-fit:cover;background:#000;display:block;cursor:zoom-in;transition:height .18s ease;}
.wpg-voice-widget-screenshare.expanded video{height:260px;object-fit:contain;cursor:zoom-out;}
.wpg-voice-widget-sharelabel{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11.5px;font-weight:700;color:var(--text);}
.wpg-voice-widget-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#ff5b5b;animation:wpgVoiceDotPulse 1.6s infinite;}
@keyframes wpgVoiceDotPulse{0%{box-shadow:0 0 0 0 rgba(255,91,91,.55);}70%{box-shadow:0 0 0 8px rgba(255,91,91,0);}100%{box-shadow:0 0 0 0 rgba(255,91,91,0);}}
.wpg-voice-widget-stopshare{margin:6px 12px 10px;background:rgba(255,91,91,.12);border:1px solid rgba(255,91,91,.35);color:#ff8a8a;border-radius:8px;padding:7px 10px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s;}
.wpg-voice-widget-stopshare:hover{background:rgba(255,91,91,.2);}
.wpg-voice-widget-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);}
.wpg-voice-widget-open{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit;border-radius:8px;}
.wpg-voice-widget-open:hover .wpg-voice-widget-head-text strong{color:var(--or);}
.wpg-voice-widget-head-icon{font-size:14px;line-height:1;}
.wpg-voice-widget-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.wpg-voice-widget-head-text strong{font-size:11px;font-weight:800;color:var(--text);transition:color .15s;}
.wpg-voice-widget-head-text span{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wpg-voice-widget-pill{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;}
.wpg-voice-widget-avatar{width:24px;height:24px;border-radius:50%;background:var(--or);color:#1a1206;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.wpg-voice-widget-avatar img{width:100%;height:100%;object-fit:cover;}
.wpg-voice-widget-participants{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;}
/* Alerta de entrar/sair da call -- canto oposto ao widget (que fica embaixo
   à esquerda) pra não sobrepor, acima do dev-banner do topo. */
.community-voice-toast{position:fixed;top:74px;right:20px;z-index:220;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font:600 13px 'Inter',sans-serif;color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.4);max-width:280px;animation:communityVoiceToastIn .2s ease;}
@keyframes communityVoiceToastIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.wpg-voice-widget-participants:empty{display:none;padding:0;}
.wpg-voice-widget-participant{width:22px;height:22px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);color:var(--text);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wpg-voice-widget-participant.is-muted{opacity:.5;}
.wpg-voice-widget-pill-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:var(--text);}
.wpg-voice-widget-mic,.wpg-voice-widget-leave,.wpg-voice-widget-minimize,.wpg-voice-widget-chat{background:var(--bg-alt);border:1px solid var(--border);color:var(--text);border-radius:8px;width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;padding:0;transition:.15s;}
.wpg-voice-widget-mic:hover,.wpg-voice-widget-leave:hover,.wpg-voice-widget-minimize:hover,.wpg-voice-widget-chat:hover{border-color:var(--or);}
.wpg-voice-widget-leave{color:#ff8a8a;border-radius:50%;}
.wpg-voice-widget-minimize{border-radius:50%;font-size:10px;line-height:1;}
.wpg-voice-widget-chat.active{background:rgba(255,122,24,.16);border-color:var(--or);color:var(--or);}
.wpg-voice-widget-chat-panel{display:flex;flex-direction:column;border-top:1px solid var(--border);--wpg-voice-chat-scale:1;}
.wpg-voice-widget-chat-panel[hidden]{display:none;}
.wpg-voice-widget-chat-target-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px 0;}
.wpg-voice-widget-chat-target{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wpg-voice-widget-chat-fontctl{display:flex;gap:2px;flex-shrink:0;}
.wpg-voice-widget-chat-fontctl button{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:5px;font-size:9.5px;font-weight:800;padding:1px 5px;cursor:pointer;line-height:1.4;}
.wpg-voice-widget-chat-fontctl button:hover{color:var(--text);border-color:rgba(255,122,24,.4);}
.wpg-voice-widget-chat-messages{max-height:170px;overflow-y:auto;padding:9px 12px;display:flex;flex-direction:column;gap:7px;}
.wpg-voice-widget-chat-messages:empty::after{content:'';}
.wpg-voice-widget-chat-msg-author{font-size:calc(9.5px * var(--wpg-voice-chat-scale,1));font-weight:800;color:var(--muted);margin-bottom:2px;}
.wpg-voice-widget-chat-msg-text{font-size:calc(11.5px * var(--wpg-voice-chat-scale,1));color:var(--text);background:var(--bg-alt);border-radius:8px;padding:5px 8px;display:inline-block;max-width:100%;word-break:break-word;white-space:pre-wrap;}
.wpg-voice-widget-chat-empty{font-size:11px;color:var(--muted);text-align:center;padding:6px 0;}
.wpg-voice-widget-chat-composer{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--border);}
.wpg-voice-widget-chat-composer input{flex:1;min-width:0;background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:6px 8px;color:var(--text);font-size:11.5px;font-family:inherit;}
.wpg-voice-widget-chat-composer button{background:var(--or);color:#1a1206;border:none;border-radius:8px;padding:0 10px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;}
/* Minimizado -- pedido do usuário: some com a prévia de tela e a linha de
   microfone, sobra só o cabeçalho compacto (nome do canal + sair), pra
   tirar o widget do caminho sem precisar sair da chamada. */
.wpg-voice-widget.minimized .wpg-voice-widget-screenshare,
.wpg-voice-widget.minimized .wpg-voice-widget-pill,
.wpg-voice-widget.minimized .wpg-voice-widget-chat-panel{display:none;}
@media(max-width:640px){.wpg-voice-widget{left:auto;right:14px;bottom:96px;width:190px;}}
.wpg-feedback-bubbles{position:fixed;left:auto;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:0;align-items:flex-end;touch-action:none;}
/* Arrastar o botão de Suporte pra qualquer canto (pedido do usuário
   2026-08-20, "não ficar preso em um canto só") -- mesmo padrão do
   wpg-voice-widget, só que aqui o "manche" é o balão inteiro (não tem
   área sem botão pra segurar), então a distinção arrastar/clicar é por
   distância percorrida, não por elemento excluído (ver support.js). */
.wpg-feedback-bubbles.draggable-active{cursor:grab;}
.wpg-feedback-bubbles.dragging{cursor:grabbing;user-select:none;}
.wpg-feedback-bubbles.dragging .wpg-feedback-main-btn,.wpg-feedback-bubbles.dragging .wpg-feedback-bubble{box-shadow:0 18px 44px rgba(0,0,0,.55);}
/* No Dashboard a barra lateral (.dash-sidebar) mora nesse mesmo canto
   esquerdo — os balões ficariam boiando por cima da navegação da Staff, que
   já tem canais diretos com a equipe mesmo. */
body.dash-mode .wpg-feedback-bubbles{display:none!important;}
/* 4 balões soltos viraram 1 botão "Suporte" que expande a lista -- pedido
   do usuário, testando o site ao vivo (ficavam empilhados e poluindo o
   canto da tela). Toggle em public/js/support/support.js. */
.wpg-feedback-bubble-list{display:flex;flex-direction:column;gap:10px;align-items:flex-end;max-height:0;opacity:0;pointer-events:none;overflow:hidden;transition:max-height .22s ease,opacity .18s ease;}
.wpg-feedback-bubbles.open .wpg-feedback-bubble-list{max-height:280px;opacity:1;pointer-events:auto;margin-bottom:10px;}
.wpg-feedback-bubble{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:10px 12px 10px 16px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);transition:transform .15s ease,border-color .15s ease;}
.wpg-feedback-bubble:hover{transform:translateX(2px);border-color:var(--or);color:var(--or);}
.wpg-feedback-bubble-icon{font-size:16px;line-height:1;}
.wpg-feedback-main-btn{display:flex;align-items:center;gap:8px;background:var(--or);border:1px solid var(--or);color:#1a1206;border-radius:999px;padding:12px 16px 12px 14px;font-size:12.5px;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);transition:transform .15s ease,filter .15s ease;}
.wpg-feedback-main-btn:hover{filter:brightness(1.08);transform:translateX(2px);}
@media(max-width:640px){
  /* right:14px (não left) -- com left:14px + o right:20px da regra base, o
     container esticava de ponta a ponta (~341px de 375) e, com
     pointer-events herdado, engolia toques numa faixa horizontal inteira
     perto do rodapé (botões/links atrás dela ficavam sem resposta). Como o
     conteúdo visível é só o botão, ancorar num canto só deixa a caixa do
     tamanho do botão. */
  .wpg-feedback-bubbles{left:auto;right:14px;bottom:96px;gap:0;}
  .wpg-feedback-bubbles.open .wpg-feedback-bubble-list{margin-bottom:8px;}
  .wpg-feedback-bubble-list{gap:8px;}
  .wpg-feedback-bubble-label{display:none;}
  .wpg-feedback-bubble,.wpg-feedback-main-btn{padding:11px;border-radius:50%;}
}

.rating-stars{display:flex;gap:6px;justify-content:center;margin:18px 0 4px;}
.rating-star{background:none;border:none;font-size:34px;line-height:1;color:#2c323c;cursor:pointer;padding:2px;transition:transform .1s,color .1s;}
.rating-star:hover{transform:scale(1.12);}
.rating-star.active{color:var(--or-300);}

/* ---- Comunidade V2 -- Lapidação (2026-08-24): nota discreta no modal de
   motivo, só quando a ação é uma intervenção de Staff fora da própria
   comunidade (communityPromptModal(..., {note:true})). Sem vermelho/
   alarme -- mesmo tom neutro usado no resto do site (--card2/--border),
   só um pouco destacado do texto normal do modal. Nunca aparece pro
   Criador/Admin agindo na própria comunidade. ---- */
.community-prompt-note{background:var(--card2);border:1px solid var(--border);border-radius:8px;
  padding:9px 11px !important;color:var(--muted) !important;}


/* Fila de Moderação (#modReportsTable): no mobile vira cards empilhados
   em vez de tabela rolável horizontal, e os botões de ação -- incl. as
   ações de consequência (Aprovar/Recusar) -- ganham alvo de toque de
   46px, empilhados, com a ação de consequência destacada. */
@media (max-width:700px){
  #page-dashboard .pag-table.pag-table--cards{
    display:block;white-space:normal;box-shadow:none;border:0;background:transparent;
  }
  #page-dashboard .pag-table--cards thead{display:none;}
  #page-dashboard .pag-table--cards tbody{display:block;}
  #page-dashboard .pag-table--cards tr{
    display:block;border:1px solid var(--dsh-border);border-radius:12px;
    background:var(--dsh-card);padding:12px 14px;margin-bottom:12px;
  }
  #page-dashboard .pag-table--cards tr:last-child td{border-bottom:none;}
  #page-dashboard .pag-table--cards td{
    display:block;padding:6px 0;border:0;white-space:normal;text-align:left;
    position:static;box-shadow:none;background:transparent;
  }
  #page-dashboard .pag-table--cards td:first-child{
    position:static;box-shadow:none;background:transparent;
  }
  #page-dashboard .pag-table--cards td[data-label]::before{
    content:attr(data-label);display:block;
    font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--dsh-muted);margin-bottom:2px;
  }
  /* linha de "carregando" / "vazio" (colspan) */
  #page-dashboard .pag-table--cards td[colspan]{display:block;text-align:center;padding:18px 0;}
  #page-dashboard .pag-table--cards td[colspan]::before{display:none;}

  /* célula de ações */
  #page-dashboard .pag-table--cards td.pag-cell-actions{
    display:block !important;margin-top:10px;padding-top:12px;
    border-top:1px solid var(--dsh-border);
  }
  #page-dashboard .pag-table--cards td.pag-cell-actions button{
    display:block;width:100% !important;margin:0 0 8px 0 !important;
    min-height:46px !important;font-size:13px !important;padding:12px 14px !important;
    border-radius:9px !important;
  }
  #page-dashboard .pag-table--cards td.pag-cell-actions button:last-child{margin-bottom:0 !important;}
  /* ações de consequência (irreversíveis ou de peso) ficam destacadas em
     âmbar; "Descartar"/"Resolver" (seguras) seguem discretas */
  #page-dashboard .pag-table--cards td.pag-cell-actions button[data-reject],
  #page-dashboard .pag-table--cards td.pag-cell-actions button[data-feed-hide],
  #page-dashboard .pag-table--cards td.pag-cell-actions button[data-feed-delete]{
    border:1px solid #e0894a !important;color:#e0894a !important;
    background:rgba(224,137,74,.10) !important;
  }
}


@media (max-width:640px){
  /* O botão flutuante de Suporte (.wpg-feedback-bubbles, bottom:96px no
     mobile) cobria o fim do footer. Reserva de scroll no fim do documento
     pra ele flutuar sobre área vazia, não sobre a barra de créditos /
     links do footer. */
  .wpg-footer-full{padding-bottom:150px;}
}

/* ======================================================================
   League of Legends Intelligence — interface interna (Leva 6)
   Consome so /api/lol/{summoner,matches,match/{id},analytics}. Sem cores
   novas: usa os tokens do site (--card/--border/--orange/--green/--red/
   --muted/--gold/--mono). Renderizado por public/js/jogos/lol.js.
   ====================================================================== */
.lol-app{display:flex;flex-direction:column;gap:16px;}
/* TFT Intelligence (Leva 1, 2026-09-11) -- reaproveita todas as classes
   .lol-* acima (cabeçalho/loading/gate/busca/erro/seção/tags), só o
   container próprio muda de nome. Ver public/js/jogos/tft.js. */
.tft-app{display:flex;flex-direction:column;gap:16px;}
/* TFT — Tier List de Comps + Hub (Fase A, 2026-09-14) -- espelha 1:1 as
   classes .genshin-tabs/.genshin-tier-*/.genshin-hub-* (mesmo layout, só
   prefixo próprio, sem side-effect nas classes do Genshin). Ver
   public/js/jogos/tft/{comps-data,comps-view}.js e public/js/jogos/tft.js. */
.tft-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.tft-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-weight:700;font-size:13px;padding:8px 4px;cursor:pointer;}
.tft-tab.active{color:var(--text);border-bottom-color:var(--signal);}
.tft-tierlist{display:flex;flex-direction:column;gap:12px;}
.tft-tier-row{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:12px;}
.tft-tier-badge{flex:0 0 44px;text-align:center;font-family:var(--mono);font-weight:800;font-size:18px;border-radius:10px;padding:8px 4px;}
.tft-tier-row-S .tft-tier-badge{background:rgba(227,166,62,.16);color:var(--gold);border:1px solid rgba(227,166,62,.4);}
.tft-tier-row-A .tft-tier-badge{background:rgba(108,140,255,.16);color:var(--blue);border:1px solid rgba(108,140,255,.4);}
.tft-tier-comps{display:flex;flex-wrap:wrap;gap:10px;flex:1;}
.tft-comp-card{display:flex;flex-direction:column;gap:6px;width:168px;border:1px solid var(--border);background:var(--card);border-radius:10px;padding:10px;cursor:pointer;transition:border-color .15s;}
.tft-comp-card:hover{border-color:var(--signal);}
.tft-comp-card-name{font-size:12.5px;font-weight:700;color:var(--text);}
.tft-comp-card-playstyle{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.tft-comp-card-units{display:flex;flex-wrap:wrap;gap:4px;}
.tft-comp-unit-icon{width:28px;height:28px;border-radius:6px;object-fit:cover;background:var(--card2);border:1px solid var(--border);}
.tft-disclaimer{font-size:9.5px;color:var(--muted);margin:2px 0 0;font-style:italic;}
.tft-hub{gap:16px;}
.tft-hub-back{align-self:flex-start;background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;}
.tft-hub-back:hover{border-color:var(--signal);}
.tft-hub-header{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);background:var(--card2);border-radius:14px;padding:16px;}
.tft-hub-headtext{display:flex;flex-direction:column;gap:6px;min-width:0;}
.tft-hub-name{font-size:18px;font-weight:800;color:var(--text);}
.tft-hub-section{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:14px;}
.tft-hub-section-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.tft-hub-talent{display:flex;flex-direction:column;gap:2px;}
.tft-hub-talent-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);}
.tft-hub-talent-summary{font-size:12px;color:var(--muted);margin:0;line-height:1.4;}
.tft-hub-unit{display:flex;gap:10px;align-items:flex-start;}
.tft-hub-unit-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.tft-hub-item-row{display:flex;align-items:center;gap:6px;}
.tft-hub-icon-sm{width:20px;height:20px;border-radius:4px;object-fit:cover;background:var(--card);border:1px solid var(--border);flex:0 0 auto;}
.tft-hub-icon-md{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--card);border:1px solid var(--border);flex:0 0 auto;}
/* Genshin Impact (Leva 1, 2026-09-12) -- mesma ideia: reaproveita as
   classes .lol-* acima, só o container muda de nome. Ver
   public/js/jogos/genshin.js. */
.genshin-app{display:flex;flex-direction:column;gap:16px;}
/* Dota 2 (Leva 1, 2026-09-12) -- mesma ideia. Ver public/js/jogos/dota2.js. */
.dota2-app{display:flex;flex-direction:column;gap:16px;}
/* Honkai: Star Rail (Leva 1, 2026-09-12) -- mesma ideia, reaproveita as
   classes .genshin-char-* pro grid de personagens de assistência (mesmo
   layout visual, dado diferente). Ver public/js/jogos/hsr.js. */
.hsr-app{display:flex;flex-direction:column;gap:16px;}
/* CS2 (Leva 1, 2026-09-12) -- mesma ideia, só reaproveita .lol-tags/.lol-tag
   pras estatísticas (sem grid de personagens, não se aplica aqui). Ver
   public/js/jogos/cs2.js. */
.cs2-app{display:flex;flex-direction:column;gap:16px;}
/* PUBG (Leva 1, 2026-09-14) -- mesma ideia do CS2, reaproveita .lol-*
   inteiro (KPIs, seções, busca). Ver public/js/jogos/pubg.js. */
.pubg-app{display:flex;flex-direction:column;gap:16px;}
/* Cabeçalho (2026-09-11): agora fixo em toda fase (ver lol.js paint()), com
   o mesmo peso visual do "O que você quer fazer?" do Naruto (eyebrow laranja,
   título maior) -- antes só aparecia depois da busca e era bem mais discreto. */
.lol-header{padding-bottom:18px;margin-bottom:2px;border-bottom:1px solid var(--border);}
.lol-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--signal);font-weight:500;margin-bottom:8px;}
.lol-h2{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--text);margin:0 0 8px;}
.lol-lead{font-size:14px;color:var(--muted);line-height:1.65;margin:0;max-width:600px;}

.lol-gate{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:22px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6;}
.lol-gate strong{display:block;color:var(--text);font-size:15px;margin-bottom:6px;}

.lol-search-row{display:flex;gap:8px;align-items:flex-start;margin-top:2px;}
.lol-search-row input[type="text"]{flex:1;}
.lol-search-row .btn{width:auto;flex:0 0 auto;padding:11px 20px;box-shadow:none;}
.lol-search-row .btn:disabled{opacity:.55;cursor:progress;}

.lol-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:34px 0;color:var(--muted);font-size:14.5px;}
.lol-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--or);animation:wpgVoiceSpin .7s linear infinite;flex-shrink:0;}

.lol-profile-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;}
.lol-profile-name{font-size:19px;font-weight:800;color:var(--text);}
.lol-profile-name small{color:var(--muted);font-weight:600;font-size:14.5px;}
.lol-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.lol-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-variant-numeric:tabular-nums;}
.lol-tag strong{color:var(--text);}
.lol-rank{border-color:color-mix(in srgb,var(--gold) 40%,var(--border));background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);}
.lol-mastery{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.lol-mastery-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card2);color:var(--muted);}

/* ícones reais (Data Dragon), 2026-09-11 -- circular pra campeão/invocador,
   quadrado arredondado pra item/feitiço, como op.gg/u.gg. Fallback (URL
   nula ou 404) já é tratado no JS (iconImg() remove a tag) -- aqui só o
   tamanho e a moldura. */
.lol-champ-icon,.lol-champ-icon-sm,.lol-profile-icon{border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--card2);vertical-align:middle;}
.lol-profile-icon{width:40px;height:40px;align-self:center;}
.lol-champ-icon-sm{width:22px;height:22px;}
.lol-item-icon,.lol-spell-icon{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:var(--card2);border:1px solid var(--border);vertical-align:middle;}
.lol-rune-icon{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--card);border:1px solid var(--border);vertical-align:middle;}

.lol-block-title{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.lol-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.lol-kpi{border:1px solid var(--border);background:var(--card2);border-radius:10px;padding:12px 13px;}
.lol-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:5px;}
.lol-kpi-value{font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.lol-kpi-sub{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.lol-kpi.pos .lol-kpi-value{color:var(--green);}
.lol-kpi.neg .lol-kpi-value{color:var(--red);}

/* Rank em destaque (2026-09-14, redesign "estilo tracker.gg") -- substitui
   o chip pequeno .lol-rank quando o jogador tem elo; sem elo continua no
   chip pequeno de sempre (ver viewProfile() em lol.js). */
.lol-rank-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--border));background:color-mix(in srgb,var(--gold) 8%,var(--card2));border-radius:14px;padding:14px 18px;margin-top:12px;}
.lol-rank-hero-tier{font-family:var(--mono);font-weight:800;font-size:21px;color:var(--gold);letter-spacing:.01em;}
.lol-rank-hero-lp{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.lol-rank-hero-record{margin-left:auto;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:right;line-height:1.6;}
.lol-rank-hero-record strong{display:block;font-size:14.5px;color:var(--text);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;}

/* Cards de Função/Campeão (2026-09-14) -- substituem a linha de tabela como
   visão principal (WR%+KDA em destaque); a tabela cheia vira "ver tabela
   detalhada" (.lol-toggle-table), ver viewStatCards()/breakdownTable(). */
.lol-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-bottom:12px;}
.lol-statcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:14px 10px;}
.lol-statcard.dim{opacity:.65;}
.lol-statcard-icon{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--border);}
.lol-statcard-icon-placeholder{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--muted);}
.lol-statcard-name{font-size:13.5px;font-weight:700;color:var(--text);margin-top:2px;}
.lol-statcard-wr{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);}
.lol-statcard-wr.pos{color:var(--green);}
.lol-statcard-wr.neg{color:var(--red);}
.lol-statcard-kda{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.lol-statcard-games{font-size:11px;color:var(--muted);}
.lol-toggle-table{align-self:flex-start;background:none;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:10px;}
.lol-toggle-table:hover{color:var(--text);border-color:var(--signal);}

/* "Pontuação do rastreador" (2026-09-14) -- nota NOSSA (S/A/B/C/D), nunca
   comparação oficial com a média do elo (aviso via .lol-build-disclaimer,
   já existente, reaproveitado -- mesmo significado: "isso é opinião nossa,
   não dado oficial coletado"). */
.lol-trackerscore{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:8px;}
.lol-trackerscore-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--card2);border-radius:10px;padding:10px 13px;}
.lol-grade-badge{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:14px;}
.lol-grade-S{background:rgba(227,166,62,.18);color:var(--gold);border:1px solid rgba(227,166,62,.4);}
.lol-grade-A{background:rgba(67,199,155,.16);color:var(--green);border:1px solid rgba(67,199,155,.35);}
.lol-grade-B{background:rgba(91,139,255,.14);color:var(--signal);border:1px solid rgba(91,139,255,.32);}
.lol-grade-C{background:rgba(255,122,47,.14);color:var(--or);border:1px solid rgba(255,122,47,.3);}
.lol-grade-D{background:rgba(240,90,90,.14);color:var(--red);border:1px solid rgba(240,90,90,.3);}
.lol-trackerscore-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.lol-trackerscore-value{font-size:15.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}

.lol-lowconf{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(154,163,173,.16);color:var(--muted);border:1px solid rgba(154,163,173,.32);}
.lol-lowconf-hint{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.5;}
.lol-note{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.5;border-top:1px solid var(--border);padding-top:10px;}
.lol-build-community{font-weight:600;}
.lol-build-community.pos{color:var(--green);}
.lol-build-community.neg{color:var(--red);}

/* cada bloco (perfil / visão geral / histórico / detalhe) fica separado por
   um filete, como as seções do resto do site */
.lol-section{border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;}
.lol-section .lol-block-title{margin-top:0;}

#lolApp .subtabs{position:static;margin-bottom:14px;backdrop-filter:none;}

/* Genshin Impact (Leva 1), 2026-09-12 -- grid de personagens da vitrine.
   Reaproveita os tokens/classes lol-* (lol-tag/lol-section/lol-profile-*)
   pra manter a mesma linguagem visual do resto de Jogos; só o grid de
   cards de personagem é específico daqui. */
.genshin-char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px;}
.genshin-char-card{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.genshin-char-icon,.genshin-char-icon-empty{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--border);}
.genshin-char-name{font-size:13px;font-weight:800;color:var(--text);}
.genshin-char-weapon{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--muted);}
.genshin-weapon-icon{width:18px;height:18px;border-radius:5px;object-fit:cover;background:var(--card);border:1px solid var(--border);}

/* Comparador de Build (2026-09-13, ver src/genshin/build/) -- bloco dentro do genshin-char-card
   existente. Selos usam tons neutros (nunca vermelho): isso é SUGESTÃO da
   comunidade, não avaliação de "certo/errado" -- ver disclaimer. */
.genshin-build{width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);text-align:left;display:flex;flex-direction:column;gap:6px;}
.genshin-build-title{font-size:11px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:6px;}
.genshin-build-role{font-size:10px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.genshin-build-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;}
.genshin-build-label{color:var(--muted);min-width:50px;}
.genshin-build-badge{font-weight:700;border-radius:999px;padding:2px 8px;border:1px solid var(--border);background:var(--card);color:var(--muted);}
.genshin-build-badge-ideal,.genshin-build-badge-completo,.genshin-build-badge-bate{background:rgba(67,199,155,.14);border-color:rgba(67,199,155,.32);color:var(--green);}
.genshin-build-badge-alternativa,.genshin-build-badge-parcial{background:rgba(227,179,65,.14);border-color:rgba(227,179,65,.32);color:var(--gold);}
.genshin-build-rec{color:var(--muted);font-size:10.5px;display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;}
.genshin-build-mainstats{display:flex;flex-direction:column;gap:4px;}
.genshin-build-disclaimer{font-size:9.5px;color:var(--muted);margin:2px 0 0;font-style:italic;}

/* Chip com ícone real (Enka) + tooltip ao passar o mouse (2026-09-13,
   pedido do usuário "igual no League of Legends") -- mesmo MECANISMO de
   .lol-build-chip (::after com attr(data-tip), :hover/:focus cobre mouse e
   teclado, .is-open cobre toque), só com tom neutro (não o azul do LoL) pra
   combinar com os selos já neutros do comparador de build do Genshin. */
.genshin-build-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text);background:var(--card2);border:1px solid var(--border);border-radius:99px;padding:3px 9px;}
.genshin-build-chip-icon{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:var(--card);border:1px solid var(--border);}
.genshin-build-chip.has-tip{position:relative;cursor:help;}
/* [data-tip] genérico (2026-09-13): mesma regra serve pro chip do
   comparador de build E pro card de personagem da Tier List
   (.genshin-tier-char) -- 1 mecanismo de tooltip só, reaproveitado. */
[data-tip]:hover::after,[data-tip]:focus::after,[data-tip].is-open::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:220px;white-space:pre-line;text-align:left;
  background:var(--s-900,#0c0f16);color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:7px 9px;font-size:11px;line-height:1.4;box-shadow:0 12px 28px -12px rgba(0,0,0,.6);
  z-index:20;pointer-events:none;
}
[data-tip]:focus{outline:2px solid var(--signal);outline-offset:2px;}

/* Abas Vitrine/Tier List + Tier List em si (2026-09-13, "tier list igual o
   site do genshinbuild"). Tiers usam tons distintos do laranja (que é
   reservado pro CTA único do site, ver feedback_shared_visual_language) --
   ouro pra SS, roxo pra S, azul pra A, neutro pra B. */
.genshin-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.genshin-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-weight:700;font-size:13px;padding:8px 4px;cursor:pointer;}
.genshin-tab.active{color:var(--text);border-bottom-color:var(--signal);}
.genshin-tierlist{display:flex;flex-direction:column;gap:14px;}
.genshin-tier-row{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:12px;}
.genshin-tier-badge{flex:0 0 44px;text-align:center;font-family:var(--mono);font-weight:800;font-size:18px;border-radius:10px;padding:8px 4px;}
.genshin-tier-row-SS .genshin-tier-badge{background:rgba(227,166,62,.16);color:var(--gold);border:1px solid rgba(227,166,62,.4);}
.genshin-tier-row-S .genshin-tier-badge{background:rgba(176,120,232,.16);color:var(--purple);border:1px solid rgba(176,120,232,.4);}
.genshin-tier-row-A .genshin-tier-badge{background:rgba(108,140,255,.16);color:var(--blue);border:1px solid rgba(108,140,255,.4);}
.genshin-tier-row-B .genshin-tier-badge{background:var(--card);color:var(--muted);border:1px solid var(--border);}
.genshin-tier-chars{display:flex;flex-wrap:wrap;gap:10px;flex:1;}
.genshin-tier-char{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;text-align:center;cursor:help;position:relative;}
.genshin-tier-char-icon{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--border);}
.genshin-tier-char-name{font-size:10.5px;font-weight:700;color:var(--text);line-height:1.2;}
.genshin-tier-char-role{font-size:9px;color:var(--muted);}

/* Personagens/Armas/Artefatos/Times (2026-09-13, "além do Vitrine -> Tier
   List -> Personagens -> Armas -> Artefatos -> Times") -- reaproveita
   .genshin-tier-char-icon/.genshin-build-chip, só acrescenta os
   containers novos. */
.genshin-person-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;text-align:center;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:10px;}
.genshin-person-row{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-size:10.5px;color:var(--muted);align-items:center;}
.genshin-list-group{display:flex;flex-direction:column;gap:8px;}
.genshin-list-group-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:6px;}
.genshin-list-card{display:flex;gap:12px;align-items:center;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:10px 12px;}
.genshin-list-card-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.genshin-list-card-name{font-size:13px;font-weight:700;color:var(--text);}
.genshin-rarity{color:var(--gold);font-size:11px;letter-spacing:1px;}
.genshin-team-card{align-items:flex-start;}
.genshin-team-note{font-size:11.5px;color:var(--muted);margin:2px 0 0;line-height:1.4;}

/* Catálogo completo (2026-09-13, "escopar" o catálogo completo) -- campo
   de busca (120/249/60 itens cada tela) + selo "curado" nos itens que
   também estão no roster de 25/32/15. */
.genshin-catalog-search{width:100%;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-size:13px;font-family:inherit;margin:10px 0 4px;}
.genshin-catalog-search:focus{outline:2px solid var(--signal);outline-offset:1px;}
.genshin-curated-badge{font-size:9px;font-weight:800;color:var(--gold);background:rgba(227,166,62,.14);border:1px solid rgba(227,166,62,.35);border-radius:999px;padding:1px 6px;margin-left:6px;letter-spacing:.02em;}
.genshin-list-card-clickable,.genshin-person-card-clickable{cursor:pointer;transition:border-color .15s,transform .15s;}
.genshin-list-card-clickable:hover,.genshin-list-card-clickable:focus-visible,.genshin-person-card-clickable:hover,.genshin-person-card-clickable:focus-visible{border-color:var(--signal);transform:translateY(-2px);outline:none;}

/* Hub de personagem (2026-09-13, "rodada grande" -- "as pessoas precisam
   saber o que os bonecos fazem") -- tela de detalhe aberta a partir de um
   card em Personagens/Tier List. Resumos de talento/passiva/constelação
   são texto ORIGINAL nosso (ver hub-data.js), nunca copiado do jogo.
   Reaproveitado tal e qual (2026-09-15) pelo hub de arma/set (viewWeaponHub/
   viewSetHub em profile.js) -- mesma estrutura de header+seções, sem
   nenhuma classe nova além de .genshin-list-card-clickable acima. */
.genshin-hub{gap:16px;}
.genshin-hub-back{align-self:flex-start;background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;}
.genshin-hub-back:hover{border-color:var(--signal);}
.genshin-hub-header{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);background:var(--card2);border-radius:14px;padding:16px;}
.genshin-hub-icon{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--border);flex:0 0 auto;}
.genshin-hub-headtext{display:flex;flex-direction:column;gap:6px;min-width:0;}
.genshin-hub-name{font-size:18px;font-weight:800;color:var(--text);}
.genshin-hub-section{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:14px;}
.genshin-hub-section-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.genshin-hub-talentorder{font-size:13px;color:var(--text);margin:0;}
.genshin-hub-talent{display:flex;flex-direction:column;gap:2px;}
.genshin-hub-talent-name{font-size:13px;font-weight:700;color:var(--text);}
.genshin-hub-talent-summary{font-size:12px;color:var(--muted);margin:0;line-height:1.4;}
.genshin-hub-consts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.genshin-hub-const{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 10px;}
.genshin-hub-const-name{font-size:11px;font-weight:800;color:var(--gold);}
.genshin-hub-team{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}

/* Dota 2 (Leva 1), 2026-09-12 -- lista de candidatos da busca por nome +
   lista de partidas recentes. Reaproveita os tokens/classes lol-* pro
   resto (cabeçalho/seção/tags/perfil). */
.dota2-result-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.dota2-result-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);background:var(--card2);border-radius:10px;color:var(--text);font-size:13px;font-weight:700;text-align:left;cursor:pointer;}
.dota2-result-row:hover{border-color:var(--or);}
.dota2-match-list{display:flex;flex-direction:column;gap:8px;}
/* Ícone/tipografia maiores (2026-09-14, redesign "estilo tracker.gg") --
   mesmo espírito de densidade visual do LoL, sem virar card clicável (Dota2
   não tem detalhe de partida ainda, então não finge ser interativo). */
.dota2-match-row{display:grid;grid-template-columns:44px minmax(0,1.4fr) auto auto auto;gap:12px;align-items:center;padding:11px 14px;border-left:3px solid var(--border);background:var(--card2);border-radius:9px;font-size:12.5px;font-variant-numeric:tabular-nums;}
.dota2-match-row.dota2-win{border-left-color:var(--green);}
.dota2-match-row.dota2-loss{border-left-color:var(--red);}
.dota2-hero-icon{width:44px;height:25px;object-fit:cover;border-radius:4px;background:var(--card);}
.dota2-hero-name{font-weight:700;font-size:13.5px;color:var(--text);}
.dota2-result{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted);}
.dota2-win .dota2-result{color:var(--green);}
.dota2-loss .dota2-result{color:var(--red);}
.dota2-kda{color:var(--text);font-weight:700;}
.dota2-duration{color:var(--muted);}

.lol-table-wrap{overflow-x:auto;}
.lol-table{width:100%;border-collapse:collapse;font-size:14px;}
.lol-table th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;white-space:nowrap;}
.lol-table td{font-variant-numeric:tabular-nums;color:var(--text);}
.lol-table tr.dim td{color:var(--muted);}
.lol-table td .lol-lowconf{margin-left:6px;}
.lol-table td,.lol-table th{padding:7px 9px;}
.lol-champ-row{cursor:pointer;transition:.12s;}
.lol-champ-row:hover{background:var(--card2);}
.lol-champ-row td{white-space:nowrap;}
.lol-champ-row .lol-champ-icon-sm{width:20px;height:20px;border-radius:5px;vertical-align:middle;margin-right:6px;}
.lol-champ-row td.pos{color:var(--green,#2ecc71);}
.lol-champ-row td.neg{color:var(--red,#e74c3c);}

.lol-matches{display:flex;flex-direction:column;gap:6px;}
.lol-match{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;border:1px solid var(--border);border-left-width:3px;border-radius:9px;background:var(--card2);cursor:pointer;transition:.12s;text-align:left;width:100%;font:inherit;}
.lol-match:hover,.lol-match:focus-visible{border-color:color-mix(in srgb,var(--or) 40%,var(--border));background:var(--card);}
.lol-match:focus-visible{outline:2px solid var(--or);outline-offset:1px;}
.lol-match.win{border-left-color:var(--green);}
.lol-match.loss{border-left-color:var(--red);}
.lol-match-main{display:flex;align-items:center;gap:12px;width:100%;}
.lol-match-result{flex:0 0 auto;width:44px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.lol-match.win .lol-match-result{color:var(--green);}
.lol-match.loss .lol-match-result{color:var(--red);}
.lol-match-champ{flex:1 1 auto;min-width:0;}
.lol-match-champ b{color:var(--text);font-weight:700;font-size:14.5px;}
.lol-match-champ span{display:block;color:var(--muted);font-size:12.5px;}
.lol-match-kda{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-size:14px;}
.lol-match-kda span{display:block;color:var(--muted);font-size:12.5px;}
/* KDA colorido (2026-09-12) -- mesma semântica de .lol-kpi.pos/.neg. */
.lol-match-kda b.pos{color:var(--green);}
.lol-match-kda b.neg{color:var(--red);}
.lol-match-date{flex:0 0 auto;color:var(--muted);font-size:12.5px;white-space:nowrap;}
.lol-match-chevron{flex:0 0 auto;color:var(--muted);font-size:13.5px;}
/* Ícones de item por partida (2026-09-12, pedido "muito seco" vs op.gg) --
   alinhado sob o campeão (44px = largura de .lol-match-result). */
.lol-match-items{display:flex;gap:4px;flex-wrap:wrap;margin-left:44px;}

.lol-back{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:9px;padding:8px 14px;font:600 14px 'Inter',sans-serif;cursor:pointer;transition:.15s;margin-bottom:4px;}
.lol-back:hover{border-color:var(--or);color:var(--or);}
.lol-detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px;}
.lol-teams{display:flex;flex-direction:column;gap:14px;}
.lol-team{border:1px solid var(--border);border-radius:11px;overflow:hidden;}
.lol-team-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 13px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.lol-team.win .lol-team-head{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);}
.lol-team.loss .lol-team-head{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);}
.lol-team-obj{display:flex;gap:10px;color:var(--muted);font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;flex-wrap:wrap;}
.lol-part{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto auto;gap:8px 12px;align-items:center;padding:9px 13px;border-top:1px solid var(--border);font-size:13.5px;font-variant-numeric:tabular-nums;}
.lol-part.subject{background:var(--or-wash,rgba(255,122,24,.07));}
.lol-part-name{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lol-part-name b{color:var(--text);}
.lol-part-name small{color:var(--muted);}
.lol-part-num{color:var(--text);}
.lol-part-num em{color:var(--muted);font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;margin-left:3px;}
.lol-part-items{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;}

.lol-error{border:1px solid color-mix(in srgb,var(--red) 40%,var(--border));background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);border-radius:11px;padding:16px 18px;font-size:14.5px;line-height:1.6;}

/* Sugestão de build (2026-09-11) -- ver src/lol/build.js. Acento azul
   (var(--signal)), mesma identidade do cabeçalho do LoL nesta sessão. */
.lol-build .btn{width:auto;padding:10px 18px;}
/* "2 hubs" (2026-09-16, pedido do usuário: "isso está confundindo bastante
   os leitores... uma hub vai ter a recomendação do CAMPEÃO, e outro hub
   vai ter a recomendação contra o personagem da rota contrária") --
   mesma linguagem visual de card já usada na aba de Campeões
   (.lol-itembuild-card/.lol-champdetail-head: borda+card2+cantos
   arredondados), só o hub de matchup ganha um acento azul sutil pra
   diferenciar rápido "isso é do campeão" de "isso é deste confronto". */
.lol-buildhub{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:2px 14px 8px;margin-bottom:12px;}
.lol-buildhub-matchup{border-color:color-mix(in srgb,var(--signal) 35%,var(--border));background:color-mix(in srgb,var(--signal) 5%,var(--card2));}
.lol-buildhub-title{font-size:13.5px;font-weight:800;color:var(--text);margin:12px 0 2px;}
.lol-buildhub-sub{font-size:12px;color:var(--muted);margin:0 0 6px;line-height:1.4;}
.lol-build-disclaimer{font-size:13px;color:var(--muted);line-height:1.5;border:1px dashed var(--signal);background:rgba(91,139,255,.08);border-radius:10px;padding:10px 12px;margin:0 0 4px;}
/* Diagnóstico do matchup (2026-09-15) -- por que a build considerou o
   adversário específico da rota (ver matchupReasons em lol-view.js). */
.lol-build-matchup-notes{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px;}
.lol-build-matchup-notes li{font-size:13px;color:var(--text);line-height:1.4;padding-left:14px;position:relative;}
.lol-build-matchup-notes li::before{content:"›";position:absolute;left:0;color:var(--signal);}
.lol-build-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--border);}
.lol-build-row:first-of-type{border-top:none;}
.lol-build-label{flex:0 0 100px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);}
/* Detalhe de campeão (2026-09-16, aba de Campeões) -- pedido do usuário
   "da para melhorarmos visualmente?": a tela era só texto empilhado sem
   nenhuma hierarquia. Reaproveita a MESMA linguagem visual já usada em
   .lol-kpi/.lol-rank-hero/.lol-statcard (borda + card2 + cantos
   arredondados) em vez de inventar uma cara nova só pra essa tela (ver
   feedback_shared_visual_language_no_convenience_reuse). */
.lol-champdetail-head{display:flex;align-items:center;gap:14px;border:1px solid var(--border);background:var(--card2);border-radius:14px;padding:14px 18px;}
.lol-champdetail-icon{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex:0 0 auto;}
.lol-champdetail-head .lol-tags{margin-top:8px;}

/* Itens sugeridos -- 1 card por seção da OP.GG ("Itens iniciais"/"Botas"/
   "Itens de suporte"/"Builds principais"), 1ª linha de cada seção já vem
   ordenada por nº de jogos -- marcada como "mais jogado" sem recalcular
   nada. Seta entre chips (.lol-itembuild-arrow) mostra a ORDEM de compra
   quando a linha tem mais de 1 item. */
.lol-itembuild-card{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:6px 14px;margin-bottom:10px;}
.lol-itembuild-title{font-size:12.5px;font-weight:700;color:var(--text);margin:10px 0 2px;}
.lol-itembuild-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--border);}
.lol-itembuild-row:first-of-type{border-top:none;}
.lol-itembuild-row.top{position:relative;padding-top:22px;}
.lol-itembuild-badge{position:absolute;top:6px;left:0;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--signal);font-weight:700;}
.lol-itembuild-items{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.lol-itembuild-arrow{color:var(--muted);font-size:12.5px;}
.lol-itembuild-stats{margin-left:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.lol-itembuild-wr{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;}
.lol-itembuild-wr.pos{color:var(--green);}
.lol-itembuild-wr.neg{color:var(--red);}
.lol-itembuild-pick{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Runa mais jogada -- vira mini stat-card (mesma cara de .lol-statcard),
   não mais parágrafo solto. */
.lol-runecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;}
.lol-runecard{position:relative;border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:14px 12px 12px;text-align:center;}
.lol-runecard.top{border-color:color-mix(in srgb,var(--signal) 40%,var(--border));}
.lol-runecard .lol-itembuild-badge{left:50%;transform:translateX(-50%);}
.lol-runecard-wr{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);}
.lol-runecard-wr.pos{color:var(--green);}
.lol-runecard-wr.neg{color:var(--red);}
.lol-runecard-meta{font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums;}

/* Confrontos mais jogados -- tabela ganha o mesmo card das outras seções
   (antes ficava "flutuando" sem nenhuma borda). */
.lol-champdetail-tablecard{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:2px 10px;}
.lol-build-chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text);background:rgba(91,139,255,.10);border:1px solid rgba(91,139,255,.30);border-radius:99px;padding:4px 11px;}
/* Tooltip de efeito real (Data Dragon) por item/runa/bota/feitiço (pedido
   de pro player, 2026-09-12: "não faz sentido sem saber o efeito de cada
   um"). :hover/:focus cobre mouse e teclado; .is-open (toggle no wire() de
   lol.js) cobre toque, que nem sempre dispara :hover no celular. */
.lol-build-chip.has-tip{position:relative;cursor:help;}
.lol-build-chip[data-tip]:hover::after,.lol-build-chip[data-tip]:focus::after,.lol-build-chip[data-tip].is-open::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:240px;white-space:pre-line;text-align:left;
  background:var(--s-900,#0c0f16);color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-size:13px;line-height:1.45;box-shadow:0 12px 28px -12px rgba(0,0,0,.6);
  z-index:20;pointer-events:none;
}
.lol-build-chip[data-tip]:focus{outline:2px solid var(--signal);outline-offset:2px;}

@media(max-width:640px){
  .lol-search-row{flex-direction:column;}
  .lol-search-row .btn{width:100%;}
  .lol-part{grid-template-columns:1fr auto auto;}
  .lol-part-num:nth-child(4){display:none;}
}

/* ======================================================================
   LINHA DO TEMPO -- roadmap de conteúdo QQ -> DE -> BR (2026-09-19,
   reformulação visual no mesmo dia -- ver Claude outputs/
   ADDENDUM-VISUAL-LINHA-TEMPO-E-PACOTES.md). Reaproveita tokens/padrões
   já existentes: .subtabs/.subtab (abas de categoria), .pill (selo de
   status), .disclaimer (aviso legal), --green/--gold/--muted/--border
   (nenhum tema novo, cores mapeadas dos tokens que a página já herda).
   "Estimado" usa --gold (âmbar) em vez de --or (que nesta página vira
   ciano, cor de destaque/marca -- errado semanticamente pra "cuidado,
   é estimativa"), corrigido nesta leva.
   ====================================================================== */
.roadmap-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);}
.roadmap-legend-item{display:inline-flex;align-items:center;gap:6px;}
.roadmap-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.roadmap-dot-confirmado{background:var(--green);}
.roadmap-dot-estimado{background:var(--gold);}
.roadmap-dot-pendente{background:var(--muted);}

/* A1 -- "Chegando em breve no BR" */
.roadmap-soon{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.roadmap-soon-title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.roadmap-soon-title{margin:0;font-family:var(--display,'Rubik',sans-serif);font-size:18px;font-weight:600;color:var(--text);}
.roadmap-soon-sub{font-size:11.5px;color:var(--muted);}
.roadmap-soon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.roadmap-soon-card{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;}
.roadmap-soon-head{display:flex;align-items:center;gap:12px;}
.roadmap-soon-icon,.roadmap-soon-initials{width:40px;height:40px;border-radius:50%;flex:0 0 auto;border:1px solid var(--border);}
.roadmap-soon-icon{object-fit:cover;background:var(--bg-alt);}
.roadmap-soon-initials{background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--or-300,var(--or));}
.roadmap-soon-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.roadmap-soon-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.roadmap-soon-cat{font-size:10.5px;color:var(--muted);}
.roadmap-soon-est{background:rgba(227,179,65,.14);color:var(--gold);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;text-align:center;}
@media(max-width:720px){.roadmap-soon-grid{grid-template-columns:1fr;}}
/* pódio de CHEGADA (não é ranking): usa o pódio SVG de upgrade/podio.js */
.roadmap-soon-grid.roadmap-soon-podio{display:block;}
.roadmap-soon-podio .roadmap-soon-icon,.roadmap-soon-podio .roadmap-soon-initials{width:48px;height:48px;}
.roadmap-soon-name-wrap{white-space:normal;text-align:center;font-size:13px;line-height:1.25;}
.roadmap-soon-when{background:rgba(227,179,65,.14);color:var(--gold);font-weight:600;}

/* A2 -- barra de ordenar + buscar (legenda à esquerda, controles à direita) */
.roadmap-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px;}
.roadmap-toolbar-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.roadmap-sort-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.roadmap-sort-label select{background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;font-size:12.5px;}
.roadmap-search{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;min-width:180px;color:var(--muted);}
.roadmap-search input{border:none;background:transparent;outline:none;color:var(--text);font:inherit;font-size:12.5px;width:100%;}
.roadmap-search-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

.roadmap-list{display:flex;flex-direction:column;gap:8px;}
.roadmap-empty{color:var(--muted);font-size:13px;padding:14px 0;text-align:center;}
.roadmap-row{border:1px solid var(--border);border-radius:12px;padding:12px 16px;background:var(--card2);}
.roadmap-row-main{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.roadmap-row-name{display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:180px;}
.roadmap-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:0 0 auto;border:1px solid var(--border);background:var(--bg-alt);}
.roadmap-row-name-text{font-size:13.5px;font-weight:600;color:var(--text);}

.roadmap-qual{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;border:1px solid;white-space:nowrap;}
.roadmap-qual-vermelha{background:rgba(224,113,106,.14);color:var(--red,#e0716a);border-color:rgba(224,113,106,.35);}
.roadmap-qual-dourada{background:rgba(227,179,65,.14);color:var(--gold,#e3b341);border-color:rgba(227,179,65,.35);}
.roadmap-qual-roxa{background:rgba(176,120,232,.14);color:var(--purple,#b078e8);border-color:rgba(176,120,232,.35);}

.roadmap-status.pill.roadmap-status-confirmado{background:rgba(67,199,155,.14);color:var(--green);border-color:rgba(67,199,155,.35);}
.roadmap-status.pill.roadmap-status-estimado{background:rgba(227,179,65,.14);color:var(--gold);border-color:rgba(227,179,65,.4);}
.roadmap-status.pill.roadmap-status-pendente{background:rgba(154,163,173,.14);color:var(--muted);border-color:rgba(154,163,173,.3);}

/* Abas de categoria em formato pílula (2026-09-20, addendum visual --
   ficou de fora da leva anterior por engano). .subtab é componente
   genérico reaproveitado em várias páginas (Pacotes, Eventos,
   Ferramentas via loader.js) -- por isso escopado em #rm-tabs (id real
   do container aqui, não existe .roadmap-cats no HTML), nunca no
   .subtab/.subtabs genérico. Cores mapeadas dos tokens já usados no
   resto desta reforma (--or/--or-300/--or-wash -- nesta página --or já é
   o ciano de destaque, ver override de #page-roadmap no topo do
   arquivo), nenhuma variável nova. */
#rm-tabs{background:none;border:none;padding:0;position:static;backdrop-filter:none;box-shadow:none;gap:8px;margin-bottom:36px;}
#rm-tabs .subtab{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px;padding:10px 18px;font-size:14px;box-shadow:none;}
#rm-tabs .subtab.active{background:var(--or-wash,rgba(32,211,224,.14));border-color:var(--or);color:var(--or-300,var(--or));box-shadow:none;}
#rm-tabs .subtab:hover:not(.active){border-color:var(--muted);}

/* A3/A4 -- cabeçalho QQ/DE/BR + timeline de pontos por linha, mesmo grid
   nos dois (5 colunas: ponto/segmento/ponto/segmento/ponto) pra alinhar
   sem depender de largura de conteúdo. */
.roadmap-col-header{display:flex;align-items:center;gap:18px;padding:0 16px 8px;}
.roadmap-col-header-name{flex:1 1 200px;min-width:180px;}
.roadmap-col-header-status{width:84px;flex:0 0 auto;}
.roadmap-timeline{display:grid;grid-template-columns:56px 1fr 56px 1fr 56px;align-items:start;flex:2 1 260px;min-width:220px;max-width:360px;}
.roadmap-timeline-header .roadmap-tl-head{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:center;}

.roadmap-tl-point{display:flex;flex-direction:column;align-items:center;gap:5px;}
.roadmap-tl-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.5;}
.roadmap-tl-point-confirmado .roadmap-tl-dot{background:var(--green);opacity:1;}
.roadmap-tl-point-estimado .roadmap-tl-dot{background:transparent;border:2px solid var(--gold);opacity:1;}
.roadmap-tl-point-pendente .roadmap-tl-dot{background:transparent;border:2px solid var(--muted);opacity:.5;}
.roadmap-tl-label{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;}
.roadmap-tl-label-est{color:var(--gold);font-style:italic;font-weight:600;font-family:inherit;font-size:9.5px;}
.roadmap-tl-label-none{color:var(--muted);opacity:.6;}

.roadmap-tl-seg{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px;}
.roadmap-tl-seg-line{width:100%;height:2px;background:var(--border);}
.roadmap-tl-seg-confirmado .roadmap-tl-seg-line{background:var(--green);}
.roadmap-tl-seg-estimado .roadmap-tl-seg-line{background:var(--gold);opacity:.6;}
.roadmap-tl-seg-days{font-family:var(--mono);font-size:9px;color:var(--muted);opacity:.75;}

@media(max-width:720px){
  .roadmap-col-header{display:none;}
  .roadmap-row-main{gap:10px;}
  .roadmap-row-name{flex:1 1 100%;}
  .roadmap-timeline{flex:1 1 100%;max-width:none;grid-template-columns:48px 1fr 48px 1fr 48px;}
  .roadmap-status{margin-left:auto;}
}

/* Artefato: campo "XP atual" ao lado do nível de cada parte (artefato-xp.js) */
.monte-slot-combo-row--xp{grid-template-columns:minmax(0,1fr) auto auto auto auto;}
.artefato-xp-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:8px;}
.artefato-xp-field input{background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:7px 9px;font-size:12.5px;color:var(--text);font-family:'IBM Plex Mono',monospace;width:84px;}
.artefato-xp-field input:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}
.artefato-xp-max{white-space:nowrap;font-family:'IBM Plex Mono',monospace;}
@media(max-width:640px){
  .monte-slot-combo-row--xp{grid-template-columns:1fr auto 1fr;}
  .artefato-xp-field{grid-column:1/-1;margin-left:0;}
  .artefato-xp-field input{flex:1;width:auto;}
}

/* Seletor de via de conversão Cupons/Lingotes/R$ (conversao/seletor.js) */
.conv-seletor{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:10px;}
.conv-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);}
.conv-field select{background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:7px 9px;font-size:12.5px;color:var(--text);font-family:'IBM Plex Mono',monospace;width:100%;min-width:0;}
.conv-field select:focus{outline:2px solid rgba(255,122,24,.3);outline-offset:1px;}

/* Linha "≈ Lingotes ≈ R$" dentro do cartão de PF (conversao/seletor.js -> linha()) */
.conv-linha{margin-top:6px;font-size:11px;line-height:1.5;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.pf-sobra-nota{margin-top:6px;font-size:11px;line-height:1.5;color:var(--or-300,var(--orange));}
.conv-linha-btn{background:none;border:0;padding:0;color:var(--t-mid,var(--muted));font:inherit;text-decoration:underline;cursor:pointer;}
.conv-linha-sel{margin-top:6px;}
.conv-linha-sel .conv-seletor{grid-template-columns:1fr;margin-top:4px;}

/* Qual melhor pergaminho? -- 2º atributo opcional, compacto na mesma linha da pílula do 1º (upgrade/guia-attr2.js) */
.guia-attr-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;}
.guia-attr2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.guia-attr2-add{background:none;border:1px dashed var(--border);border-radius:999px;padding:8px 13px;color:var(--t-mid,var(--muted));font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.guia-attr2-add:hover{border-color:var(--or);color:var(--text);}
.guia-attr2-pill{cursor:default;}
.guia-full-parts{display:block;font-size:11px;color:var(--muted);font-weight:400;}
.guia-attr-row .attr-combo-field{min-width:260px;}

/* Abas de evento "Em breve" (events/em-breve.js) */
.subtab-soon{position:relative;opacity:.78;}
.subtab-soon::after{content:attr(data-soon-label);margin-left:9px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--or-wash,rgba(255,122,24,.14));color:var(--or);border:1px solid var(--or-line,rgba(255,122,24,.4));animation:soon-badge 2s ease-in-out infinite;}
@keyframes soon-badge{0%,100%{opacity:.55}50%{opacity:1}}
.event-soon{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 20px 72px;gap:14px;}
.event-soon-orbit{position:relative;width:74px;height:74px;}
.event-soon-orbit i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--or);animation:soon-spin 1.6s linear infinite;}
.event-soon-orbit i:nth-child(2){inset:10px;border-top-color:var(--signal,#22d3ee);animation-duration:1.1s;animation-direction:reverse;}
.event-soon-orbit i:nth-child(3){inset:22px;border-top-color:var(--muted);animation-duration:.8s;}
@keyframes soon-spin{to{transform:rotate(360deg)}}
.event-soon-title{font-size:20px;font-weight:800;color:var(--text);}
.event-soon-dots b{display:inline-block;animation:soon-dot 1.2s ease-in-out infinite;}
.event-soon-dots b:nth-child(2){animation-delay:.2s;}
.event-soon-dots b:nth-child(3){animation-delay:.4s;}
@keyframes soon-dot{0%,80%,100%{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.event-soon-text{max-width:440px;margin:0;font-size:13.5px;line-height:1.55;color:var(--muted);}
@media (prefers-reduced-motion:reduce){.subtab-soon::after,.event-soon-orbit i,.event-soon-dots b{animation:none;}}

/* Posição exata (upgrade/posicao-exata.js) */
.posicao-exata-nota{margin:6px 0 0;}
.passos-linha{margin-top:6px;font-size:11.5px;color:var(--or);font-weight:600;}

/* Ajuda de Ninja: "Ver por atributo" (upgrade/ajuda-atributo.js) */
.ajuda-attr-panel{margin-top:16px;}
.ajuda-attr-panel select{background:#0c1015;border:1px solid #2a3139;border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text);min-width:200px;margin-bottom:10px;}

/* Eventos como hub de cards + página por evento (events/hub-eventos.js) */
#page-eventos .eventos-voltar{display:none;margin-bottom:14px;}
#page-eventos:not(.eventos-hub-mode) .eventos-voltar{display:inline-flex;}
#page-eventos:not(.eventos-hub-mode) .events-nav,
#page-eventos:not(.eventos-hub-mode) .events-intro{display:none;}
#page-eventos.eventos-hub-mode .subpage{display:none !important;}
#page-eventos.eventos-hub-mode .events-week-group .subtabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:12px;}
#page-eventos.eventos-hub-mode .events-week-group .subtab{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;min-height:104px;padding:16px;text-align:left;border-radius:14px;font-size:15px;line-height:1.3;}
#page-eventos.eventos-hub-mode .events-week-group .subtab::before{content:"";width:34px;height:34px;flex:none;background:no-repeat center/contain;opacity:.95;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4l3 2'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="arvore"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-6'/><path d='M12 15c-4 0-6-3-5-6 0-3 3-5 5-5s5 2 5 5c1 3-1 6-5 6z'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="cacaniqueis"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='12' rx='2'/><path d='M9 6v12M15 6v12'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="tabuleiro"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><circle cx='9' cy='9' r='1'/><circle cx='15' cy='15' r='1'/><circle cx='15' cy='9' r='1'/><circle cx='9' cy='15' r='1'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="tesouro"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10h16v9H4z'/><path d='M4 10a8 8 0 0 1 16 0'/><path d='M12 13v3'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="roleta"]::before,
#page-eventos.eventos-hub-mode .subtab[data-sub2="roletaCelebracao"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 3v18M3 12h18M6 6l12 12M18 6L6 18'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="aniversario"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='11' rx='1'/><path d='M12 9v11M3 13h18'/><path d='M12 9c-3-4-6-1-4 0zM12 9c3-4 6-1 4 0z'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="compensacao"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='5'/><path d='M14.5 12.5A5 5 0 1 1 12 19'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="fukurokumaru"]::before,
#page-eventos.eventos-hub-mode .subtab[data-sub2="seteDiasFerias"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="presentesAniversario"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4'/><path d='M12 8v13M5 12v9h14v-9M7.5 8a2.5 2.5 0 010-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 010 5'/></svg>");}
#page-eventos.eventos-hub-mode .subtab[data-sub2="consumoPedras"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="bandeiras"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="celebracao"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="ovosDourados"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="presenteRecarga"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="recargaAcumuladaS1"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="recargaDiaria"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="gastoAcumulado"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="premiosRecarga"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="grandeFesta"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="consumoDiario"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="jogadaSorte"]::before,#page-eventos.eventos-hub-mode .subtab[data-sub2="dezCaudas"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4'/><path d='M12 8v13M5 12v9h14v-9M7.5 8a2.5 2.5 0 010-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 010 5'/></svg>");}
#page-eventos.eventos-hub-mode .subtab-soon::after{margin:0;}
/* no hub nenhum card fica "selecionado": o .active da aba antiga não vale aqui */
#page-eventos.eventos-hub-mode .events-week-group .subtab,
#page-eventos.eventos-hub-mode .events-week-group .subtab.active{background:var(--card2);border:1px solid var(--border);color:var(--text);box-shadow:none;transform:none;}
#page-eventos.eventos-hub-mode .events-week-group .subtab:hover{border-color:var(--signal,#22d3ee);}

/* Pódio 1º/2º/3º em SVG próprio (upgrade/podio.js) */
.podio{margin:8px 0 22px;}
.podio-titulo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:700;}
.podio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;}
.podio-col{display:flex;flex-direction:column;align-items:stretch;position:relative;}
.podio-card{position:relative;z-index:1;margin-bottom:-6px;padding:26px 12px 14px;text-align:center;background:var(--card2);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px -16px var(--podio-glow);}
.podio-p1 .podio-card{border-color:rgba(247,215,116,.45);box-shadow:0 0 0 1px rgba(247,215,116,.16),0 16px 42px -12px var(--podio-glow);}
.podio-medalha{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--card2);border-radius:50%;padding:2px;}
.podio-nomes{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:2px;}
.podio-chip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;}
.podio-chip b{font-size:13.5px;font-weight:800;line-height:1.2;}
.podio-chip small{font-size:10.5px;color:var(--muted);font-weight:500;}
.mapa-icone{border-radius:6px;vertical-align:middle;margin-right:6px;}
.podio-nome{font-weight:800;font-size:14px;line-height:1.25;margin-bottom:2px;}
.podio-sub{font-size:11px;color:var(--muted);margin-bottom:8px;}
.podio-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:6px;}
.podio-pedestal{position:relative;display:block;line-height:0;}
.podio-pedestal svg{display:block;width:100%;}
.podio-num{position:absolute;left:0;right:0;top:50%;transform:translateY(-34%);text-align:center;font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:46px;line-height:1;opacity:.85;}
@media(max-width:640px){
  .podio-grid{grid-template-columns:1fr;gap:26px;}
  .podio-p1{order:1;}.podio-p2{order:2;}.podio-p3{order:3;}
  .podio-pedestal{display:none;}
  .podio-card{margin-bottom:0;}
}

/* Roupa: ranking de atributos (2026-09-20) -- 2 seletores compactos + pódio + lista do 4º em diante */
.traje-rank-selects{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 16px;}
.traje-rank-selects>div{flex:1 1 200px;min-width:0;}
.traje-rank-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.traje-rank-row{display:flex;gap:12px;align-items:flex-start;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;}
.traje-rank-pos{flex:0 0 auto;min-width:34px;font-weight:800;color:var(--muted);font-family:Archivo,Inter,sans-serif;}
.traje-rank-body{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;}
.traje-rank-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.traje-rank-attrs{justify-content:flex-start;}
.traje-rank-combate{font-size:11.5px;color:var(--muted);}

/* Pacotes → Invocações: cabeçalho único das 3 séries (2026-09-20) */
.invoc-serie-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.invoc-serie-icon{width:56px;height:56px;flex:0 0 auto;border-radius:14px;object-fit:cover;background:var(--bg-alt);border:1px solid var(--border);}
.invoc-serie-info{min-width:0;}
.invoc-serie-title{font-size:16px;font-weight:700;font-family:'Baloo 2',sans-serif;margin-bottom:2px;}
.invoc-serie-copy{color:var(--muted);font-size:13px;}

/* Invocações: progressão upgrade a upgrade compacta (2026-09-20) */
.invprog-serie{border:1px solid var(--border);border-radius:12px;background:var(--card2);margin-bottom:8px;overflow:hidden;}
.invprog-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;cursor:pointer;list-style:none;}
.invprog-summary::-webkit-details-marker{display:none;}
.invprog-nome{font-weight:800;font-family:Archivo,Inter,sans-serif;}
.invprog-resumo{color:var(--muted);font-size:12px;flex:1 1 auto;}
.invprog-chevron{color:var(--muted);transition:transform .15s;}
.invprog-serie[open] .invprog-chevron{transform:rotate(180deg);}
.invprog-body{border-top:1px solid var(--border);padding:4px 14px 8px;}
.invprog-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--border);font-size:12.5px;}
.invprog-row:last-child{border-bottom:0;}
.invprog-label{font-weight:700;color:var(--muted);}
.invprog-custo{text-align:right;white-space:nowrap;}
.invprog-custo small{color:var(--muted);}
.invprog-pa{grid-column:2 / -1;color:var(--green);font-size:11.5px;}
@media(max-width:640px){.invprog-row{grid-template-columns:52px minmax(0,1fr);}.invprog-custo{grid-column:2;text-align:left;white-space:normal;}}

/* Upgrade: UMA cor por tela (2026-09-20, pedido do usuário: cores diferentes
   entre abas/botões dentro do mesmo sistema). Dentro de um sistema, tudo que é
   "ação/seleção" segue a cor da família (--calcfam): aba ativa, botão principal
   (Calcular) e o "voltar". As pílulas de resultado continuam com cores de
   SIGNIFICADO (verde = ganho, laranja = custo, azul = eficiência) -- essas não
   mudam com a família. */
#sub3-calc .btn,.screen[data-fam] .btn{background:var(--calcfam);color:var(--calcfam-dark);box-shadow:none;}
#sub3-calc .btn:hover,.screen[data-fam] .btn:hover{filter:brightness(1.08);}
.screen[data-fam] .subtab.active{background:var(--calcfam);color:var(--calcfam-dark);box-shadow:none;}

/* eventos de referência: de onde vem o valor de um item (2026-09-20) */
.ref-fonte{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:1px;}
.quick-set button.active{background:var(--calcfam,var(--or));color:#111;border-color:transparent;}
.ref-gaveta-corpo{padding:12px 0 4px;}
.ref-gaveta .tier-summary-text{font-weight:700;}

/* "?" opcional com a origem do valor de um item (informação interna, fora da vista) */
.ref-help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--muted);font-size:10px;font-weight:700;margin-left:6px;cursor:help;position:relative;vertical-align:middle;}
.ref-help:hover,.ref-help:focus{background:var(--calcfam,var(--or));color:#111;outline:none;}
.ref-help:hover::after,.ref-help:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:135%;transform:translateX(-50%);width:max-content;max-width:min(260px,70vw);background:var(--card2,#1a2030);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11.5px;font-weight:400;color:var(--text);white-space:normal;text-align:left;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.4);}

/* ---- Dashboard > Permissões: ações de parceiro + Cupons de desconto (2026-09-21) ---- */
#page-dashboard .perm-item-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
#page-dashboard .perm-item button.btn-edit{border-color:var(--dsh-border-strong);color:var(--dsh-accent-strong);}
#page-dashboard .perm-item button.btn-edit:hover{background:var(--dsh-accent-soft);}
#page-dashboard .btn-outline{background:transparent;border:1px solid var(--dsh-border-strong);color:var(--dsh-accent-strong);border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;}
#page-dashboard .btn-outline:hover{background:var(--dsh-accent-soft);}
#page-dashboard .perm-add-row .btn-outline{background:transparent;color:var(--dsh-accent-strong);}

#page-dashboard .cupom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-bottom:18px;}
#page-dashboard .cupom-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;border:1px dashed var(--dsh-border-strong);border-radius:14px;background:var(--dsh-card);color:var(--dsh-muted);text-align:center;}
#page-dashboard .cupom-empty span{font-size:30px;}
#page-dashboard .cupom-empty p{margin:0;font-size:13px;}
#page-dashboard .cupom-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:linear-gradient(160deg,var(--dsh-card2),var(--dsh-card));border:1px solid var(--dsh-border);position:relative;overflow:hidden;}
#page-dashboard .cupom-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--dsh-accent),var(--dsh-gold));}
#page-dashboard .cupom-card.is-disabled{opacity:.6;}
#page-dashboard .cupom-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
#page-dashboard .cupom-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--dsh-text);background:var(--dsh-accent-soft);border:1px dashed var(--dsh-border-strong);border-radius:8px;padding:4px 10px;}
#page-dashboard .cupom-owner{display:block;margin-top:5px;font-size:12px;color:var(--dsh-muted);}
#page-dashboard .cupom-status{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap;}
#page-dashboard .cupom-status.is-ok{color:#5fd98a;background:rgba(63,191,107,.12);border-color:rgba(63,191,107,.35);}
#page-dashboard .cupom-status.is-warn{color:var(--dsh-gold);background:var(--dsh-gold-soft);border-color:rgba(227,166,62,.4);}
#page-dashboard .cupom-status.is-off{color:var(--dsh-muted);background:rgba(148,143,176,.12);border-color:var(--dsh-border);}
#page-dashboard .cupom-rows{display:flex;flex-direction:column;gap:6px;}
#page-dashboard .cupom-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:rgba(144,133,233,.07);font-size:12.5px;color:var(--dsh-text);}
#page-dashboard .cupom-row.is-none{grid-template-columns:1fr auto;background:transparent;border:1px dashed var(--dsh-border);color:var(--dsh-muted);}
#page-dashboard .cupom-none{font-size:11.5px;font-style:italic;}
#page-dashboard .cupom-prices{display:inline-flex;align-items:baseline;gap:7px;}
#page-dashboard .cupom-prices s{color:var(--dsh-muted);font-size:11px;}
#page-dashboard .cupom-prices b{color:var(--dsh-text);font-size:13.5px;}
#page-dashboard .cupom-badge{font-size:11px;font-weight:800;color:#111;background:var(--dsh-gold);border-radius:6px;padding:2px 7px;}
#page-dashboard .cupom-usage small{display:block;margin-top:6px;font-size:11px;color:var(--dsh-muted);}
#page-dashboard .cupom-bar{height:6px;border-radius:99px;background:rgba(144,133,233,.16);overflow:hidden;}
#page-dashboard .cupom-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--dsh-accent),var(--dsh-accent-strong));}
#page-dashboard .cupom-actions{display:flex;gap:6px;flex-wrap:wrap;}
#page-dashboard .cupom-actions button{flex:1;min-width:70px;background:transparent;border:1px solid var(--dsh-border-strong);color:var(--dsh-accent-strong);border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;cursor:pointer;}
#page-dashboard .cupom-actions button:hover{background:var(--dsh-accent-soft);}
#page-dashboard .cupom-actions button[data-cupom-del]{border-color:rgba(224,113,106,.35);color:#f0a89f;}

#page-dashboard .cupom-form{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:14px;background:var(--dsh-card);border:1px solid var(--dsh-border);}
#page-dashboard .cupom-form-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#page-dashboard .cupom-form-head h4{margin:0;font-size:15px;color:var(--dsh-text);}
#page-dashboard .cupom-form-top{display:grid;grid-template-columns:1.2fr 1.2fr auto;gap:12px;align-items:end;}
#page-dashboard .cupom-form .perm-field{display:flex;flex-direction:column;gap:4px;}
#page-dashboard .cupom-form .perm-field-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dsh-muted);}
#page-dashboard .cupom-form input{width:100%;min-width:0;box-sizing:border-box;background:var(--dsh-card2);border:1px solid var(--dsh-border);border-radius:9px;padding:9px 11px;color:var(--dsh-text);font-size:13px;font-family:inherit;color-scheme:dark;}
#page-dashboard .cupom-form input:focus{outline:none;border-color:var(--dsh-accent);}
#page-dashboard .cupom-seg{display:inline-flex;border:1px solid var(--dsh-border-strong);border-radius:9px;overflow:hidden;}
#page-dashboard .cupom-seg button{background:transparent;border:none;color:var(--dsh-muted);padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;}
#page-dashboard .cupom-seg button.active{background:var(--dsh-accent);color:#fff;}
#page-dashboard .cupom-plans-title{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dsh-muted);}
#page-dashboard .cupom-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
#page-dashboard .cupom-plan{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;background:var(--dsh-card2);border:1px solid var(--dsh-border);}
#page-dashboard .cupom-plan-name{font-size:12px;font-weight:800;color:var(--dsh-text);}
#page-dashboard .cupom-plan-input{position:relative;}
#page-dashboard .cupom-plan-input input{padding-left:34px;font-weight:700;}
#page-dashboard .cupom-unit{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;color:var(--dsh-accent-strong);pointer-events:none;}
#page-dashboard .cupom-plan-preview{font-size:11.5px;color:var(--dsh-muted);min-height:16px;}
#page-dashboard .cupom-plan-preview s{opacity:.7;}
#page-dashboard .cupom-plan-preview.has-value b{color:#5fd98a;font-size:13px;}
#page-dashboard .cupom-form-bottom{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;}
@media(max-width:700px){
  #page-dashboard .cupom-form-top,#page-dashboard .cupom-form-bottom{grid-template-columns:1fr;}
}

/* ---- Caixa de confirmação (js/core/confirm-modal.js) ---- */
.wpg-confirm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,5,10,.66);backdrop-filter:blur(5px);animation:wpgConfirmFade .16s ease-out;}
.wpg-confirm.is-leaving{opacity:0;transition:opacity .14s;}
.wpg-confirm-card{width:min(380px,100%);box-sizing:border-box;text-align:center;padding:26px 24px 22px;border-radius:18px;background:linear-gradient(165deg,#1b1b2c,#12121d);border:1px solid rgba(144,133,233,.28);box-shadow:0 24px 70px rgba(0,0,0,.6);animation:wpgConfirmPop .2s cubic-bezier(.2,1.1,.3,1);color:#f5f4fc;}
.wpg-confirm-icon{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:50%;background:rgba(144,133,233,.16);}
.wpg-confirm-card.is-danger .wpg-confirm-icon{background:rgba(224,113,106,.16);box-shadow:0 0 0 6px rgba(224,113,106,.07);}
.wpg-confirm-card h3{margin:0 0 6px;font-size:17px;font-weight:800;}
.wpg-confirm-card p{margin:0 0 20px;font-size:13.5px;line-height:1.45;color:#a7a2c4;}
.wpg-confirm-actions{display:flex;gap:10px;}
.wpg-confirm-actions button{flex:1;padding:11px 14px;border-radius:11px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;border:1px solid transparent;}
.wpg-confirm-cancel{background:transparent;border-color:rgba(144,133,233,.34)!important;color:#c9c4ef;}
.wpg-confirm-cancel:hover{background:rgba(144,133,233,.12);}
.wpg-confirm-ok{background:#9085e9;color:#fff;}
.wpg-confirm-card.is-danger .wpg-confirm-ok{background:#e0716a;color:#1a0b0a;}
.wpg-confirm-ok:hover{filter:brightness(1.1);}
@keyframes wpgConfirmFade{from{opacity:0}to{opacity:1}}
@keyframes wpgConfirmPop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
#page-dashboard .perm-item button.btn-link{background:var(--dsh-accent-soft);border-color:var(--dsh-border-strong);color:var(--dsh-accent-strong);}
#page-dashboard .perm-item button.btn-link:hover{background:rgba(144,133,233,.26);}
#page-dashboard .perm-link-line{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--dsh-accent-strong)!important;word-break:break-all;}

/* ---- Dashboard > Permissões: mesmo visual de cartões em TODAS as abas
   (Moderadores, Criadores, Parceiro Criador, Founders) -- 2026-09-21 ---- */
#page-dashboard [hidden]{display:none!important;}
#page-dashboard .perm-subpanel .perm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-bottom:18px;}
#page-dashboard .perm-subpanel .perm-item{position:relative;overflow:hidden;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;margin:0;padding:16px;border-radius:14px;background:linear-gradient(160deg,var(--dsh-card2),var(--dsh-card));border:1px solid var(--dsh-border);}
#page-dashboard .perm-subpanel .perm-item::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--dsh-accent),var(--dsh-gold));}
#page-dashboard .perm-subpanel .perm-item strong{display:block;font-size:15px;color:var(--dsh-text);}
#page-dashboard .perm-subpanel .perm-item small{line-height:1.6;word-break:break-word;}
#page-dashboard .perm-subpanel .perm-item > button{width:100%;padding:7px 10px;border-radius:8px;}
#page-dashboard .perm-subpanel .perm-item > span{display:flex!important;gap:6px;flex-wrap:wrap;}
#page-dashboard .perm-subpanel .perm-item > span > button{flex:1;min-width:76px;padding:7px 10px;border-radius:8px;}
#page-dashboard .perm-subpanel .perm-empty{grid-column:1/-1;text-align:center;padding:26px 16px;border:1px dashed var(--dsh-border-strong);border-radius:14px;background:var(--dsh-card);color:var(--dsh-muted);}
#page-dashboard .perm-subpanel .perm-add-row{padding:18px;border-radius:14px;background:var(--dsh-card);border:1px solid var(--dsh-border);gap:12px;}
#page-dashboard .perm-subpanel .perm-add-row input{background:var(--dsh-card2);border:1px solid var(--dsh-border);border-radius:9px;padding:10px 12px;font-size:13px;color-scheme:dark;}
#page-dashboard .perm-subpanel .perm-add-row input:focus{outline:none;border-color:var(--dsh-accent);}
#page-dashboard .perm-subpanel .perm-add-row > .btn,#page-dashboard .perm-subpanel .perm-add-row > .btn-outline{flex:1 1 100%;}

/* ---- Dashboard > Assinantes VIP: cartões (mesmo visual do Parceiro Criador) ---- */
#page-dashboard .vip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:18px;background:transparent;}
#page-dashboard .vip-summary{grid-column:1/-1;font-size:12.5px;color:var(--dsh-muted);}
#page-dashboard .vip-summary b{color:var(--dsh-text);font-size:15px;}
#page-dashboard .vip-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:linear-gradient(160deg,var(--dsh-card2),var(--dsh-card));border:1px solid var(--dsh-border);}
#page-dashboard .vip-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--dsh-gold),var(--dsh-accent));}
#page-dashboard .vip-card.is-disabled{opacity:.6;}
#page-dashboard .vip-card-head{display:flex;align-items:center;gap:10px;}
#page-dashboard .vip-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--dsh-accent),#6d63d6);}
#page-dashboard .vip-who{min-width:0;flex:1;}
#page-dashboard .vip-who strong{display:block;font-size:14.5px;color:var(--dsh-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page-dashboard .vip-who small{display:block;font-size:10.5px;color:var(--dsh-muted);}
#page-dashboard .vip-status{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid transparent;}
#page-dashboard .vip-status.is-ok{color:#5fd98a;background:rgba(63,191,107,.12);border-color:rgba(63,191,107,.35);}
#page-dashboard .vip-status.is-warn{color:var(--dsh-gold);background:var(--dsh-gold-soft);border-color:rgba(227,166,62,.4);}
#page-dashboard .vip-status.is-off{color:var(--dsh-muted);background:rgba(148,143,176,.12);border-color:var(--dsh-border);}
#page-dashboard .vip-tags{display:flex;gap:6px;flex-wrap:wrap;}
#page-dashboard .vip-plan{font-size:11.5px;font-weight:800;color:#111;background:var(--dsh-gold);border-radius:7px;padding:3px 9px;}
#page-dashboard .vip-src{font-size:11.5px;font-weight:700;color:var(--dsh-accent-strong);background:var(--dsh-accent-soft);border:1px solid var(--dsh-border-strong);border-radius:7px;padding:3px 9px;}
#page-dashboard .vip-dates{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#page-dashboard .vip-dates div{padding:8px 10px;border-radius:9px;background:rgba(144,133,233,.07);}
#page-dashboard .vip-dates dt{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dsh-muted);}
#page-dashboard .vip-dates dd{margin:3px 0 0;font-size:12.5px;font-weight:700;color:var(--dsh-text);}
#page-dashboard .vip-dates dd small{display:block;font-size:10.5px;font-weight:600;color:var(--dsh-muted);}
#page-dashboard .vip-bar{height:6px;border-radius:99px;background:rgba(144,133,233,.16);overflow:hidden;}
#page-dashboard .vip-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--dsh-gold),var(--dsh-accent-strong));}

/* ---- Dashboard > Usuários: cartões, busca e filtros (2026-09-21) ---- */
#page-dashboard .usr-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
#page-dashboard .usr-toolbar input[type="search"]{flex:1 1 240px;min-width:0;box-sizing:border-box;background:var(--dsh-card2);border:1px solid var(--dsh-border);border-radius:10px;padding:10px 13px;color:var(--dsh-text);font-size:13px;font-family:inherit;color-scheme:dark;}
#page-dashboard .usr-toolbar input[type="search"]:focus{outline:none;border-color:var(--dsh-accent);}
#page-dashboard .usr-filters{display:inline-flex;border:1px solid var(--dsh-border-strong);border-radius:10px;overflow:hidden;}
#page-dashboard .usr-filters button{background:transparent;border:none;color:var(--dsh-muted);padding:9px 14px;font-size:12.5px;font-weight:800;cursor:pointer;}
#page-dashboard .usr-filters button.active{background:var(--dsh-accent);color:#fff;}
#page-dashboard .usr-count{font-size:12px;color:var(--dsh-muted);white-space:nowrap;}
#page-dashboard .usr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-bottom:18px;background:transparent;}
#page-dashboard .usr-grid .perm-empty{grid-column:1/-1;text-align:center;padding:26px 16px;border:1px dashed var(--dsh-border-strong);border-radius:14px;background:var(--dsh-card);color:var(--dsh-muted);}
#page-dashboard .usr-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:linear-gradient(160deg,var(--dsh-card2),var(--dsh-card));border:1px solid var(--dsh-border);}
#page-dashboard .usr-head{display:flex;align-items:center;gap:10px;}
#page-dashboard .usr-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--dsh-accent),#6d63d6);}
#page-dashboard .usr-who{min-width:0;flex:1;}
#page-dashboard .usr-who strong{display:block;font-size:14px;color:var(--dsh-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page-dashboard .usr-who small{display:block;font-size:10px;color:var(--dsh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page-dashboard .usr-badges{flex:none;display:flex;align-items:center;gap:5px;}
#page-dashboard .usr-tags{display:flex;gap:6px;flex-wrap:wrap;}
#page-dashboard .usr-login{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:9px;background:rgba(144,133,233,.07);font-size:11px;color:var(--dsh-muted);}
#page-dashboard .usr-login b{font-size:12.5px;color:var(--dsh-text);}

.event-result-card[hidden]{display:none!important;}

/* Jogos: "Guias" e "Linha do Tempo" lado a lado (2026-09-21) -- economiza espaço vertical; empilha no celular */
.jogos-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin-bottom:28px;align-items:start;}
.jogos-duo>.jogos-group{margin-bottom:0;}
@media(max-width:780px){.jogos-duo{grid-template-columns:1fr;}}
.game-card-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;}
.game-card-chip{display:inline-block;padding:5px 11px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:600;color:var(--t-mid,var(--muted));cursor:pointer;background:transparent;transition:.15s;}
.game-card-chip:hover,.game-card-chip:focus-visible{border-color:#2dd4bf;color:#2dd4bf;outline:none;}

/* Guias: abas em botão redondo, mesmo desenho das abas de Pacotes */
#page-guias .guias-tabs{background:none;border:none;padding:0;position:static;backdrop-filter:none;box-shadow:none;gap:8px;margin-bottom:18px;}
#page-guias .guias-tabs .subtab{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px;padding:10px 18px;font-size:14px;min-width:0;box-shadow:none;}
#page-guias .guias-tabs .subtab.active{background:var(--or-wash,rgba(32,211,224,.14));border-color:var(--or);color:var(--or-300,var(--or));box-shadow:none;}
#page-guias .guias-tabs .subtab:hover:not(.active){border-color:var(--muted);}

/* Hub de Eventos: rótulos "Eventos" / "Ferramentas" dentro de cada semana (2026-09-23, mockup aprovado:
   docs/mockups/eventos/hub-eventos-semanas.html). Ferramentas = combos VIP, em dourado. */
.events-row-label{display:flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid);margin:2px 0 8px;}
.events-row-label::after{content:"";flex:1;height:1px;background:var(--border);}
.events-row-label small{font:500 11px var(--body);letter-spacing:0;text-transform:none;color:var(--t-low);}
.events-row-label.events-row-ferr{margin-top:14px;}
#page-eventos.eventos-hub-mode .events-week-group .events-ferramentas .subtab,
#page-eventos.eventos-hub-mode .events-week-group .events-ferramentas .subtab.active{background:linear-gradient(180deg,rgba(227,179,65,.10),rgba(227,179,65,.03));border-color:rgba(227,179,65,.32);}
#page-eventos.eventos-hub-mode .events-week-group .events-ferramentas .subtab:hover{border-color:var(--gold);}
#page-eventos.eventos-hub-mode .subtab[data-sub2="trincaRecarga"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b341' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='12' r='3'/><circle cx='17' cy='7' r='3'/><circle cx='17' cy='17' r='3'/><path d='M10 12h2l2-4M12 12l2 4'/></svg>");}