/* ============================================================================
   FOR GLORY — fg-ui.css (v40)
   Sistema de design "liso": superfícies suaves, cantos consistentes, contraste
   legível, animações curtas só com transform/opacity (60 fps) e nada de
   backdrop-filter em elementos que se repetem (era o maior custo de GPU).
   Carregado DEPOIS de app.css e legacy.css: aqui moram os componentes novos
   (perfil, troféus, mural, chamadas, notícias, transparência, quiz…) e os
   ajustes finos dos antigos.
   ============================================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --fg-bg: #07090f;
    --fg-bg-2: #0b0e16;
    --fg-surface: rgba(255, 255, 255, .035);
    --fg-surface-2: rgba(255, 255, 255, .06);
    --fg-surface-3: rgba(255, 255, 255, .09);
    --fg-solid: #10141e;
    --fg-solid-2: #151a26;
    --fg-solid-3: #1b2130;
    --fg-bg-rgb: 7, 9, 15;
    --fg-bg2-rgb: 11, 14, 22;
    --fg-solid-rgb: 16, 20, 30;
    --fg-line: rgba(255, 255, 255, .07);
    --fg-line-2: rgba(255, 255, 255, .12);
    --fg-text: #e8eaf0;
    --fg-text-2: #b8bfcd;
    --fg-muted: #8a93a6;
    --fg-muted-2: #5c6577;
    --fg-accent: #66fcf1;
    --fg-accent-rgb: 102, 252, 241;
    --fg-accent-2: #45d5f5;
    --fg-accent-soft: rgba(var(--fg-accent-rgb), .12);
    --fg-accent-line: rgba(var(--fg-accent-rgb), .32);
    --fg-violet: #a78bfa;
    --fg-ink: #041016;
    --fg-good: #34d399;
    --fg-warn: #f5b942;
    --fg-bad: #ff5c7a;
    --fg-gold: #ffd166;
    --fg-r-xs: 8px;
    --fg-r-sm: 10px;
    --fg-r: 14px;
    --fg-r-lg: 20px;
    --fg-r-xl: 26px;
    --fg-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --fg-shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
    --fg-ease: cubic-bezier(.2, .8, .2, 1);
    --fg-spring: cubic-bezier(.34, 1.4, .64, 1);
    --fg-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fg-display: 'Syne', 'DM Sans', system-ui, sans-serif;
    --fg-label: 'Rajdhani', 'DM Sans', system-ui, sans-serif;
    --fg-safe-b: env(safe-area-inset-bottom, 0px);

    /* variáveis antigas reaproveitadas pelo app.css */
    --dark-bg: var(--fg-bg);
    --card-bg: var(--fg-solid);
    --card-2: var(--fg-solid-3);
    --border-2: var(--fg-line);
    --text-muted: var(--fg-muted);
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fg-font);
    color: var(--fg-text);
    background-color: var(--fg-bg);
    /* temas VIP trocam a arte do fundo por --fg-body-art (só gradientes/SVG: zero download) */
    background-image: var(--fg-body-art,
        radial-gradient(1200px 600px at 50% -200px, rgba(var(--fg-accent-rgb), .07), transparent 70%),
        radial-gradient(800px 500px at 100% 100%, rgba(167, 139, 250, .05), transparent 70%));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(var(--fg-accent-rgb), .28); color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { image-rendering: auto; }
a { color: var(--fg-accent); }
:focus-visible { outline: 2px solid rgba(var(--fg-accent-rgb), .7); outline-offset: 2px; }
/* campos de texto já mostram o foco na própria borda — sem anel duplo */
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: none; }
.news-search:focus-within { border-color: rgba(var(--fg-accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--fg-accent-rgb), .08); }
.hidden { display: none !important; }
/* o atributo hidden precisa vencer classes que definem display (ex.: .mural-drop-empty) */
[hidden] { display: none !important; }
.muted-note { color: var(--fg-muted); font-size: 12px; line-height: 1.5; }
.muted-note.pad { padding: 8px 4px; }
.center { text-align: center; }
.noscript { padding: 40px; text-align: center; color: var(--fg-text); }
body.no-scroll { overflow: hidden; }

* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── 3. Estrutura: menu lateral e telas ────────────────────────────────────── */
#sidebar {
    width: 74px;
    background: var(--fg-sidebar-bg, linear-gradient(180deg, rgba(var(--fg-bg2-rgb), .96), rgba(var(--fg-bg-rgb), .98)));
    backdrop-filter: none;
    border-right: 1px solid var(--fg-line);
    gap: 6px;
    padding: 14px 0 16px;
}
.nav-btn {
    width: 50px; height: 50px;
    border-radius: 15px;
    color: var(--fg-muted);
    transition: background .18s var(--fg-ease), color .18s var(--fg-ease), transform .18s var(--fg-ease);
}
.nav-btn:hover { background: var(--fg-surface-2); color: var(--fg-text); }
.nav-btn:active { transform: scale(.94); }
.nav-btn.active { background: var(--fg-accent-soft); color: var(--fg-accent); box-shadow: inset 0 0 0 1px rgba(var(--fg-accent-rgb), .22); }
.nav-btn.active::after { box-shadow: none; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-label { display: none; }
.nav-spacer { flex: 1; }
.nav-vip { color: #e9c46a; }
.nav-vip.active { color: var(--fg-gold); background: rgba(255, 209, 102, .12); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .3); }
.nav-me { margin-bottom: 6px; }
.my-avatar-mini { width: 42px; height: 42px; background: var(--fg-solid-2); }
.nav-badge { min-width: 18px; text-align: center; padding: 2px 5px; border-radius: 10px; font-size: 10px; line-height: 12px; box-shadow: none; }

/* overflow: clip (e não hidden): um elemento com overflow:hidden ainda pode ser
   rolado pelo navegador — ao focar um campo, o Chrome empurrava a área inteira
   para cima e a tela ficava cortada, sem barra para voltar. "clip" não rola nunca. */
/* min-height/min-width 0: com overflow:clip o item flex deixa de ser contêiner de
   rolagem e voltaria a crescer com o conteúdo — isso mantém a altura presa à tela */
#app, #content-area { overflow: hidden; overflow: clip; min-height: 0; min-width: 0; }
#content-area { background: transparent; }
.view { padding-bottom: 0; }
.view:has(> .view-scroll) { overflow: hidden; overflow: clip; min-height: 0; }
.view.active { animation: fgViewIn .22s var(--fg-ease); }
@keyframes fgViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view > .view-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view-scroll.pad { padding: 16px 18px 40px; }
.view-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--fg-line);
    background: var(--fg-head-bg, linear-gradient(180deg, rgba(255, 255, 255, .025), transparent));
    flex-shrink: 0;
}
.view-title { font-family: var(--fg-display); font-weight: var(--fg-display-w, 800); font-size: var(--fg-title-size, 19px); letter-spacing: var(--fg-title-ls, .4px); color: var(--fg-title, #fff); }
.view-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.view-tools { padding: 12px 18px 4px; flex-shrink: 0; }
.view-tools .search-glass { margin-bottom: 4px; }
.tabs-bar { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--fg-line); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.tabs-bar::-webkit-scrollbar { display: none; }

/* ── 4. Controles ──────────────────────────────────────────────────────────── */
.btn-main {
    border-radius: var(--fg-btn-r, 12px);
    background: var(--fg-btn-bg, linear-gradient(135deg, var(--fg-accent) 0%, var(--fg-accent-2) 100%));
    color: var(--fg-btn-ink, var(--fg-ink));
    font-family: var(--fg-label);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 13px 18px;
    box-shadow: var(--fg-btn-shadow, 0 6px 18px rgba(var(--fg-accent-rgb), .18));
    transition: transform .16s var(--fg-ease), box-shadow .2s var(--fg-ease), filter .2s;
}
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--fg-accent-rgb), .28); filter: brightness(1.04); }
.btn-main:active { transform: scale(.985); }
.btn-main:disabled, .btn-main[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3); }
.btn-main.danger { background: linear-gradient(135deg, #ff5c7a, #e0435f); color: #fff; box-shadow: 0 6px 18px rgba(255, 92, 122, .2); }

.glass-btn {
    background: var(--fg-surface-2);
    border: 1px solid var(--fg-line-2);
    color: var(--fg-text-2);
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
    font-weight: 600;
    transition: background .16s var(--fg-ease), border-color .16s var(--fg-ease), color .16s, transform .16s var(--fg-ease);
}
.glass-btn:hover { background: var(--fg-surface-3); border-color: var(--fg-accent-line); color: #fff; transform: translateY(-1px); box-shadow: none; }
.glass-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.glass-btn.sm { flex: none; padding: 8px 13px; font-size: 12px; margin: 0; border-radius: 10px; }
.glass-btn.icon { padding: 8px 11px; }
.glass-btn.ghost { background: transparent; }
.glass-btn.accent { color: var(--fg-accent); border-color: rgba(var(--fg-accent-rgb), .3); }
.glass-btn.violet { color: #c4b5fd; border-color: rgba(167, 139, 250, .38); background: rgba(167, 139, 250, .1); }
.glass-btn.gold { color: var(--fg-gold); border-color: rgba(255, 209, 102, .3); }
.danger-btn { border-radius: 12px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > * { flex: 1 1 160px; margin: 0 !important; width: auto !important; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.btn-col > * { margin: 0 !important; }
.btn-link { margin-top: 6px; font-size: 13px; color: var(--fg-muted); }
.btn-link.accent { color: var(--fg-accent); }
.link-btn { background: none; border: none; color: var(--fg-accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--fg-bad); }

.icon-btn { background: var(--fg-surface-2); border-color: var(--fg-line); color: var(--fg-muted); }
.icon-btn:hover { transform: none; background: var(--fg-surface-3); }
.icon-btn.sm { width: 34px; height: 34px; flex: 0 0 34px; font-size: 15px; }
.icon-btn.ghost { background: transparent; border-color: transparent; }
.icon-btn.ghost:hover { color: var(--fg-bad); background: rgba(255, 92, 122, .08); }

.chip, .chip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--fg-line-2);
    background: var(--fg-surface);
    color: var(--fg-text-2);
    font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .15s var(--fg-ease);
}
.chip:hover, .chip-btn:hover { background: var(--fg-surface-2); border-color: var(--fg-accent-line); color: #fff; }
.chip:active, .chip-btn:active { transform: scale(.96); }
.chip.active { background: var(--fg-accent-soft); border-color: rgba(var(--fg-accent-rgb), .45); color: var(--fg-accent); }
.chip em { font-style: normal; opacity: .7; font-weight: 700; }
.chip.ok, .chip-btn.ok { color: var(--fg-good); border-color: rgba(52, 211, 153, .35); }
.chip.danger, .chip-btn.danger { color: var(--fg-bad); border-color: rgba(255, 92, 122, .35); }
.chip.warn, .chip-btn.warn { color: var(--fg-warn); border-color: rgba(245, 185, 66, .35); }
.chip.accent { color: var(--fg-accent); border-color: rgba(var(--fg-accent-rgb), .4); background: var(--fg-accent-soft); }
.chip:disabled, .chip-btn:disabled { opacity: .55; cursor: default; transform: none; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.count-pill { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--fg-accent-soft); color: var(--fg-accent); font-size: 11px; font-weight: 700; text-align: center; }
.count-pill:empty { display: none; }

.inp, .gs-input, .styled-select, .loc-select, .inp-area, .fgc-field select, .fgc-field input, .fgc-field textarea {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--fg-line-2);
    border-radius: 12px;
    color: var(--fg-text);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.inp:focus, .gs-input:focus, .styled-select:focus, .loc-select:focus, .inp-area:focus,
.fgc-field select:focus, .fgc-field input:focus, .fgc-field textarea:focus {
    outline: none; border-color: rgba(var(--fg-accent-rgb), .55); background: rgba(var(--fg-accent-rgb), .04); box-shadow: 0 0 0 3px rgba(var(--fg-accent-rgb), .1);
}
.inp-area { width: 100%; padding: 11px 14px; resize: vertical; min-height: 44px; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.gs-input { padding: 10px 14px; font-size: 14px; width: 100%; box-sizing: border-box; }
.form-stack { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.form-stack > .inp, .form-stack > .styled-select { margin: 0; }
.form-stack > .btn-main { margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid > * { margin: 0 !important; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }
.form-error { color: #ff8fa3; font-size: 12px; margin-top: 8px; }
.file-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg-muted); text-align: left; }
.file-field input[type=file] { font-size: 12px; color: var(--fg-text-2); padding: 9px; border: 1px dashed var(--fg-line-2); border-radius: 12px; background: var(--fg-surface); }
.file-field input[type=file]::file-selector-button { border: none; border-radius: 8px; padding: 6px 12px; margin-right: 10px; background: var(--fg-accent-soft); color: var(--fg-accent); font-weight: 600; cursor: pointer; }
.fgc-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg-muted); text-align: left; }
.fgc-field > span { font-weight: 600; letter-spacing: .2px; }
.fgc-field select, .fgc-field input { padding: 10px 12px; font-size: 14px; width: 100%; box-sizing: border-box; }
select option { background: var(--fg-solid-2); color: var(--fg-text); }

.search-glass { border-radius: 999px; background: rgba(255, 255, 255, .045); border-color: var(--fg-line-2); padding: 2px 6px 2px 14px; gap: 8px; margin-bottom: 0; }
.search-glass:focus-within { border-color: rgba(var(--fg-accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--fg-accent-rgb), .08); }
.search-glass > span { opacity: .6; font-size: 14px; }
.search-glass input::-webkit-search-cancel-button { filter: invert(.7); }
.search-go, .search-clear { background: none; border: none; color: var(--fg-muted); cursor: pointer; padding: 8px 10px; border-radius: 999px; font-size: 14px; }
.search-go:hover { color: var(--fg-accent); }
.search-clear:hover { color: var(--fg-bad); }

/* Interruptor (usado em Configurações e na chamada) */
/* navegador sem captura de tela (celular): some com os botões de transmitir */
.fg-no-screen-share [data-screen-share] { display: none !important; }
.fgc-switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; text-align: left; }
.fgc-switch input { position: absolute; top: 50%; left: 2px; margin: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fgc-switch-ui { position: relative; flex: 0 0 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .18s var(--fg-ease); }
.fgc-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s var(--fg-spring); }
.fgc-switch input:checked + .fgc-switch-ui { background: linear-gradient(135deg, var(--fg-accent), #3fd0ee); }
.fgc-switch input:checked + .fgc-switch-ui::after { transform: translateX(18px); }
.fgc-switch input:focus-visible + .fgc-switch-ui { outline: 2px solid rgba(var(--fg-accent-rgb), .7); outline-offset: 2px; }
.fgc-switch input:disabled + .fgc-switch-ui { opacity: .4; }
.fgc-switch-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fgc-switch-txt b { font-size: 14px; color: var(--fg-text); font-weight: 600; }
.fgc-switch-txt small { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }

/* Barras de progresso */
.pf-bar { position: relative; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pf-bar > i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--fg-accent), var(--fg-violet)); transition: width .6s var(--fg-ease); }

/* ── 5. Estados (carregando, vazio, esqueleto) ─────────────────────────────── */
.pf-loading, .chat-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 0; color: var(--fg-muted); font-size: 13px; }
.news-spinner { width: 26px; height: 26px; border-width: 2px; border-color: rgba(var(--fg-accent-rgb), .15); border-top-color: var(--fg-accent); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.empty-state.small { padding: 18px 12px; font-size: 13px; }
.empty-state .glass-btn, .empty-state .btn-main { flex: none; width: auto; margin-top: 6px; padding: 10px 18px; }
.empty-ico { font-size: 38px; line-height: 1; opacity: .9; }
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fg-muted); text-align: center; font-size: 14px; padding: 30px 20px; }
.news-empty { color: var(--fg-muted); }

@keyframes fgShimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.sk-row, .sk-card, .sk-hero, .sk-line, .sk-avatar {
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .09) 40%, rgba(255, 255, 255, .04) 80%);
    background-size: 800px 100%;
    animation: fgShimmer 1.3s linear infinite;
    border-radius: 12px;
}
.skeleton-list { display: flex; flex-direction: column; gap: 10px; }
.sk-row { height: 66px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; grid-column: 1 / -1; }
.sk-card { height: 170px; }
.sk-hero { height: 220px; margin-bottom: 14px; }
.sk-line { height: 14px; margin: 8px 0; }
.sk-line.w25 { width: 25%; } .sk-line.w40 { width: 40%; } .sk-line.w90 { width: 90%; }
.sk-avatar { width: 100%; height: 100%; border-radius: 50%; }

/* ── 6. Toast e modais ─────────────────────────────────────────────────────── */
#toast {
    top: auto; bottom: calc(26px + var(--fg-safe-b));
    background: rgba(var(--fg-solid-rgb), .96);
    color: var(--fg-text);
    border: 1px solid var(--fg-line-2);
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 14px; font-weight: 600;
    max-width: min(92vw, 460px);
    box-shadow: var(--fg-shadow-lg);
    backdrop-filter: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity .2s var(--fg-ease), transform .25s var(--fg-ease), visibility .2s;
}
#toast.show { transform: translateX(-50%) translateY(0); }
/* acima do painel da chamada (10020) — senão os avisos ficavam escondidos atrás dele */
#toast { z-index: 10060; }

.modal { background: rgba(3, 5, 9, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 12px; }
.modal-box {
    background: linear-gradient(180deg, var(--fg-solid-2), var(--fg-solid));
    border: 1px solid var(--fg-line-2);
    border-radius: 22px;
    box-shadow: var(--fg-shadow-lg);
    padding: 22px;
    max-width: 420px;
    animation: fgPop .22s var(--fg-spring);
}
@keyframes fgPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-box.modal-wide { max-width: 640px; width: 94%; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -2px 0 16px; text-align: left; }
.modal-title { font-family: var(--fg-display); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: .3px; }
.modal-sub { font-size: 12px; color: var(--fg-muted); margin-top: 3px; }
.modal-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-muted); cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: background .15s, color .15s; }
.modal-x:hover { background: rgba(255, 92, 122, .12); color: var(--fg-bad); }
.modal-scroll { max-height: min(70vh, 640px); overflow-y: auto; text-align: left; padding-right: 4px; margin-right: -4px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions > * { flex: 1; margin: 0 !important; }
.tip-card { background: var(--fg-accent-soft); border: 1px solid rgba(var(--fg-accent-rgb), .2); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--fg-text-2); margin-bottom: 12px; line-height: 1.5; }

/* Confirmação */
.confirm-box { text-align: center; }
.confirm-ico { font-size: 34px; margin-bottom: 6px; }
.confirm-title { font-family: var(--fg-display); font-size: 17px; color: #ff8fa3; margin: 0 0 6px; }
.confirm-text { color: var(--fg-text-2); font-size: 14px; margin: 0; line-height: 1.5; }

/* Login */
.auth-modal { background: radial-gradient(640px 360px at 50% 22%, rgba(243, 198, 92, .085), transparent 70%), radial-gradient(900px 500px at 50% 0%, rgba(var(--fg-accent-rgb), .07), transparent 70%), rgba(5, 7, 12, .97); }
.auth-box { max-width: 380px; padding: 22px 24px 22px; border-color: rgba(243, 198, 92, .16); box-shadow: var(--fg-shadow-lg), inset 0 1px 0 rgba(255, 236, 190, .07); }
.auth-brand { text-align: center; margin-bottom: 18px; }
/* v40.4: emblema próprio (escudo com divisas e estrela + louros) no lugar das espadas */
.auth-emblem { position: relative; width: 132px; height: 135px; margin: -4px auto 6px; }
.auth-emblem::before { content: ''; position: absolute; inset: -22px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 198, 92, .2), rgba(var(--fg-accent-rgb), .06) 60%, transparent); }
.auth-emblem svg { display: block; width: 100%; height: 100%; animation: fgEmblemIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.auth-emblem .fge-shine { animation: fgEmblemShine 1.5s .55s ease-out both; }
@keyframes fgEmblemIn { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fgEmblemShine { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(250px); } }
@media (prefers-reduced-motion: reduce) { .auth-emblem svg, .auth-emblem .fge-shine { animation: none; } }
.auth-title { font-family: var(--fg-display); font-weight: 800; font-size: 30px; letter-spacing: 2px; margin: 0; color: #fbf6ea; background: linear-gradient(180deg, #fffdf6 35%, #e6d3a3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-tag { color: var(--fg-muted); font-size: 13px; margin: 6px 0 0; }
.auth-sub { color: #fff; font-family: var(--fg-display); font-size: 16px; margin: 0 0 4px; text-align: center; }
.auth-links { display: flex; justify-content: space-between; }
.auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--fg-line); }
.auth-download { font-size: 13px; font-weight: 600; color: var(--fg-good); text-decoration: none; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .08); }
.auth-download:hover { background: rgba(52, 211, 153, .14); }

/* Chamada recebida */
.call-ring-box { text-align: center; max-width: 340px; padding: 28px 24px 24px; }
.call-ring-av { position: relative; width: 104px; height: 104px; margin: 4px auto 14px; }
.call-ring-av img { position: relative; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(52, 211, 153, .8); z-index: 1; }
.call-ring-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .55); animation: fgRing 1.6s ease-out infinite; }
@keyframes fgRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.call-ring-kind { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-good); }
.call-ring-name { font-family: var(--fg-display); font-size: 21px; color: #fff; margin: 6px 0 2px; }
.call-ring-sub { color: var(--fg-muted); font-size: 13px; margin: 0 0 22px; }
.call-ring-actions { display: flex; justify-content: center; gap: 36px; }
.call-ring-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; color: var(--fg-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.call-ring-btn svg { width: 62px; height: 62px; padding: 19px; border-radius: 50%; box-sizing: border-box; transition: transform .16s var(--fg-ease); }
.call-ring-btn.accept svg { background: linear-gradient(135deg, #34d399, #10b981); color: #04130c; box-shadow: 0 10px 26px rgba(16, 185, 129, .4); animation: fgWiggle 1.4s ease-in-out infinite; }
.call-ring-btn.decline svg { background: linear-gradient(135deg, #ff5c7a, #e0435f); color: #fff; box-shadow: 0 10px 26px rgba(224, 67, 95, .35); }
.call-ring-btn:hover svg { transform: scale(1.06); }
@keyframes fgWiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }

/* Editar perfil */
.edit-profile-box { padding-bottom: 20px; }
.edit-cover { display: block; position: relative; height: 130px; border-radius: 16px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, #111827, #1e1b4b); background-size: cover; background-position: center; border: 1px solid var(--fg-line-2); }
.edit-cover-hint { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; }
.edit-av { position: relative; display: block; width: 92px; height: 92px; margin: -46px 0 12px 18px; cursor: pointer; }
.edit-av img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--fg-solid-2); background: var(--fg-solid-3); }
.edit-av-hint { position: absolute; right: 0; bottom: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--fg-accent); color: var(--fg-ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }

/* Lista de seleção (criar grupo) */
.pick-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--fg-line); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.pick-row:hover { background: var(--fg-surface-2); }
.pick-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pick-row input { width: 18px; height: 18px; accent-color: var(--fg-accent); }
.pick-row span { font-size: 14px; font-weight: 600; }

/* ── 7. Patentes (modal) ───────────────────────────────────────────────────── */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--fg-line); background: var(--fg-surface); margin-bottom: 8px; }
.rank-row.is-current { border-color: var(--rk, var(--fg-accent)); background: color-mix(in srgb, var(--rk, var(--fg-accent)) 10%, transparent); }
.rank-row.is-locked { opacity: .55; }
.rank-row-icon { font-size: 22px; width: 32px; text-align: center; }
.rank-row-body { flex: 1; min-width: 0; }
.rank-row-name { font-family: var(--fg-label); font-weight: 700; font-size: 15px; color: var(--rk, #fff); letter-spacing: .5px; }
.rank-row-cur { font-size: 9px; padding: 2px 6px; border-radius: 6px; margin-left: 6px; background: var(--rk, var(--fg-accent)); color: #050709; vertical-align: middle; }
.rank-row-desc { font-size: 12px; color: var(--fg-muted); }
.rank-row-xp { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.rank-row-xp b { font-size: 13px; color: var(--fg-text); }
.rank-row-xp span { font-size: 11px; color: var(--fg-muted); }
.medal-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.medal-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--fg-surface); border: 1px solid var(--fg-line); min-width: 74px; }
.medal-card.locked { opacity: .45; filter: grayscale(.8); }
.medal-icon { font-size: 20px; }
.medal-name { font-size: 10px; color: var(--fg-text-2); }

/* ── 8. Chat (DM, grupos e bases) ──────────────────────────────────────────── */
.dm-view-shell { padding: 14px; background: transparent; }
.chat-box-centered { max-width: 860px; height: 100%; max-height: 100%; border-radius: 22px; background: linear-gradient(180deg, rgba(var(--fg-solid-rgb), .96), rgba(var(--fg-bg2-rgb), .98)); border-color: var(--fg-line); box-shadow: var(--fg-shadow); position: relative; }
.dm-topbar { backdrop-filter: none; background: rgba(255, 255, 255, .02); padding: 10px 14px; }
.dm-topbar-av-wrap, .dm-topbar-info { cursor: pointer; }
.dm-topbar-info { flex: 1; }
.dm-topbar-sub { color: var(--fg-muted); }
.sub-online { color: var(--fg-good); font-weight: 600; }
.dm-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.group-settings-btn { width: 34px; height: 34px; }

.chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 2px; scroll-padding-bottom: 20px; }
#dm-list, #comm-chat-list { gap: 2px; }
.msg-row { max-width: min(78%, 640px); gap: 10px; margin-top: 10px; animation: fgMsgIn .16s var(--fg-ease); position: relative; }
@keyframes fgMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg-row.grouped { margin-top: 2px; }
.msg-row.grouped .msg-av { visibility: hidden; height: 0; }
.msg-row.grouped .msg-meta { display: none; }
.msg-av { width: 36px; height: 36px; background: var(--fg-solid-3); }
.msg-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-row.mine .msg-main { align-items: flex-end; }
.msg-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 0 4px; }
.msg-row.mine .msg-meta { flex-direction: row-reverse; }
.msg-name { font-weight: 700; font-size: 13px; color: var(--fg-text); cursor: pointer; }
.msg-name:hover { text-decoration: underline; }
.msg-meta .msg-time { display: inline; margin: 0; font-size: 11px; color: var(--fg-muted-2); text-align: left; }
.msg-bubble { background: var(--fg-solid-3); border-color: var(--fg-line); border-radius: 18px 18px 18px 6px; padding: 9px 14px; font-size: 14.5px; line-height: 1.5; min-width: 0; width: fit-content; max-width: 100%; }
.msg-row.mine .msg-bubble { border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, rgba(var(--fg-accent-rgb), .16), rgba(69, 213, 245, .08)); border-color: rgba(var(--fg-accent-rgb), .22); }
.msg-row.grouped .msg-bubble { border-radius: 18px; }
.msg-kind-image .msg-bubble, .msg-kind-gif .msg-bubble, .msg-kind-video .msg-bubble { padding: 4px; background: transparent; border-color: transparent; }
.msg-link { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* larguras em px/vw (não %): % em mídia deixava o balão do tamanho da imagem original */
.msg-img { display: block; width: auto; height: auto; max-width: min(320px, 68vw); max-height: 360px; border-radius: 14px; cursor: zoom-in; background: var(--fg-surface-2); object-fit: cover; }
.msg-gif { max-width: min(260px, 62vw); }
.msg-video { display: block; width: min(360px, 72vw); max-height: 420px; border-radius: 14px; background: #000; }
.msg-row.msg-kind-image .msg-bubble, .msg-row.msg-kind-gif .msg-bubble, .msg-row.msg-kind-video .msg-bubble { padding: 3px; background: transparent; border-color: transparent; min-width: 0; }
.msg-audio { display: block; width: min(300px, 70vw); height: 40px; }
.msg-pending { margin-left: 8px; font-size: 11px; opacity: .75; }
.msg-row.is-pending .msg-bubble { opacity: .72; }
.msg-row.is-failed .msg-bubble { border-color: rgba(255, 92, 122, .45); }
.msg-retry { cursor: pointer; color: #ff8fa3; font-weight: 600; text-decoration: underline; }
.msg-day { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--fg-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.msg-day::before, .msg-day::after { content: ''; flex: 1; height: 1px; background: var(--fg-line); }
.del-msg-btn { position: absolute; top: 2px; right: -30px; bottom: auto; width: 26px; height: 26px; border-radius: 8px; border: none; background: var(--fg-surface-2); font-size: 12px; display: grid; place-items: center; opacity: 0; cursor: pointer; transition: opacity .15s; }
.msg-row.mine .del-msg-btn { right: auto; left: -30px; }
.msg-row:hover .del-msg-btn, .del-msg-btn:focus-visible { opacity: .9; }
@media (hover: none) { .del-msg-btn { opacity: .55; } }
.load-older-btn { align-self: center; margin: 4px 0 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.load-older-btn:hover { border-color: var(--fg-accent-line); color: var(--fg-accent); }
.new-msg-pill { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 5; padding: 8px 14px; border-radius: 999px; border: none; background: var(--fg-accent); color: var(--fg-ink); font-weight: 700; font-size: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); cursor: pointer; animation: fgPop .2s var(--fg-spring); }
.typing-bar { height: 0; overflow: hidden; padding: 0 18px; font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; transition: height .18s var(--fg-ease); flex-shrink: 0; }
.typing-bar.show { height: 24px; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-accent); animation: fgDot 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fgDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
.chat-input-area { backdrop-filter: none; background: rgba(var(--fg-bg2-rgb), .96); padding: 10px 12px calc(10px + var(--fg-safe-b)); gap: 6px; }
.chat-msg { border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 11px 14px; }
.btn-send-msg { box-shadow: 0 6px 16px rgba(var(--fg-accent-rgb), .22); }
.btn-send-msg:disabled { opacity: .45; cursor: not-allowed; }
.join-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fg-line); background: rgba(var(--fg-accent-rgb), .05); font-size: 13px; color: var(--fg-text-2); flex-shrink: 0; }
.join-notice .btn-main { width: auto; margin: 0; padding: 9px 16px; font-size: 13px; }
.join-call-badge { margin-top: 2px; }

/* Lightbox */
.fg-lightbox { position: fixed; inset: 0; z-index: 10050; background: rgba(2, 3, 6, .92); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s; }
.fg-lightbox.open { opacity: 1; }
.fg-lb-img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: var(--fg-shadow-lg); object-fit: contain; }
.fg-lb-bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.fg-lb-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--fg-line-2); background: rgba(var(--fg-solid-rgb), .9); color: #fff; display: grid; place-items: center; text-decoration: none; cursor: pointer; font-size: 16px; }
.fg-lb-btn:hover { border-color: var(--fg-accent-line); }

/* ── 9. Conversas (inbox) ──────────────────────────────────────────────────── */
.inbox-list { padding: 10px 14px 30px; display: flex; flex-direction: column; gap: 6px; }
/* em telas largas a lista fica numa coluna confortável de ler */
#view-inbox .view-tools, #view-inbox .inbox-list { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.inbox-item, .squad-card {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
    cursor: pointer;
    background: var(--fg-surface) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background .15s var(--fg-ease), border-color .15s var(--fg-ease) !important;
}
.inbox-item:hover, .squad-card:hover { background: var(--fg-surface-2) !important; border-color: var(--fg-line-2) !important; transform: none; box-shadow: none !important; }
.inbox-item.has-unread { background: rgba(var(--fg-accent-rgb), .05) !important; border-color: rgba(var(--fg-accent-rgb), .16) !important; }
.inbox-item.has-unread .inbox-name { color: #fff; }
.inbox-item.has-unread .inbox-sub { color: var(--fg-text-2); font-weight: 600; }
.squad-card::before { display: none; }
.inbox-av-wrap { position: relative; flex: none; }
.inbox-av, .squad-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--fg-solid-3); display: block; }
.squad-avatar { border-radius: 16px; }
.squad-icon-badge { position: absolute; right: -4px; bottom: -4px; font-size: 11px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--fg-solid-2); border: 2px solid var(--fg-bg); }
.inbox-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inbox-name { font-weight: 700; font-size: 15px; color: var(--fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-when { font-size: 11px; color: var(--fg-muted-2); flex: none; }
.inbox-sub { font-size: 13px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.list-badge { min-width: 22px; justify-content: center; padding: 2px 7px; font-size: 11px; box-shadow: none; }
.squad-av-stack { display: inline-flex; vertical-align: middle; }
/* alça de arrastar (organizar conversas/bases): só faz sentido com mouse */
.fg-drag-handle { opacity: 0; transition: opacity .15s; }
.fg-draggable-card:hover .fg-drag-handle, .fg-drag-handle:focus-visible { opacity: 1; }
@media (hover: none) { .fg-drag-handle { display: none !important; } }
.squad-av-preview { width: 18px; height: 18px; }

/* ── 10. Bases ─────────────────────────────────────────────────────────────── */
.comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.comm-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 12px 14px;
    border-radius: 18px;
    text-align: center;
    background: var(--fg-surface) !important;
    border: 1px solid var(--fg-line) !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
    transition: transform .18s var(--fg-ease), border-color .18s, background .18s !important;
}
.comm-card:hover { transform: translateY(-2px); background: var(--fg-surface-2) !important; border-color: var(--fg-accent-line) !important; box-shadow: none !important; }
.comm-card::before { display: none; }
.comm-avatar { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 4px; }
.comm-card-name { font-family: var(--fg-display); font-size: 15px; color: #fff; line-height: 1.25; word-break: break-word; }
.comm-card-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comm-card-meta { font-size: 11px; color: var(--fg-text-2); }
.comm-card-lock { position: absolute; top: 10px; right: 10px; font-size: 12px; opacity: .8; }
.comm-card .chip-btn { margin-top: 6px; }
.req-dot { position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 2px 7px; border-radius: 999px; background: var(--fg-bad); color: #fff; }

.comm-layout { background: transparent; }
.comm-topbar { padding: 12px 14px; gap: 10px; background-color: var(--fg-solid); background-size: cover; background-position: center; backdrop-filter: none; border-bottom: 1px solid var(--fg-line); }
.comm-topbar::after { background: linear-gradient(90deg, rgba(var(--fg-bg-rgb), .92), rgba(var(--fg-bg-rgb), .7)); backdrop-filter: none; }
.comm-back { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fg-line-2); background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
#active-comm-name { font-size: 17px; letter-spacing: 1px; text-align: left; color: #fff; }
.comm-top-actions { display: flex; gap: 6px; flex: none; }
.comm-channels-bar { background: rgba(255, 255, 255, .015); border-bottom: 1px solid var(--fg-line); padding: 8px 12px; gap: 6px; }
.channel-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; border: 1px solid var(--fg-line); background: var(--fg-surface); color: var(--fg-text-2); font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.channel-btn.active { box-shadow: none; }
.channel-btn.is-voice .ch-icon { filter: saturate(1.2); }
.ch-icon { opacity: .75; font-weight: 700; }
.ch-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ch-lock { font-size: 10px; opacity: .7; }
.ch-live { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(255, 92, 122, .15); color: #ff8fa3; }
.ch-edit { margin-left: 2px; font-size: 11px; opacity: .45; padding: 2px; border-radius: 6px; }
.ch-edit:hover { opacity: 1; background: var(--fg-surface-3); }
.comm-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.comm-voice { flex: 1; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; flex-direction: column; }
.comm-voice-card { width: 100%; max-width: 560px; text-align: center; padding: 28px 22px; border-radius: 24px; background: radial-gradient(500px 220px at 50% 0%, rgba(var(--fg-accent-rgb), .1), transparent 70%), var(--fg-surface); border: 1px solid var(--fg-line); }
.comm-voice-ico { font-size: 44px; }
.comm-voice-title { font-family: var(--fg-display); font-size: 22px; color: #fff; margin: 8px 0 6px; }
.comm-voice-sub { color: var(--fg-muted); font-size: 13px; line-height: 1.55; max-width: 420px; margin: 0 auto 18px; }
.comm-voice-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.comm-voice-actions .glass-btn { flex: none; margin: 0; padding: 11px 16px; }
.dm-call-btn.lg { padding: 12px 20px; font-size: 13px; }
.voice-roster { margin-top: 22px; text-align: left; }
.voice-roster-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--fg-good); margin-bottom: 10px; }
.voice-roster-list { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-roster-user { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--fg-surface-2); cursor: pointer; font-size: 13px; font-weight: 600; }
.voice-roster-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.voice-empty { color: var(--fg-muted); font-size: 13px; text-align: center; }
.comm-info { flex: 1; overflow-y: auto; justify-content: center; align-items: flex-start; padding: 16px 14px 40px; }
.comm-info-card { width: 100%; max-width: 640px; border-radius: 24px; overflow: hidden; background: var(--fg-solid); border: 1px solid var(--fg-line); }
.comm-info-banner { position: relative; height: 150px; background: linear-gradient(135deg, #111827, #1e1b4b); background-size: cover; background-position: center; }
.comm-info-av { position: absolute; left: 22px; bottom: -40px; width: 90px; height: 90px; border-radius: 24px; object-fit: cover; border: 4px solid var(--fg-solid); background: var(--fg-solid-3); }
.comm-info-body { padding: 52px 22px 22px; }
.comm-info-name { font-family: var(--fg-display); font-size: 24px; color: #fff; margin: 0; }
.comm-info-desc { color: var(--fg-text-2); font-size: 14px; line-height: 1.55; margin: 8px 0 14px; white-space: pre-wrap; }
.member-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.member-row:hover { background: var(--fg-surface); }
.member-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.member-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-badge.is-staff { color: var(--fg-gold); background: rgba(255, 209, 102, .1); }
.pf-card.warn { border-color: rgba(245, 185, 66, .3); }

/* ── 11. Perfil ────────────────────────────────────────────────────────────── */
.pf-root { padding-bottom: 50px; }
.pf-hero { position: relative; max-width: 980px; margin: 0 auto; padding: 16px 18px 0; --pf-av: 132px; --pf-lift: 58px; --pf-inset: 22px; }
/* v40.3: capa como cartão alinhado ao conteúdo (antes vazava nas laterais, colava no
   topo e o nome ficava em cima da imagem). Proporção 3:1, com limites de altura. */
.pf-cover { position: relative; width: 100%; aspect-ratio: 3 / 1; min-height: 150px; max-height: 300px; border-radius: 22px; overflow: hidden; isolation: isolate; background: radial-gradient(600px 220px at 20% 0%, rgba(var(--fg-accent-rgb), .22), transparent 70%), radial-gradient(500px 220px at 90% 100%, rgba(167, 139, 250, .24), transparent 70%), linear-gradient(135deg, #0e1424, #151032); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
.pf-cover-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.pf-hero.is-loading .pf-av { border-radius: 50%; overflow: hidden; border: 5px solid var(--fg-bg); box-sizing: border-box; }
.pf-hero.is-loading .pf-stats { max-width: 420px; }
.pf-hero.is-loading .pf-stats .sk-line { width: 100%; height: 52px; border-radius: 14px; }
.pf-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 26%, transparent 70%, rgba(0, 0, 0, .22)); }
.pf-cover-tools { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.pf-cover-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(var(--fg-bg-rgb), .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.pf-cover-btn:hover { background: rgba(var(--fg-bg-rgb), .8); border-color: rgba(255, 255, 255, .32); }
.pf-cover-btn.primary { background: var(--fg-accent); color: var(--fg-ink); border-color: transparent; }
.pf-cover-add { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: none; background: none; cursor: pointer; }
.pf-cover-add span { padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
.pf-cover-add:hover span { border-color: var(--fg-accent-line); color: #fff; }
/* modo "ajustar enquadramento" */
.pf-cover.is-adjusting { cursor: grab; touch-action: none; outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.pf-cover.is-adjusting.is-dragging { cursor: grabbing; }
.pf-cover.is-adjusting .pf-cover-img { transition: none; }
.pf-cover-hint { position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(var(--fg-bg-rgb), .7); color: #fff; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.pf-back { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(var(--fg-bg-rgb), .6); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.pf-head { position: relative; display: flex; align-items: flex-start; gap: 18px; margin-top: calc(-1 * var(--pf-lift)); padding: 0 var(--pf-inset); z-index: 2; flex-wrap: wrap; }
.pf-av.profile-pic-lg-wrap { position: relative; left: auto; bottom: auto; transform: none; width: var(--pf-av); height: var(--pf-av); flex: none; margin: 0; }
.pf-av .profile-pic-lg { width: var(--pf-av); height: var(--pf-av); border: 5px solid var(--fg-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: pointer; }
/* nome, emblemas e botões começam abaixo da capa — só a foto sobrepõe a borda */
.pf-id { flex: 1; min-width: 200px; padding-top: calc(var(--pf-lift) + 12px); display: flex; flex-direction: column; gap: 6px; }
.pf-name { font-family: var(--fg-display); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0; color: #fff; word-break: break-word; }
.pf-emblems { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-emblems .rank-badge, .pf-emblems .special-badge { margin-left: 0; font-size: 10px; padding: 3px 8px; }
.pf-badge { font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.pf-badge-gold { background: linear-gradient(135deg, #ffd166, #f59e0b); color: #241500; }
.pf-badge-blue { background: rgba(96, 165, 250, .16); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .35); }
.pf-badge-vip { background: linear-gradient(135deg, rgba(var(--fg-accent-rgb), .2), rgba(167, 139, 250, .25)); color: #e0fbff; border: 1px solid rgba(var(--fg-accent-rgb), .35); }
.pf-presence { font-size: 13px; color: var(--fg-muted); }
.pf-presence.is-online { color: var(--fg-good); font-weight: 600; }
.pf-presence.is-stealth { color: var(--fg-violet); }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: calc(var(--pf-lift) + 12px); }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--fg-ease); }
.pf-btn:hover { background: var(--fg-surface-3); border-color: var(--fg-accent-line); }
.pf-btn:active { transform: scale(.97); }
.pf-btn.primary { background: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)); color: var(--fg-ink); border-color: transparent; }
.pf-btn.primary:hover { filter: brightness(1.05); }
.pf-btn.icon { padding: 10px 12px; }
.pf-btn.danger:hover { border-color: rgba(255, 92, 122, .5); background: rgba(255, 92, 122, .1); }
.pf-btn:disabled { opacity: .6; cursor: default; }
.pf-bio { max-width: 720px; margin: 14px var(--pf-inset) 0; color: var(--fg-text-2); font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.pf-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; padding: 0 var(--pf-inset); }
.pf-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; min-width: 92px; border-radius: 14px; background: var(--fg-surface); border: 1px solid var(--fg-line); color: var(--fg-text); text-align: left; cursor: default; }
button.pf-stat { cursor: pointer; transition: border-color .15s, background .15s; }
button.pf-stat:hover { border-color: var(--fg-accent-line); background: var(--fg-surface-2); }
.pf-stat b { font-family: var(--fg-label); font-size: 20px; font-weight: 700; line-height: 1; color: #fff; }
.pf-stat b small { font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.pf-stat span { font-size: 11px; color: var(--fg-muted); text-transform: lowercase; }
.pf-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; max-width: 980px; margin: 8px auto 0; padding: 6px 18px 0; background: linear-gradient(180deg, var(--fg-bg) 70%, rgba(var(--fg-bg-rgb), 0)); border-bottom: 1px solid var(--fg-line); overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { position: relative; padding: 11px 14px; border: none; background: none; color: var(--fg-muted); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pf-tab em { font-style: normal; font-size: 11px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--fg-surface-2); color: var(--fg-text-2); }
.pf-tab em.hot { background: var(--fg-bad); color: #fff; }
.pf-tab.active { color: #fff; }
.pf-tab.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fg-accent); }
.pf-tab:hover:not(.active) { color: var(--fg-text-2); }
.pf-panel { max-width: 980px; margin: 0 auto; padding: 16px 18px 0; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.pf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-card { padding: 16px; border-radius: 18px; background: var(--fg-surface); border: 1px solid var(--fg-line); }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-weight: 700; font-size: 14px; color: var(--fg-text); }
.pf-xp-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pf-xp-row b { font-family: var(--fg-label); font-size: 20px; }
.pf-xp-row span { font-size: 13px; color: var(--fg-text-2); }
.pf-xp .pf-bar { margin-bottom: 8px; }
.vip-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: linear-gradient(135deg, rgba(var(--fg-accent-rgb), .08), rgba(167, 139, 250, .12)); border-color: rgba(167, 139, 250, .3); color: var(--fg-text); }
.vip-banner-ico { font-size: 26px; }
.vip-banner b { display: block; font-size: 14px; }
.vip-banner small { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.vip-banner > span:nth-child(2) { flex: 1; }
.vip-banner-cta { flex: none; padding: 7px 12px; border-radius: 10px; background: linear-gradient(135deg, var(--fg-accent), #a78bfa); color: var(--fg-ink); font-weight: 800; font-size: 12px; }
.mutual-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mutual-item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--fg-line); background: var(--fg-surface-2); color: var(--fg-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.mutual-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.friend-row { border-radius: 14px; padding: 10px 12px; background: var(--fg-surface); }
.friend-row .av-wrap { flex: none; }
.friend-name { flex: 1; min-width: 0; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 12. Troféus ───────────────────────────────────────────────────────────── */
.tro-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.tro-ring-wrap { position: relative; width: 72px; height: 72px; flex: none; }
.tro-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.tro-ring circle { fill: none; stroke-width: 6; }
.tro-ring .bg { stroke: rgba(255, 255, 255, .08); }
.tro-ring .fg { stroke: url(#none); stroke: var(--fg-accent); stroke-linecap: round; transition: stroke-dashoffset .8s var(--fg-ease); }
.tro-ring-txt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fg-label); font-weight: 700; font-size: 16px; color: #fff; }
.tro-head-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tro-head-txt b { font-size: 17px; color: #fff; }
.tro-head-txt > span { font-size: 13px; color: var(--fg-muted); }
.tro-tier-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tro-tier-legend span { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); background: color-mix(in srgb, var(--tier) 10%, transparent); }
.tro-filters { margin-bottom: 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
.tro-filters::-webkit-scrollbar { display: none; }
.tro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tro-card { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--fg-surface); border: 1px solid var(--fg-line); transition: border-color .15s, transform .15s var(--fg-ease); }
.tro-card.earned { border-color: color-mix(in srgb, var(--tier) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--tier) 12%, transparent), rgba(255, 255, 255, .02)); }
.tro-card:not(.earned) .tro-ico { filter: grayscale(1); opacity: .55; }
.tro-card.secret:not(.earned) { border-style: dashed; }
.tro-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: color-mix(in srgb, var(--tier) 14%, rgba(255, 255, 255, .03)); border: 1px solid color-mix(in srgb, var(--tier) 30%, transparent); }
.tro-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tro-top b { font-size: 14px; color: #fff; }
.tro-tier { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--tier); }
.tro-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
.tro-done { font-size: 12px; color: var(--fg-good); font-weight: 600; }
.tro-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.tro-prog > span { font-size: 11px; color: var(--fg-muted); }
.tro-prog .pf-bar > i { background: linear-gradient(90deg, var(--tier), color-mix(in srgb, var(--tier) 50%, #fff)); }
.tro-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.tro-medal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 14%, transparent), transparent); color: var(--fg-text); cursor: pointer; text-align: center; transition: transform .15s var(--fg-ease); }
.tro-medal:hover { transform: translateY(-2px); }
.tro-medal-ico { font-size: 26px; }
.tro-medal-name { font-size: 12px; font-weight: 700; line-height: 1.25; }
.tro-medal-tier { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--tier); }
.tro-next { display: flex; flex-direction: column; gap: 12px; }
.tro-next-row { display: flex; gap: 12px; align-items: flex-start; }
.tro-next-ico { font-size: 22px; width: 36px; text-align: center; flex: none; }
.tro-next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tro-next-body .tro-top span { font-size: 11px; color: var(--fg-muted); }
.tro-next .pf-bar > i { background: var(--tier); }
.tro-unlock { position: fixed; left: 50%; top: 18px; z-index: 10060; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 440px); padding: 14px 18px 14px 14px; border-radius: 18px; background: linear-gradient(135deg, var(--fg-solid-2), var(--fg-solid)); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 30px color-mix(in srgb, var(--tier) 25%, transparent); transform: translate(-50%, -140%); transition: transform .45s var(--fg-spring), opacity .3s; cursor: pointer; overflow: hidden; }
.tro-unlock.in { transform: translate(-50%, 0); }
.tro-unlock.out { transform: translate(-50%, -140%); opacity: 0; }
.tro-unlock-burst { position: absolute; inset: 0; background: radial-gradient(240px 90px at 15% 50%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 70%); pointer-events: none; }
.tro-unlock-ico { position: relative; font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--tier) 18%, transparent); animation: fgTroPop .6s var(--fg-spring); }
@keyframes fgTroPop { 0% { transform: scale(.4) rotate(-20deg); } 100% { transform: none; } }
.tro-unlock-txt { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tro-unlock-txt small { font-size: 11px; color: var(--tier); font-weight: 800; letter-spacing: .4px; }
.tro-unlock-txt b { font-size: 16px; color: #fff; }
.tro-unlock-txt span { font-size: 12px; color: var(--fg-muted); }

/* ── 13. Mural ─────────────────────────────────────────────────────────────── */
.mural-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mural-add { width: auto; margin: 0; padding: 10px 16px; font-size: 13px; }
.mural-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
/* cartão: foto em cima, legenda embaixo, curtidas e comentários no rodapé */
.mural-item { display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--fg-line); background: var(--fg-solid); color: inherit; cursor: zoom-in; transition: border-color .15s, transform .2s var(--fg-ease); }
.mural-item:hover { border-color: var(--fg-line-2); transform: translateY(-2px); }
.mural-item:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.mural-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--fg-solid-3); }
.mural-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--fg-ease); }
.mural-item:hover .mural-media img { transform: scale(1.03); }
.mural-kind, .mural-pin, .mural-vis { position: absolute; top: 8px; font-size: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: rgba(var(--fg-bg-rgb), .72); }
.mural-kind { left: 8px; }
.mural-pin { right: 8px; }
.mural-vis { right: 38px; }
.mural-review { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #ffe2a8; background: rgba(40, 26, 4, .82); border: 1px solid rgba(255, 196, 92, .45); }
.mural-item:has(.mural-review) .mural-media img { filter: saturate(.55) brightness(.8); }
.mural-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 10px 12px 0; font-size: 13px; line-height: 1.45; color: var(--fg-text); white-space: pre-line; word-break: break-word; }
.mural-foot { display: flex; gap: 14px; margin-top: auto; padding: 8px 12px 10px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.mural-stat.is-on { color: #ff8fa3; }
.mural-count { text-align: center; margin-top: 12px; }
.mural-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mural-mini-item { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: none; padding: 0; background: var(--fg-solid-3); cursor: zoom-in; }
.mural-mini-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mural-cta { display: flex; align-items: center; gap: 14px; }
.mural-cta-ico { font-size: 34px; }
.mural-cta > div:nth-child(2) { flex: 1; }
.mural-cta .btn-main { width: auto; margin: 0; padding: 10px 14px; font-size: 13px; flex: none; }
.load-more-btn { display: block; margin: 16px auto 4px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.load-more-btn:hover { border-color: var(--fg-accent-line); color: var(--fg-accent); }

.mural-up .mural-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; max-height: 340px; border-radius: 18px; border: 2px dashed var(--fg-line-2); background: var(--fg-surface); cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.mural-drop.over { border-color: var(--fg-accent); background: var(--fg-accent-soft); }
.mural-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fg-muted); font-size: 13px; padding: 20px; text-align: center; }
.mural-drop-empty b { color: var(--fg-text); font-size: 15px; }
.mural-drop-ico { font-size: 34px; }
#mural-preview { max-width: 100%; max-height: 330px; object-fit: contain; display: block; }
.mural-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.fgc-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--fg-line); flex-wrap: wrap; }
.fgc-seg label { position: relative; flex: 1 1 auto; text-align: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.fgc-seg label.is-on { background: var(--fg-accent-soft); color: var(--fg-accent); }
.fgc-seg input { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.up-progress { position: relative; height: 26px; border-radius: 10px; background: var(--fg-surface-2); overflow: hidden; }
.up-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--fg-accent), var(--fg-violet)); transition: width .2s; }
.up-progress span { position: relative; display: grid; place-items: center; height: 100%; font-size: 12px; font-weight: 700; color: #fff; }

/* Visualizador do mural */
.mv { position: fixed; inset: 0; z-index: 10040; display: flex; background: rgba(2, 3, 6, .95); opacity: 0; transition: opacity .2s; }
.mv.open { opacity: 1; }
.mv-figure { position: relative; flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 72px; min-width: 0; min-height: 0; }
.mv-stage { position: relative; flex: 0 1 auto; min-height: 0; max-height: 100%; display: flex; align-items: center; justify-content: center; width: 100%; }
.mv-img { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 12px; transition: opacity .2s; }
.mv-img.loading { opacity: .35; }
.mv-spin { position: absolute; }
/* legenda logo abaixo da foto */
.mv-caption-box { flex: none; width: min(100%, 720px); max-height: 108px; overflow-y: auto; text-align: center; }
.mv-caption { margin: 0; font-size: 15px; line-height: 1.55; color: #f2f4f8; white-space: pre-wrap; word-break: break-word; }
.mv-cap-edit { margin-top: 6px; border: none; background: none; color: var(--fg-muted); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.mv-cap-edit:hover { color: var(--fg-text); background: var(--fg-surface-2); }
.mv-info { width: 360px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--fg-line); background: var(--fg-solid); }
.mv-head { flex: none; padding: 18px 18px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--fg-line); }
.mv-head > .mv-author { margin-right: 46px; } /* espaço do botão fechar */
.mv-author { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.mv-author-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fg-solid-3); }
.mv-author-txt { display: flex; flex-direction: column; min-width: 0; }
.mv-author-txt b { font-size: 14px; color: var(--fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-author-txt small { font-size: 12px; color: var(--fg-muted); }
.mv-actions { display: flex; align-items: center; gap: 8px; }
.mv-like, .mv-ccount { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .15s var(--fg-spring), border-color .15s; }
.mv-like.is-on { border-color: rgba(255, 92, 122, .5); background: rgba(255, 92, 122, .12); }
.mv-like:active { transform: scale(1.12); }
.mv-ccount:hover, .mv-like:hover { border-color: var(--fg-accent-line); }
.mv-link { margin-left: auto; font-size: 12px; color: var(--fg-muted); text-decoration: none; white-space: nowrap; }
.mv-link:hover { color: var(--fg-accent); }
.mv-owner { display: flex; flex-wrap: wrap; gap: 6px; }
/* v40.6 — visualizador: visualizações, salvar, download, jogo/temas, respostas */
.mv-actions { flex-wrap: wrap; row-gap: 8px; }
.mv-views { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fg-muted); padding: 0 4px; }
.mv-views b { color: var(--fg-text-2); font-weight: 700; }
.mv-save { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.mv-save:hover { border-color: var(--fg-accent-line); }
.mv-save.is-on { border-color: rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .1); color: #ffe7a8; }
.mv-nodl { cursor: default; }
.mv-nodl:hover { color: var(--fg-muted); }
.mv-img.no-dl { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mv-dl-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--fg-surface-2); border: 1px solid var(--fg-line-2); font-size: 12px; color: var(--fg-text-2); cursor: pointer; }
.mv-dl-toggle input { accent-color: var(--fg-accent); margin: 0; }
.mv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.mv-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #e8edf5; font-size: 12px; font-weight: 600; cursor: pointer; }
.mv-chip:hover { border-color: var(--fg-accent-line); color: #fff; }
.mv-chip.game { border-color: rgba(var(--fg-accent-rgb), .35); color: var(--fg-accent); }
.mv-cap-tools { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.mv-c-acts { display: flex; align-items: center; gap: 4px; margin-top: 3px; margin-left: -6px; }
.mv-c-like, .mv-c-reply { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 3px 6px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.mv-c-like:hover, .mv-c-reply:hover { color: var(--fg-text); background: var(--fg-surface-2); }
.mv-c-like.is-on { color: #ff8fa3; }
.mv-c-like span:empty { display: none; }
.mv-c-badge { flex: none; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; color: var(--fg-ink); background: var(--fg-accent); }
.mv-c-replies { margin-left: 52px; border-left: 2px solid var(--fg-line); }
.mv-c.is-reply { padding-left: 12px; }
.mv-c.is-reply .mv-c-av { width: 26px; height: 26px; }
.mv-reply-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 14px; font-size: 12.5px; color: var(--fg-accent); background: var(--fg-accent-soft); border-top: 1px solid var(--fg-line); }
.mv-reply-bar button { border: none; background: none; color: var(--fg-muted); cursor: pointer; font-size: 13px; }
.tag-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-sugs:empty { display: none; }
.tag-sug { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font-size: 12px; cursor: pointer; }
.tag-sug:hover { border-color: var(--fg-accent-line); color: var(--fg-accent); }
@media (max-width: 760px) { .mv-c-replies { margin-left: 40px; } .mv-save span { display: none; } }

/* ── Galeria ─────────────────────────────────────────────────────────────── */
.gal-tools { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--fg-line); }
.gal-sorts { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gal-sorts::-webkit-scrollbar { display: none; }
.gal-sort { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--fg-line); background: transparent; color: var(--fg-muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.gal-sort:hover { color: var(--fg-text); border-color: var(--fg-line-2); }
.gal-sort.active { color: var(--fg-ink); background: var(--fg-accent); border-color: transparent; }
.gal-period { flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); font-size: 12.5px; }
.gal-filters { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gal-active { display: flex; gap: 6px; flex-wrap: wrap; }
.gal-pill { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(var(--fg-accent-rgb), .4); background: var(--fg-accent-soft); color: var(--fg-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gal-topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.gal-topics::-webkit-scrollbar { display: none; }
.gal-topic { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 10px; border: 1px solid var(--fg-line); background: var(--fg-surface); color: var(--fg-text-2); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.gal-topic small { font-size: 10.5px; color: var(--fg-muted-2); }
.gal-topic:hover { border-color: var(--fg-line-2); color: var(--fg-text); }
.gal-topic.on { border-color: var(--fg-accent-line); color: var(--fg-accent); background: var(--fg-accent-soft); }
.gal-note { margin: 0 0 12px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.gal-skel { display: contents; }
.gal-skel .sk-card { aspect-ratio: 1 / 1.18; border-radius: 18px; }
.gal-empty { grid-column: 1 / -1; }
.gal-card { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: var(--fg-solid); border: 1px solid var(--fg-line); transition: border-color .15s; }
.gal-card:hover { border-color: var(--fg-line-2); }
.gal-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; background: var(--fg-solid-3); cursor: zoom-in; overflow: hidden; }
.gal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-media img[data-nodl] { -webkit-touch-callout: none; user-select: none; }
.gal-stats { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; padding: 22px 12px 9px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.gal-stats .mural-stat.is-on { color: #ffb3c1; }
.gal-kind, .gal-saved { position: absolute; top: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; font-size: 12px; background: rgba(var(--fg-bg-rgb), .72); }
.gal-kind { right: 8px; }
.gal-saved { right: 38px; }
.gal-rank { position: absolute; top: 8px; left: 8px; min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(var(--fg-bg-rgb), .78); border: 1px solid rgba(255, 255, 255, .14); }
.gal-rank.gold, .gal-rank.silver, .gal-rank.bronze { font-size: 17px; }
.gal-rank.gold { border-color: rgba(255, 209, 102, .7); box-shadow: 0 0 0 3px rgba(255, 209, 102, .16); }
.gal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px 0; min-width: 0; }
.gal-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; border: none; background: none; padding: 0; color: var(--fg-text); font-weight: 600; font-size: 13px; cursor: pointer; }
.gal-owner img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.gal-owner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-game { flex: none; max-width: 48%; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--fg-accent-rgb), .3); background: var(--fg-accent-soft); color: var(--fg-accent); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.gal-cap { margin: 6px 11px 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.gal-card::after { content: ''; display: block; height: 10px; }
@media (min-width: 900px) {
    .gal-grid.is-ranking .gal-card.is-feature { grid-column: span 2; grid-row: span 2; }
    .gal-grid.is-ranking .gal-card.is-feature .gal-media { aspect-ratio: 1 / .92; }
}
@media (max-width: 760px) {
    .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .gal-card { border-radius: 14px; }
    .gal-stats { gap: 8px; font-size: 11px; padding: 18px 8px 7px; }
    .gal-meta { padding: 7px 8px 0; }
    .gal-owner { font-size: 12px; gap: 6px; }
    .gal-owner img { width: 22px; height: 22px; }
    .gal-game { display: none; }
    .gal-cap { margin: 4px 8px 0; font-size: 12px; -webkit-line-clamp: 1; }
    .gal-sort { padding: 6px 11px; font-size: 12.5px; }
}

/* v40.3 — denúncia */
.mv-report { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--fg-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.mv-report:hover { color: #ffb4a8; border-color: rgba(255, 120, 100, .35); background: rgba(255, 92, 92, .08); }
.mv-report.is-done { color: var(--fg-muted-2); cursor: default; }
.mv-report.is-done:hover { border-color: transparent; background: none; }
.mv-review-note { font-size: 12px; line-height: 1.45; color: #ffe2a8; background: rgba(255, 176, 46, .08); border: 1px solid rgba(255, 196, 92, .28); border-radius: 12px; padding: 8px 11px; }
.mv-report-modal { z-index: 10050; }
.rp-box { max-width: 460px; width: 94%; text-align: left; }
.rp-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rp-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--fg-line); background: var(--fg-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.rp-opt:hover { border-color: var(--fg-line-2); background: var(--fg-surface-2); }
.rp-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rp-opt:has(input:focus-visible) { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.rp-opt.is-on { border-color: var(--fg-accent-line); background: var(--fg-accent-soft); }
.rp-opt.is-crime.is-on { border-color: rgba(255, 92, 92, .6); background: rgba(255, 70, 70, .1); }
.rp-ico { flex: none; width: 28px; font-size: 18px; text-align: center; }
.rp-txt { display: flex; flex-direction: column; min-width: 0; }
.rp-txt b { font-size: 14px; font-weight: 600; color: var(--fg-text); }
.rp-txt small { font-size: 12px; color: var(--fg-muted); line-height: 1.35; margin-top: 1px; }
.rp-crime-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: #ffd0c8; background: rgba(255, 70, 70, .08); border: 1px solid rgba(255, 92, 92, .3); border-radius: 12px; padding: 9px 12px; }
.rp-details { width: 100%; }
@media (max-width: 760px) { .mv-report { padding: 6px 10px; border-color: rgba(255, 120, 100, .3); color: #ffc4b8; } }
.mv-vis { padding: 6px 10px; border-radius: 999px; background: var(--fg-surface-2); border: 1px solid var(--fg-line-2); color: var(--fg-text); font-size: 12px; }
/* comentários */
.mv-comments { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; }
.mv-c-list { display: flex; flex-direction: column; }
.mv-c { position: relative; display: flex; gap: 10px; padding: 9px 18px; }
.mv-c:hover { background: var(--fg-surface); }
.mv-c-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; cursor: pointer; background: var(--fg-solid-3); }
.mv-c-body { min-width: 0; flex: 1; }
.mv-c-meta { display: flex; align-items: baseline; gap: 8px; }
.mv-c-name { font-size: 13px; font-weight: 700; color: var(--fg-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.mv-c-meta time { font-size: 11px; color: var(--fg-muted-2); flex: none; }
.mv-c-text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-text-2); white-space: pre-wrap; word-break: break-word; }
.mv-c-del { position: absolute; top: 8px; right: 12px; width: 24px; height: 24px; border-radius: 8px; border: none; background: transparent; color: var(--fg-muted); font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.mv-c:hover .mv-c-del, .mv-c-del:focus-visible { opacity: 1; }
.mv-c-del:hover { color: var(--fg-bad); background: rgba(255, 92, 122, .1); }
@media (hover: none) { .mv-c-del { opacity: .7; } }
.mv-c-empty { display: grid; place-items: center; gap: 8px; padding: 26px 18px; text-align: center; font-size: 13px; color: var(--fg-muted); }
.mv-c-more { align-self: center; margin: 4px 0 8px; border: none; background: none; color: var(--fg-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.mv-c-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + var(--fg-safe-b)); border-top: 1px solid var(--fg-line); background: var(--fg-solid-2); }
.mv-c-me { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; margin-bottom: 4px; }
.mv-c-input { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 9px 12px; border-radius: 18px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); font: inherit; font-size: 14px; line-height: 1.4; }
.mv-c-input:focus { outline: none; border-color: var(--fg-accent-line); }
.mv-c-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; display: grid; place-items: center; background: var(--fg-accent); color: var(--fg-ink); cursor: pointer; transition: opacity .15s, transform .15s var(--fg-spring); }
.mv-c-send:disabled { opacity: .35; cursor: default; }
.mv-c-send:not(:disabled):active { transform: scale(.92); }
.mv-btn { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(var(--fg-solid-rgb), .8); color: #fff; font-size: 22px; display: grid; place-items: center; cursor: pointer; }
.mv-btn:hover { border-color: var(--fg-accent-line); }
.mv-close { top: 14px; right: 14px; font-size: 16px; }
.mv-nav { top: 50%; transform: translateY(-50%); }
.mv-nav.prev { left: 12px; }
.mv-nav.next { right: 374px; }
@media (max-width: 760px) {
    /* celular: foto + legenda em cima, comentários embaixo (campo de comentar sempre visível) */
    .mv { flex-direction: column; }
    .mv-figure { flex: 0 1 auto; max-height: 56vh; padding: 58px 10px 8px; gap: 8px; }
    .mv-img { max-height: calc(56vh - 110px); border-radius: 10px; }
    .mv-caption-box { max-height: 72px; }
    .mv-caption { font-size: 14px; }
    .mv-info { width: auto; flex: 1; border-left: none; border-top: 1px solid var(--fg-line); }
    .mv-head { padding: 12px 14px 10px; padding-right: 14px; gap: 10px; }
    .mv-head > .mv-author { margin-right: 0; }
    .mv-c { padding: 8px 14px; }
    .mv-nav.next { right: 12px; }
    .mv-nav { top: 28vh; }
}

/* ── 14. Chamadas (painel v40) ─────────────────────────────────────────────── */
#expanded-call-panel.fgc-panel {
    position: fixed; right: 22px; bottom: calc(22px + var(--fg-safe-b)); left: auto; top: auto;
    width: 400px; max-width: calc(100vw - 24px);
    height: auto; max-height: calc(100vh - 44px);
    display: none; flex-direction: column;
    border-radius: 24px;
    background: linear-gradient(180deg, #121826, #0b0f18);
    border: 1px solid var(--fg-line-2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
    overflow: hidden;
    z-index: 10020;
    animation: fgPop .22s var(--fg-spring);
    contain: layout paint;
}
#expanded-call-panel.fgc-panel::before { display: none; }
#expanded-call-panel.fgc-panel > * { position: relative; z-index: 1; }
#expanded-call-panel.fgc-panel.has-video { width: 720px; }
#expanded-call-panel.fgc-panel.theater { inset: 12px; width: auto; max-width: none; height: auto; max-height: none; border-radius: 22px; }
#expanded-call-panel.fgc-panel:fullscreen { inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
.fgc-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--fg-line); cursor: grab; user-select: none; }
.fgc-head:active { cursor: grabbing; }
.fgc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-muted-2); }
.fgc-dot.is-ok { background: var(--fg-good); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.fgc-dot.is-warn { background: var(--fg-warn); animation: pulse-green 1.2s infinite; }
.fgc-dot.is-ring { background: var(--fg-accent); animation: pulse-green 1s infinite; }
.fgc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fgc-title b { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgc-title span { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgc-chip { flex: none; font-family: var(--fg-label); font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--fg-surface-2); color: var(--fg-text); font-variant-numeric: tabular-nums; }
.fgc-net { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.fgc-net i { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.fgc-net i:nth-child(1) { height: 4px; } .fgc-net i:nth-child(2) { height: 7px; } .fgc-net i:nth-child(3) { height: 10px; } .fgc-net i:nth-child(4) { height: 14px; }
.fgc-net[data-bars="4"] i, .fgc-net[data-bars="3"] i:nth-child(-n+3) { background: var(--fg-good); }
.fgc-net[data-bars="2"] i:nth-child(-n+2) { background: var(--fg-warn); }
.fgc-net[data-bars="1"] i:nth-child(1) { background: var(--fg-bad); }
.fgc-head-actions { display: flex; gap: 2px; flex: none; }
.fgc-ico { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--fg-muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.fgc-ico:hover { background: var(--fg-surface-2); color: #fff; }
.fgc-svg { display: inline-flex; width: 18px; height: 18px; }
.fgc-svg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fgc-only-video { display: none; }
.fgc-panel.has-video .fgc-only-video { display: grid; }
/* Só voz: a lista lateral e a tela cheia não fazem nada — sobra espaço para o título */
.fgc-panel:not(.has-video):not(.theater) .fgc-ico[data-call="people"],
.fgc-panel:not(.has-video):not(.theater) .fgc-ico[data-call="fullscreen"] { display: none; }
.fgc-title { min-width: 72px; }
.fgc-body { position: relative; flex: 1; min-height: 0; display: flex; }
.fgc-stage { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #05070b; }
.fgc-stage.mode-voice { background: radial-gradient(400px 200px at 50% 0%, rgba(var(--fg-accent-rgb), .08), transparent 70%), #080b12; }
.fgc-main { position: relative; flex: 1; min-height: 0; display: none; }
.fgc-stage.mode-video .fgc-main { display: block; min-height: 240px; aspect-ratio: 16 / 9; max-height: calc(100vh - 220px); }
.fgc-panel.theater .fgc-stage.mode-video .fgc-main, .fgc-panel:fullscreen .fgc-stage.mode-video .fgc-main { aspect-ratio: auto; max-height: none; }
.fgc-strip { display: flex; gap: 6px; padding: 6px; overflow-x: auto; flex-shrink: 0; background: rgba(0, 0, 0, .3); }
.fgc-strip[hidden] { display: none; }
.fgc-strip .fgc-tile { width: 132px; flex: none; aspect-ratio: 16 / 9; border-radius: 10px; cursor: pointer; }
.fgc-tile { position: relative; overflow: hidden; background: #000; }
.fgc-main .fgc-tile { position: absolute; inset: 0; }
.fgc-video { position: absolute; inset: 0; }
.fgc-video video { object-fit: inherit; }
.fgc-tile.is-speaking { box-shadow: inset 0 0 0 2px var(--fg-good); }
.fgc-tile-label { position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.fgc-tile-name { font-size: 12px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.fgc-tile-q { font-size: 10px; font-weight: 700; color: #d1fae5; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
.fgc-tile-q:empty { display: none; }
.fgc-strip .fgc-tile-name { font-size: 10px; padding: 2px 6px; }
.fgc-grid { display: none; flex: 1; padding: 18px 14px; gap: 14px; flex-wrap: wrap; align-content: center; justify-content: center; min-height: 200px; }
.fgc-stage.mode-voice .fgc-grid { display: flex; }
.fgc-voice-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; }
.fgc-voice-name { font-size: 12px; font-weight: 600; color: var(--fg-text); text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgc-muted-ico { font-size: 11px; }
.fgc-voice-wait { width: 100%; text-align: center; color: var(--fg-muted); font-size: 13px; }
.fgc-av-ring { position: relative; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: transparent; transition: box-shadow .12s; flex: none; }
.fgc-av-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--fg-solid-3); }
.fgc-av-ring.big { width: 78px; height: 78px; padding: 3px; }
.is-speaking > .fgc-av-ring, .fgc-voice-tile.is-speaking .fgc-av-ring, .fgc-person.is-speaking .fgc-av-ring { box-shadow: 0 0 0 3px var(--fg-good), 0 0 18px rgba(52, 211, 153, .5); }
.fgc-hud { position: absolute; left: 10px; top: 10px; }
.fgc-side { width: 230px; flex: none; border-left: 1px solid var(--fg-line); padding: 10px; overflow-y: auto; display: none; background: rgba(255, 255, 255, .015); }
.fgc-panel.has-video:not(.side-closed) .fgc-side, .fgc-panel.theater:not(.side-closed) .fgc-side { display: block; }
.fgc-panel:not(.has-video):not(.theater) .fgc-side { display: none; }
.fgc-side-title { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-muted); margin: 2px 2px 8px; }
.fgc-person { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; flex-wrap: wrap; }
.fgc-person:hover { background: var(--fg-surface); }
.fgc-person-info { flex: 1; min-width: 0; }
.fgc-person-name { font-size: 13px; font-weight: 600; color: var(--fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgc-you { color: var(--fg-muted); font-weight: 500; }
.fgc-person-sub { font-size: 11px; color: var(--fg-muted); }
.fgc-vol { display: flex; align-items: center; gap: 6px; width: 100%; padding-left: 52px; }
.fgc-vol input[type=range] { flex: 1; min-width: 0; width: 100%; accent-color: var(--fg-accent); height: 4px; }
.fgc-vol-val { font-size: 10px; color: var(--fg-muted); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.fgc-mini { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-muted); font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.fgc-mini:hover { color: var(--fg-bad); }
.fgc-pop { position: absolute; right: 10px; top: 10px; z-index: 5; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; padding: 14px; border-radius: 16px; background: rgba(var(--fg-solid-rgb), .98); border: 1px solid var(--fg-line-2); box-shadow: var(--fg-shadow-lg); }
.fgc-pop[hidden] { display: none; }
.fgc-pop-title { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 8px; }
.fgc-pop-sub { font-size: 12px; color: var(--fg-muted); margin-bottom: 8px; }
.fgc-stat { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--fg-line); font-size: 12px; }
.fgc-stat span { color: var(--fg-muted); }
.fgc-stat b { color: var(--fg-text); text-align: right; font-variant-numeric: tabular-nums; }
.fgc-set-sec { padding: 10px 0; border-bottom: 1px solid var(--fg-line); }
.fgc-set-sec:last-of-type { border-bottom: none; }
.fgc-set-title { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.fgc-set-note { font-size: 11px; color: var(--fg-muted-2); margin-top: 8px; line-height: 1.5; }
.fgc-q-list { display: flex; flex-direction: column; gap: 6px; }
.fgc-q { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--fg-line); background: var(--fg-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.fgc-q:hover { border-color: var(--fg-line-2); }
.fgc-q.is-on { border-color: rgba(var(--fg-accent-rgb), .5); background: var(--fg-accent-soft); }
.fgc-q input { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fgc-q-ico { font-size: 18px; width: 26px; text-align: center; }
.fgc-q-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fgc-q-txt b { font-size: 13px; color: var(--fg-text); }
.fgc-q-txt small { font-size: 11px; color: var(--fg-muted); line-height: 1.4; }
.fgc-devs { display: flex; flex-direction: column; gap: 8px; }
.fgc-dock { display: flex; justify-content: center; gap: 10px; padding: 12px 12px calc(12px + var(--fg-safe-b)); border-top: 1px solid var(--fg-line); background: rgba(0, 0, 0, .2); }
.fgc-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--fg-line-2); background: var(--fg-surface-2); color: var(--fg-text); display: grid; place-items: center; cursor: pointer; transition: transform .15s var(--fg-ease), background .15s, border-color .15s, color .15s; }
.fgc-btn .fgc-svg { width: 20px; height: 20px; }
.fgc-btn:hover { background: var(--fg-surface-3); transform: translateY(-1px); }
.fgc-btn:active { transform: scale(.94); }
.fgc-btn.is-on { background: var(--fg-accent-soft); color: var(--fg-accent); border-color: rgba(var(--fg-accent-rgb), .45); }
.fgc-btn.is-danger { background: rgba(255, 92, 122, .14); color: #ff8fa3; border-color: rgba(255, 92, 122, .45); }
.fgc-hang { background: linear-gradient(135deg, #ff5c7a, #e0435f); color: #fff; border-color: transparent; width: 58px; border-radius: 18px; }
.fgc-hang:hover { background: linear-gradient(135deg, #ff6d88, #e9506c); }
#stg-call-settings .fgc-set-sec { padding: 12px 0; }
#stg-call-settings .fgc-q-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

#floating-call-btn { right: 22px; bottom: calc(22px + var(--fg-safe-b)); width: 56px; height: 56px; border: 1px solid rgba(52, 211, 153, .5); background: linear-gradient(135deg, #10241d, #0c1712); color: var(--fg-good); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); z-index: 10010; }
#floating-call-btn[data-state="warn"] { color: var(--fg-warn); border-color: rgba(245, 185, 66, .5); }
#floating-call-btn.is-speaking { box-shadow: 0 0 0 3px rgba(52, 211, 153, .65), 0 12px 30px rgba(0, 0, 0, .5); }
#floating-call-btn .fcb-ring { border-color: var(--fg-good); }

@media (max-width: 760px) {
    #expanded-call-panel.fgc-panel, #expanded-call-panel.fgc-panel.has-video { left: 8px; right: 8px; width: auto; bottom: calc(70px + var(--fg-safe-b)); max-height: calc(100vh - 90px); border-radius: 20px; }
    #expanded-call-panel.fgc-panel.theater { inset: 0; border-radius: 0; }
    .fgc-side { display: none !important; }
    .fgc-head-actions .fgc-ico[data-call="people"],
    .fgc-head-actions .fgc-ico[data-call="theater"] { display: none; }
    .fgc-ico { width: 30px; height: 30px; }
    .fgc-head { gap: 8px; padding-left: 12px; }
    .fgc-btn { width: 46px; height: 46px; }
    #floating-call-btn { bottom: calc(76px + var(--fg-safe-b)); right: 14px; }
}

/* ── 15. Notícias ──────────────────────────────────────────────────────────── */
#view-news { overflow: hidden; }
.news-main-tabs { padding: 0 10px; background: rgba(255, 255, 255, .015); border-bottom: 1px solid var(--fg-line); }
.news-main-tab { font-family: var(--fg-font); text-transform: none; letter-spacing: .2px; font-size: 14px; font-weight: 700; padding: 13px 8px; color: var(--fg-muted); }
.news-main-tab.active { color: #fff; border-bottom-color: var(--fg-accent); }
.trans-compare-badge, .trans-compare-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.trans-compare-badge:empty, .trans-compare-count:empty { display: none !important; }
.news-panel { min-height: 0; }
.news-header { background: transparent; border-bottom: 1px solid var(--fg-line); padding: 12px 16px 0; }
.news-header-top { margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.news-header-actions { display: flex; gap: 6px; }
.news-location-badge { opacity: 1; margin: 0; color: var(--fg-text-2); font-size: 13px; }
.news-location-badge b { color: #fff; }
.news-zoom-bar { gap: 6px; padding-bottom: 10px; }
.news-zoom-btn { border-radius: 999px; border: 1px solid var(--fg-line); background: var(--fg-surface); padding: 7px 13px; font-size: 13px; color: var(--fg-text-2); }
.news-zoom-btn.active { background: var(--fg-accent-soft); color: var(--fg-accent); border-color: rgba(var(--fg-accent-rgb), .45); }
.news-topics { padding: 2px 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.news-topics::-webkit-scrollbar { display: none; }
.news-topic-chip { flex: none; font-family: var(--fg-font); font-weight: 600; font-size: 12.5px; letter-spacing: .1px; padding: 6px 12px; box-shadow: none; }
.news-topic-chip.active { background: var(--fg-accent-soft); border-color: rgba(var(--fg-accent-rgb), .45); box-shadow: none; }
.news-tools { display: flex; gap: 8px; align-items: center; padding-bottom: 12px; }
.news-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--fg-line-2); }
.news-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 9px 0; color: var(--fg-text); font-size: 14px; }
.news-viewtoggle { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--fg-line); }
.news-viewtoggle button { width: 34px; height: 30px; border: none; border-radius: 9px; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 14px; }
.news-viewtoggle button.active { background: var(--fg-accent-soft); color: var(--fg-accent); }
.news-cards-container { padding: 14px 16px 40px; gap: 14px; }
.news-updated { font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.news-hero { position: relative; display: block; border-radius: 22px; overflow: hidden; background: var(--fg-solid-2); border: 1px solid var(--fg-line); min-height: 260px; }
.news-hero.no-img { min-height: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 14%, var(--fg-solid-2)), var(--fg-solid)); }
.news-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--fg-bg-rgb), .05) 20%, rgba(var(--fg-bg-rgb), .92)); pointer-events: none; }
.news-hero.no-img::after { display: none; }
.news-hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 260px; padding: 22px 22px 20px; text-decoration: none; color: #fff; box-sizing: border-box; }
.news-hero.no-img .news-hero-body { min-height: 0; }
.news-hero-title { font-family: var(--fg-display); font-size: clamp(19px, 2.6vw, 26px); line-height: 1.25; margin: 0; color: #fff; }
.news-hero-desc { color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.55; margin: 0; max-width: 760px; }
.news-cat-badge { align-self: flex-start; color: var(--cat, var(--fg-accent)); border-color: color-mix(in srgb, var(--cat, var(--fg-accent)) 50%, transparent); background: color-mix(in srgb, var(--cat, var(--fg-accent)) 12%, rgba(0, 0, 0, .35)); font-family: var(--fg-font); letter-spacing: .6px; font-size: 10px; font-weight: 800; }
.news-meta { font-size: 12px; color: rgba(255, 255, 255, .62); }
.news-meta b { color: rgba(255, 255, 255, .85); font-weight: 600; }
.news-acts, .news-row-acts { display: flex; gap: 6px; }
.news-hero .news-acts, .news-card .news-acts { position: absolute; top: 12px; right: 12px; z-index: 2; }
.news-act { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(var(--fg-bg-rgb), .62); color: #fff; font-size: 15px; display: grid; place-items: center; cursor: pointer; transition: transform .15s var(--fg-ease), background .15s; }
.news-act:hover { background: rgba(var(--fg-bg-rgb), .85); transform: scale(1.06); }
.news-act.is-on { color: var(--fg-gold); border-color: rgba(255, 209, 102, .5); }
.news-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.news-card { position: relative; border-radius: 18px; background: var(--fg-surface) !important; border: 1px solid var(--fg-line) !important; transition: transform .18s var(--fg-ease), border-color .18s; overflow: hidden; }
.news-card:hover { transform: translateY(-2px); border-color: var(--fg-line-2) !important; background: var(--fg-surface-2) !important; }
.news-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.news-card-img { height: 150px; background: var(--fg-solid-3); }
.news-card-body { padding: 12px 14px 14px; gap: 8px; }
.news-card-title { font-size: 14.5px; font-weight: 700; color: var(--fg-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .news-meta { color: var(--fg-muted); margin-top: auto; }
.news-card .news-meta b { color: var(--fg-text-2); }
.news-card .news-act { width: 30px; height: 30px; font-size: 13px; }
.news-card.no-img .news-acts { top: 8px; right: 8px; }
.news-card.no-img .news-card-body { padding-right: 84px; }
.news-list { display: flex; flex-direction: column; gap: 6px; }
.news-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--fg-surface); border: 1px solid var(--fg-line); border-left: 3px solid var(--cat, var(--fg-accent)); }
.news-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.news-row-cat { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--cat, var(--fg-accent)); }
.news-row-title { font-size: 14px; font-weight: 600; color: var(--fg-text); line-height: 1.4; }
.news-row-meta { font-size: 12px; color: var(--fg-muted); }
.news-row .news-act { background: var(--fg-surface-2); border-color: var(--fg-line-2); }
.news-skel .sk-card { height: 230px; }
.fg-data-saver .news-hero-img { display: none; }

/* ── 16. Portal da Transparência ───────────────────────────────────────────── */
.trans-subtabs { padding: 0 10px; border-bottom: 1px solid var(--fg-line); background: transparent; }
.trans-tab-btn { font-family: var(--fg-font); text-transform: none; letter-spacing: .2px; font-size: 13px; padding: 11px 6px; }
.trans-tab-btn.active { color: #fff; border-bottom-color: var(--fg-accent); }
.trans-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 50px; }
.trans-search-bar { gap: 12px; }
.trans-country-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; gap: 6px; }
.trans-country-chips::-webkit-scrollbar { display: none; }
.trans-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 11px; font-size: 12px; border-radius: 999px; }
.trans-chip span { font-size: 14px; }
.trans-input-row .gs-input { flex: 1; border-radius: 12px; }
.trans-search-go { flex: none; width: 44px; height: 42px; border-radius: 12px; border: 1px solid rgba(var(--fg-accent-rgb), .35); background: var(--fg-accent-soft); color: var(--fg-accent); cursor: pointer; font-size: 15px; }
.trans-results-header { padding: 4px 0 10px; color: var(--fg-text-2); font-size: 13px; gap: 10px; }
.trans-results-header .glass-btn { flex: none; margin: 0; padding: 6px 12px; font-size: 12px; }
.trans-recent { margin-bottom: 16px; }
.trans-recent-label, .trans-mini-label { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-muted); margin: 6px 0 8px; }
.trans-recent-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.trans-recent-row::-webkit-scrollbar { display: none; }
.trans-recent-item { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--fg-line); background: var(--fg-surface); color: var(--fg-text-2); cursor: pointer; font-size: 11px; font-weight: 600; text-align: center; }
.trans-recent-item:hover { border-color: var(--fg-accent-line); }
.trans-recent-item img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--fg-solid-3); }
.trans-recent-item span { line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trans-country-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--fg-accent-rgb), .08), rgba(167, 139, 250, .06)); border: 1px solid var(--fg-line-2); }
.trans-country-flag { font-size: 30px; }
.trans-country-info { flex: 1; min-width: 0; }
.trans-country-title { font-family: var(--fg-display); font-size: 18px; color: #fff; }
.trans-country-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.trans-country-banner .glass-btn { flex: none; margin: 0; padding: 8px 12px; font-size: 12px; }
.trans-local-section { margin-bottom: 26px; }
.trans-local-section-header { border-left: 3px solid var(--accent, var(--fg-accent)); padding-left: 12px; }
.trans-local-section-title { font-family: var(--fg-display); font-size: 16px; color: #fff; letter-spacing: .2px; }
.trans-local-count { background: color-mix(in srgb, var(--accent, var(--fg-accent)) 14%, transparent); color: var(--accent, var(--fg-accent)); }
.is-collapsed > .is-extra { display: none !important; }
.trans-more-btn { display: block; margin: 10px auto 0; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.trans-more-btn:hover { border-color: var(--fg-accent-line); color: var(--fg-accent); }
.trans-exec-card { border-radius: 20px; background: var(--fg-surface); border-color: var(--fg-line); max-width: 270px; }
.trans-exec-card:hover { transform: translateY(-3px); }
.trans-exec-party { color: var(--accent); border-color: color-mix(in srgb, var(--accent, var(--fg-accent)) 40%, transparent); background: color-mix(in srgb, var(--accent, var(--fg-accent)) 12%, transparent); }
.trans-exec-actions .fav-star-btn, .trans-hero-actions .fav-star-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.fav-star-btn { color: #c9a227; }
.fav-star-btn.on { color: var(--fg-gold); background: rgba(255, 209, 102, .2); }
.trans-mini-card { border-radius: 14px; padding: 10px 10px 10px 12px; }
.trans-mini-photo { width: 48px; height: 48px; background: var(--fg-solid-3); }
.trans-mini-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.trans-mini-party { color: var(--accent, var(--fg-accent)); }
.trans-mini-role { font-size: 11px; color: var(--fg-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.trans-mini-cmp { border-color: var(--fg-line-2); color: var(--fg-muted); width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.trans-mini-cmp.active { color: var(--fg-accent); border-color: rgba(var(--fg-accent-rgb), .5); background: var(--fg-accent-soft); }
.trans-card { border-radius: 16px; background: var(--fg-surface); border-color: var(--fg-line); }
.trans-card-photo { background: var(--fg-solid-3); }
.trans-card-source { color: var(--fg-muted); }
.trans-card-source.s-camara { color: var(--fg-accent); } .trans-card-source.s-senado { color: #ffd166; } .trans-card-source.s-wikidata { color: #c4b5fd; }
.trans-card .trans-compare-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 16px; }
.trans-meta-chip { border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--fg-text-2); }
.trans-meta-chip.gold { color: var(--fg-gold); border-color: rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .08); font-weight: 700; }
.trans-chips-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.trans-footnote { font-size: 11px; color: var(--fg-muted-2); line-height: 1.5; margin-top: 18px; text-align: center; }
.loc-banner { border-radius: 18px; }
.loc-banner-info { min-width: 0; }
.loc-selector-panel[hidden] { display: none; }

.trans-profile-wrap { max-width: 860px; margin: 0 auto; }
.trans-back-btn { border-radius: 10px; padding: 7px 12px; }
.trans-profile-hero { align-items: center; gap: 18px; padding: 18px; border-radius: 22px; background: radial-gradient(500px 200px at 0% 0%, rgba(var(--fg-accent-rgb), .1), transparent 70%), var(--fg-surface); border: 1px solid var(--fg-line); }
.trans-profile-photo { width: 104px; height: 104px; border: 3px solid rgba(var(--fg-accent-rgb), .35); background: var(--fg-solid-3); }
.trans-profile-name { font-size: 22px; }
.trans-profile-role { font-size: 14px; color: var(--fg-text-2); }
.trans-hero-rating { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.trans-hero-rating b { color: var(--fg-gold); }
.trans-hero-rating span { color: var(--fg-muted); }
.trans-hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: none; }
.trans-compare-btn-lg { border-radius: 12px; padding: 9px 14px; }
.trans-section { border-radius: 18px; padding: 16px 18px; background: var(--fg-surface); border-color: var(--fg-line); margin-bottom: 14px; }
.trans-section-label { font-family: var(--fg-font); font-size: 13px; letter-spacing: .3px; text-transform: none; color: #fff; font-weight: 700; gap: 10px; }
.trans-section-label .chip { font-size: 11px; padding: 5px 10px; }
.trans-total { color: var(--fg-gold); font-size: 13px; }
.trans-bio { color: var(--fg-text-2); font-size: 14px; line-height: 1.7; margin: 0; }
.trans-hint { font-size: 12px; color: var(--fg-muted); margin-bottom: 10px; }
.trans-list { margin: 0; padding-left: 18px; color: var(--fg-text-2); font-size: 14px; line-height: 1.8; }
.trans-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trans-row-main b { font-size: 13px; color: var(--fg-text); font-weight: 600; line-height: 1.45; }
.trans-row-main span { font-size: 11px; color: var(--fg-muted); }
.trans-row-main small { font-size: 10px; color: var(--fg-muted); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.trans-row-side { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.trans-row-side b { color: var(--fg-gold); font-size: 13px; }
.trans-row-side span { font-size: 11px; color: var(--fg-muted-2); }
.trans-benefit-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trans-benefit-row b { font-size: 13px; color: var(--fg-text); }
.trans-benefit-row span { font-size: 11px; color: var(--fg-muted); }
.trans-benefit-row em { font-style: normal; color: var(--fg-gold); font-weight: 700; font-size: 12px; flex: none; }
.trans-salary-value small { font-size: 12px; color: var(--fg-muted); font-weight: 500; margin-left: 4px; }
.trans-vote { flex: none; font-size: 12px; font-weight: 700; color: var(--fg-muted); }
.trans-vote.yes { color: var(--fg-good); } .trans-vote.no { color: var(--fg-bad); } .trans-vote.abs { color: var(--fg-warn); } .trans-vote.obs { color: #c4b5fd; }
.trans-legal-notice { border-radius: 12px; font-size: 12px; }
.trans-charge { padding: 12px 0; border-bottom: 1px solid var(--fg-line); }
.trans-charge:last-of-type { border-bottom: none; }
.trans-charge-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.trans-charge-date { font-size: 11px; color: var(--fg-muted); }
.trans-charge-text { font-size: 14px; color: var(--fg-text); line-height: 1.55; }
.trans-pill { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.trans-pill.ok { color: var(--fg-good); background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); }
.trans-pill.bad { color: #ff8fa3; background: rgba(255, 92, 122, .12); border: 1px solid rgba(255, 92, 122, .3); }
.trans-pill.warn { color: var(--fg-warn); background: rgba(245, 185, 66, .12); border: 1px solid rgba(245, 185, 66, .3); }
.trans-empty-note { font-size: 13px; color: var(--fg-muted); line-height: 1.6; padding: 6px 0; }
.trans-reviewed { margin-top: 10px; font-size: 11px; color: var(--fg-muted-2); }
.trans-source-link { opacity: 1; color: var(--fg-accent); font-weight: 600; }
.trans-audit { border-color: rgba(52, 211, 153, .25); background: linear-gradient(135deg, rgba(52, 211, 153, .06), rgba(var(--fg-accent-rgb), .03)); }
.trans-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.trans-check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 999px; color: var(--fg-good); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }
.trans-stars { color: var(--fg-gold); letter-spacing: 2px; }
.trans-rating-summary { border-radius: 14px; }
.trans-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.trans-star { background: none; border: none; padding: 2px 3px; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, .18); cursor: pointer; transition: color .12s, transform .12s var(--fg-spring); }
.trans-star.on, .trans-stars-input .trans-star:hover, .trans-stars-input .trans-star:hover ~ .trans-star { color: var(--fg-gold); }
.trans-star:hover { transform: scale(1.15); }
.trans-rating-widget textarea { margin: 10px 0; }
.trans-rating-widget .btn-main { width: auto; padding: 11px 20px; margin: 0; }
.trans-rated { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; background: var(--fg-accent-soft); border: 1px solid rgba(var(--fg-accent-rgb), .25); color: var(--fg-text); font-size: 13px; text-align: center; }
.trans-dist { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.trans-dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.trans-dist-row .pf-bar { flex: 1; height: 8px; }
.trans-dist-row .pf-bar > i { background: var(--fg-gold); }
.trans-dist-row span:first-child { width: 22px; }
.trans-dist-row span:last-child { width: 28px; text-align: right; }
.trans-comment { border-radius: 12px; margin-bottom: 8px; }
.trans-comment-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--fg-muted); }
.trans-comment-user { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--fg-text); font-size: 12px; cursor: pointer; }
.trans-comment-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.trans-comment-text { font-size: 13px; color: var(--fg-text-2); margin-top: 6px; line-height: 1.5; }
.trans-enc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#trans-enc-edits, #trans-enc-hist { margin-top: 12px; }
.trans-empty-profile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; }
.trans-empty-ico { font-size: 42px; }
.trans-empty-title { font-family: var(--fg-display); font-size: 18px; color: #fff; }
.trans-empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.trans-empty-profile .glass-btn, .trans-empty-actions .glass-btn { flex: none; }
.trans-cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.trans-cmp-title { font-family: var(--fg-display); font-size: 19px; color: #fff; }
.trans-cmp-actions { display: flex; gap: 8px; }
.trans-cmp-actions .glass-btn { flex: none; margin: 0; padding: 8px 14px; font-size: 12px; }
.trans-cmp-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--fg-line); }
.trans-compare-table { background: var(--fg-surface); }
.trans-cmp-header { vertical-align: top; position: relative; }
.trans-cmp-header .chip { margin-top: 8px; padding: 3px 8px; font-size: 10px; }
.trans-cmp-name { cursor: pointer; }
.trans-cmp-name:hover { color: var(--fg-accent); }
.trans-cmp-label { position: sticky; left: 0; background: var(--fg-solid); z-index: 1; }

/* Enciclopédia viva */
.trust-block { display: flex; flex-direction: column; gap: 8px; }
.trust-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-text-2); }
.trust-top b { font-family: var(--fg-label); font-size: 18px; }
.trust-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--fg-muted); }
.enc-edit { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid var(--fg-line); margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.enc-edit-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.enc-status { font-size: 11px; font-weight: 700; }
.enc-status.s-pending { color: var(--fg-warn); } .enc-status.s-approved { color: var(--fg-good); } .enc-status.s-rejected { color: var(--fg-bad); }
.enc-edit-val { font-size: 13px; color: var(--fg-text); background: var(--fg-surface); padding: 8px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.enc-edit-reason { font-size: 12px; color: var(--fg-muted); font-style: italic; }
.enc-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-src { font-size: 11px; color: var(--fg-accent); text-decoration: none; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(var(--fg-accent-rgb), .25); }
.enc-edit-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-muted); }
.enc-votes { display: flex; gap: 6px; }
.enc-votes .chip { padding: 4px 9px; font-size: 11px; }
.enc-note { font-size: 11px; color: var(--fg-muted); border-top: 1px solid var(--fg-line); padding-top: 6px; }
.enc-hist { display: flex; flex-direction: column; gap: 4px; }
.enc-hist-row { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--fg-text-2); padding: 6px 0; border-bottom: 1px solid var(--fg-line); }
.enc-hist-row b { flex: 1; color: var(--fg-text); }
.enc-mod-note { margin-top: 2px; }
.enc-mod-actions { display: flex; gap: 8px; }
.sg-src-row { display: grid; grid-template-columns: 1.4fr 1fr 130px; gap: 6px; margin-bottom: 6px; }
@media (max-width: 560px) { .sg-src-row { grid-template-columns: 1fr; } }
#sg-sources-list + .glass-btn { flex: none; margin-top: 4px; padding: 8px 12px; font-size: 12px; align-self: flex-start; }

/* ── 17. Quiz e glória ─────────────────────────────────────────────────────── */
.qz-wrap { max-width: 760px; margin: 0 auto; width: 100%; padding: 16px 16px 40px; box-sizing: border-box; }
.glory-card { padding: 18px; border-radius: 22px; margin-bottom: 18px; background: radial-gradient(400px 160px at 0% 0%, rgba(var(--fg-accent-rgb), .14), transparent 70%), radial-gradient(400px 160px at 100% 100%, rgba(167, 139, 250, .16), transparent 70%), var(--fg-surface); border: 1px solid var(--fg-line-2); }
.glory-top { display: flex; justify-content: space-between; gap: 12px; }
.glory-rank { font-family: var(--fg-display); font-size: 22px; color: #fff; }
.glory-pts { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.glory-pts b { color: var(--fg-accent); font-family: var(--fg-label); font-size: 16px; }
.glory-right { text-align: right; }
.glory-ico { font-size: 34px; line-height: 1; }
.glory-plan { font-size: 11px; color: var(--fg-accent); margin-top: 4px; }
.glory-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); overflow: hidden; margin-top: 14px; }
.glory-bar i { position: absolute; inset: 0 auto 0 0; display: block; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--fg-accent), #a78bfa); transition: width .7s var(--fg-ease); }
.glory-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--fg-muted); margin-top: 8px; }
.qz-section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
.qz-section-head h3 { margin: 0; font-family: var(--fg-display); font-size: 17px; color: #fff; }
.qz-tabs { margin-bottom: 12px; }
.qz-today { margin-left: auto; font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.qz-list { display: flex; flex-direction: column; gap: 8px; }
.qz-daily-head { font-size: 12px; color: var(--fg-muted); text-align: right; margin-bottom: 4px; }
.qz-cat { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 13px; }
.qz-cat b { color: var(--qz); font-weight: 800; letter-spacing: .3px; }
.qz-cat em { font-style: normal; font-size: 11px; color: var(--fg-muted); }
.qz-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--fg-surface); border: 1px solid var(--fg-line); border-left: 3px solid var(--qz, var(--fg-accent)); transition: border-color .15s, background .15s; }
.qz-card:hover { background: var(--fg-surface-2); }
.qz-card.done { opacity: .6; }
.qz-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--qz, var(--fg-accent)) 14%, transparent); }
.qz-body { flex: 1; min-width: 0; }
.qz-title { font-weight: 700; font-size: 14px; color: var(--fg-text); line-height: 1.35; }
.qz-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--fg-muted); font-weight: 600; }
.qz-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.qz-actions .fav-star-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.qz-play { padding: 9px 16px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)); color: var(--fg-ink); font-family: var(--fg-label); font-weight: 700; font-size: 13px; letter-spacing: .6px; cursor: pointer; }
.qz-play:hover { filter: brightness(1.06); }
.qz-done { font-size: 12px; font-weight: 700; color: var(--fg-good); }
.qz-empty { padding: 30px 16px; }
.qz-empty-ico { font-size: 36px; }
.qz-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.qz-empty-actions > * { flex: none; width: auto; margin: 0; }
.qz-ranking { display: flex; flex-direction: column; gap: 6px; }
.qz-rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--fg-surface); border: 1px solid var(--fg-line); cursor: pointer; }
.qz-rank-row.me { border-color: rgba(var(--fg-accent-rgb), .4); background: var(--fg-accent-soft); }
.qz-rank-pos { width: 28px; text-align: center; font-size: 16px; font-weight: 800; color: var(--fg-muted); }
.qz-rank-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.qz-rank-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-rank-pts { font-family: var(--fg-label); font-weight: 700; color: var(--fg-accent); }
.qz-modal { z-index: 10030; }
.qz-box { max-width: 560px; width: 94%; text-align: left; padding: 20px; }
.qz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qz-step { flex: 1; font-family: var(--fg-label); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--fg-accent); }
.qz-timer { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--fg-muted); font-weight: 700; }
.qz-progress { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-bottom: 18px; }
.qz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--fg-accent), #a78bfa); transition: width .3s var(--fg-ease); }
.qz-question { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.5; margin-bottom: 16px; }
.qz-options { display: flex; flex-direction: column; gap: 8px; }
.qz-opt { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text); font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--fg-ease); }
.qz-opt span { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--fg-surface-2); color: var(--fg-accent); }
.qz-opt:hover:not(:disabled) { border-color: var(--fg-accent-line); background: var(--fg-surface-2); }
.qz-opt:active:not(:disabled) { transform: scale(.99); }
.qz-opt:disabled { cursor: default; }
.qz-opt.right { border-color: rgba(52, 211, 153, .7); background: rgba(52, 211, 153, .12); color: #d1fae5; }
.qz-opt.right span { background: var(--fg-good); color: #04130c; }
.qz-opt.wrong { border-color: rgba(255, 92, 122, .7); background: rgba(255, 92, 122, .12); color: #ffe4e9; }
.qz-opt.wrong span { background: var(--fg-bad); color: #fff; }
.qz-expl { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--fg-accent-soft); border: 1px solid rgba(var(--fg-accent-rgb), .2); font-size: 13px; color: var(--fg-text-2); line-height: 1.55; }
.qz-nav { display: flex; justify-content: flex-end; margin-top: 16px; }
.qz-nav[hidden] { display: none; }
.qz-nav .btn-main { width: auto; margin: 0; padding: 11px 22px; }
.qz-keys { margin-top: 14px; text-align: center; font-size: 11px; }
@media (hover: none) { .qz-keys { display: none; } }
.qz-result { text-align: center; max-width: 440px; }
.qz-result-ico { font-size: 52px; }
.qz-result-score { font-family: var(--fg-display); font-size: 24px; color: #fff; margin: 6px 0 4px; }
.qz-result-glory { margin: 16px 0; padding: 16px; border-radius: 16px; background: var(--fg-accent-soft); border: 1px solid rgba(var(--fg-accent-rgb), .25); display: flex; flex-direction: column; gap: 4px; }
.qz-result-glory b { font-family: var(--fg-label); font-size: 32px; color: var(--fg-accent); }
.qz-result-glory span { font-size: 12px; color: var(--fg-muted); }
.qz-review { text-align: left; margin-bottom: 14px; }
.qz-review summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--fg-text-2); padding: 6px 0; }
.qz-review-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--fg-line); font-size: 13px; }
.qz-review-row > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.qz-review-row.ok > span { background: rgba(52, 211, 153, .18); color: var(--fg-good); }
.qz-review-row.bad > span { background: rgba(255, 92, 122, .18); color: var(--fg-bad); }
.qz-review-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qz-review-row b { font-weight: 600; color: var(--fg-text); line-height: 1.4; }
.qz-review-row small { color: var(--fg-good); }
.qz-review-row em { font-style: normal; color: var(--fg-accent); font-weight: 700; font-size: 12px; }

/* ── 18. Favoritos ─────────────────────────────────────────────────────────── */
.fav-tab { font-family: var(--fg-font); font-size: 13px; letter-spacing: .2px; padding: 11px 14px; color: var(--fg-muted); }
.fav-tab.active { color: #fff; border-bottom-color: var(--fg-accent); }
.fav-count { margin-left: 6px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--fg-surface-2); color: var(--fg-text-2); }
.fav-count:empty { display: none; }
.fav-panel { max-width: 760px; margin: 0 auto; }
.fav-item { border-radius: 16px; padding: 11px 12px; background: var(--fg-surface); border-color: var(--fg-line); }
.fav-item-icon { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; font-size: 17px; }
.fav-item-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fav-item-title { font-size: 14px; }
.fav-item-sub { font-size: 12px; }
.fav-item-go { color: var(--fg-muted-2); font-size: 20px; padding: 0 4px; }
.fav-empty-ico { font-size: 34px; }

/* ── 19. VIP ───────────────────────────────────────────────────────────────── */
.vip-root { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.vip-hero { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 22px; background: radial-gradient(400px 180px at 0% 0%, rgba(255, 209, 102, .16), transparent 70%), radial-gradient(400px 180px at 100% 100%, rgba(167, 139, 250, .18), transparent 70%), var(--fg-surface); border: 1px solid rgba(255, 209, 102, .25); }
.vip-hero.is-active { border-color: rgba(52, 211, 153, .35); }
.vip-hero-ico { font-size: 40px; }
.vip-hero-txt { flex: 1; min-width: 0; }
.vip-hero-title { font-family: var(--fg-display); font-size: 22px; color: #fff; letter-spacing: 1px; }
.vip-hero-sub { font-size: 13px; color: var(--fg-muted); margin-top: 3px; }
.vip-badge { flex: none; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(52, 211, 153, .15); color: var(--fg-good); border: 1px solid rgba(52, 211, 153, .35); }
.vip-glory-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vip-glory-ico { font-size: 28px; }
.vip-glory-row b { display: block; color: #fff; font-size: 16px; }
.vip-glory-row small { color: var(--fg-muted); font-size: 12px; }
.vip-glory .pf-bar { margin-bottom: 8px; }
.vip-offer { text-align: center; }
.vip-billing { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.vip-billing em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #10b981; color: #fff; margin-left: 4px; }
.vip-price { font-family: var(--fg-label); font-weight: 700; font-size: 38px; color: #fff; line-height: 1.1; }
.vip-price small { font-size: 14px; color: var(--fg-muted); font-weight: 500; margin-left: 4px; }
.vip-offer .btn-main { margin-top: 14px; }
.vip-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vip-benefits .vip-benefit { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .18); border: 1px solid var(--fg-line); }
.vip-benefits .vip-benefit > span { font-size: 20px; flex: none; }
.vip-benefits .vip-benefit b { display: block; font-size: 13px; color: var(--fg-text); }
.vip-benefits .vip-benefit small { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; line-height: 1.4; }
.vip-manage .btn-main { margin-top: 8px; }
.vip-manage .link-btn { display: block; margin: 12px auto 0; }
.vup-active { font-size: 11px; color: var(--fg-good); margin-left: 6px; }
.vup-box { border-radius: 24px; background: linear-gradient(180deg, var(--fg-solid-2), var(--fg-solid)); }

/* ── 20. Configurações e cosméticos ────────────────────────────────────────── */
#view-settings { height: auto; min-height: 0; overflow: hidden; overflow: clip; }
.stg-container { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.stg-live-card { border-radius: 22px; border-color: var(--fg-line-2); background: var(--fg-solid); box-shadow: none; }
.stg-live-banner { border-radius: 21px 21px 0 0; }
.stg-preview-bubble { display: inline-block; font-size: 12.5px; padding: 7px 14px; margin: 0; }
.stg-nav-pills { background: rgba(0, 0, 0, .25); border-color: var(--fg-line); border-radius: 16px; }
.stg-pill { font-family: var(--fg-font); text-transform: none; letter-spacing: .1px; font-size: 13px; font-weight: 700; border-radius: 12px; }
.stg-pill.active { box-shadow: none; }
.stg-subtab { font-family: var(--fg-font); letter-spacing: .1px; font-size: 13px; }
.settings-section { padding: 18px; border-radius: 20px; background: var(--fg-surface); border: 1px solid var(--fg-line); margin-bottom: 12px; }
.settings-section-title { font-family: var(--fg-font); font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 12px; letter-spacing: .2px; }
.stg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.stg-row-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.stg-row-txt b { font-size: 14px; color: var(--fg-text); }
.stg-row-txt small { font-size: 12px; color: var(--fg-muted); }
.toggle-pill { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--fg-accent-line); background: var(--fg-accent-soft); color: var(--fg-accent); font-weight: 800; font-size: 12px; cursor: pointer; }
.toggle-pill.is-on { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .14); color: #c4b5fd; }
.stg-switches { display: flex; flex-direction: column; }
.stg-switches .fgc-switch + .fgc-switch { border-top: 1px solid var(--fg-line); }
.stg-acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stg-acc { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--fg-line); }
.stg-acc span { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .6px; }
.stg-acc b { font-family: var(--fg-label); font-size: 19px; color: #fff; }
/* Seletor de temas: cada cartão é uma miniatura do app pintada com as cores do tema */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; border-radius: 18px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text); text-align: left; cursor: pointer; transition: border-color .15s, transform .2s var(--fg-ease); }
.theme-card:hover { border-color: var(--fg-accent-line); transform: translateY(-2px); }
.theme-card.active { border-color: rgba(var(--fg-accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--fg-accent-rgb), .12); }
.theme-card:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.theme-mock { display: flex; height: 104px; border-radius: 12px; overflow: hidden; background: var(--pv-bg); border: 1px solid rgba(255, 255, 255, .06); }
.tm-rail { width: 22px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; background: rgba(0, 0, 0, .28); }
.tm-rail i { width: 10px; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.tm-rail i.on { background: var(--pv-acc); }
.tm-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; min-width: 0; }
.tm-title { width: 46%; height: 7px; border-radius: 3px; background: var(--pv-ink); opacity: .85; }
.tm-card { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 8px; background: var(--pv-card); }
.tm-av { width: 16px; height: 16px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--pv-acc), var(--pv-acc2)); }
.tm-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tm-lines b, .tm-lines s { display: block; height: 4px; border-radius: 2px; background: var(--pv-ink); opacity: .55; }
.tm-lines s { width: 60%; opacity: .3; }
.tm-bubble { align-self: flex-end; width: 44%; height: 12px; border-radius: 8px 8px 3px 8px; background: color-mix(in srgb, var(--pv-acc) 35%, transparent); border: 1px solid color-mix(in srgb, var(--pv-acc) 45%, transparent); }
.tm-btn { width: 38%; height: 12px; border-radius: 6px; margin-top: auto; background: linear-gradient(120deg, var(--pv-acc), var(--pv-acc2)); }
.theme-card[data-tm="retro"] .theme-mock, .theme-card[data-tm="retro"] .tm-card, .theme-card[data-tm="retro"] .tm-btn, .theme-card[data-tm="retro"] .tm-bubble { border-radius: 2px; }
.theme-card[data-tm="retro"] .tm-btn { box-shadow: 2px 2px 0 #05061a; }
.theme-card[data-tm="anime"] .tm-btn, .theme-card[data-tm="anime"] .tm-bubble { border-radius: 999px; }
.theme-card[data-tm="medieval"] .tm-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-acc) 40%, transparent); }
.theme-info { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.theme-name { font-size: 14px; font-weight: 700; }
.theme-info small { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.theme-state { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .15s; }
.theme-card:hover .theme-state, .theme-state.on, .theme-state.locked { opacity: 1; }
.theme-state.on { background: var(--fg-accent); color: var(--fg-ink); }
.theme-state.locked { color: var(--fg-gold); }
.theme-card.locked .theme-mock { filter: saturate(.75) brightness(.85); }
.cosm-intro { margin: 0 0 12px; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.settings-lang-btn { border-radius: 12px; }

.cosm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 4px 0 8px; }
.cosm-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); text-align: center; transition: border-color .15s, transform .15s var(--fg-ease); }
.cosm-card[data-act] { cursor: pointer; }
.cosm-card[data-act]:hover { border-color: var(--fg-accent-line); transform: translateY(-2px); }
.cosm-card.is-active { border-color: rgba(255, 209, 102, .6); background: rgba(255, 209, 102, .06); }
.cosm-card.is-locked { opacity: .6; }
.cosm-badge { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--fg-gold); color: #241500; z-index: 2; }
.cosm-lock { position: absolute; top: 8px; left: 8px; font-size: 12px; z-index: 2; }
/* vitrine: holofote no centro em vez da capa do usuário (o item é a estrela) */
.cosm-prev-border { width: 100%; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .09), transparent 58%), linear-gradient(180deg, var(--fg-solid-2), var(--fg-bg)); display: flex; flex-direction: column; align-items: center; padding: 16px 6px 10px; gap: 6px; }
.cosm-prev-av { position: relative; width: 92px; height: 92px; }
.cosm-prev-av img:first-child { position: absolute; top: 50%; left: 50%; width: 71px; height: 71px; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; border: 2px solid var(--fg-bg); }
.cosm-prev-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cosm-card.is-locked .cosm-prev-frame { filter: grayscale(1) opacity(.45); }
.cosm-prev-border > span { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.cosm-prev-bubble { padding: 10px 4px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.cosm-prev-bubble .msg-bubble { display: inline-block; font-size: 12px; }
.cosm-card.is-locked .cosm-prev-bubble { filter: grayscale(1) opacity(.5); }
.cosm-name { font-weight: 700; font-size: 13px; color: var(--fg-text); }
.cosm-desc { font-size: 11px; color: var(--fg-muted); line-height: 1.35; }
.cosm-use { width: 100%; padding: 7px; border-radius: 10px; border: 1px solid rgba(var(--fg-accent-rgb), .35); background: var(--fg-accent-soft); color: var(--fg-accent); font-weight: 700; font-size: 12px; cursor: pointer; }
.cosm-state { font-size: 11px; font-weight: 700; }
.cosm-state.on { color: var(--fg-gold); }
.cosm-state.locked { color: var(--fg-muted); font-weight: 600; line-height: 1.4; }
.cosm-card .pf-bar { width: 100%; height: 5px; }
.cosm-card .pf-bar > i { background: var(--fg-gold); }
.cosm-card small { font-size: 10px; color: var(--fg-muted); }
.cosm-sub { font-size: 11px; font-weight: 800; letter-spacing: .6px; color: var(--fg-muted); margin: 6px 0 8px; }
.cosm-sub small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.cosm-fonts { display: flex; flex-direction: column; gap: 6px; }
.cosm-font { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); }
.cosm-font[data-act] { cursor: pointer; }
.cosm-font[data-act]:hover { border-color: var(--fg-accent-line); }
.cosm-font.is-active { border-color: rgba(255, 209, 102, .6); }
.cosm-font.is-locked { opacity: .55; }
.cosm-font-txt { flex: 1; min-width: 0; }
.cosm-font-sample { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cosm-font-txt small { font-size: 10px; color: var(--fg-muted); }
.cosm-font .cosm-use { width: auto; padding: 6px 12px; }
.cosm-colors { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .2); border: 1px solid var(--fg-line); display: flex; flex-direction: column; gap: 8px; }
.cosm-color-row { display: flex; align-items: center; gap: 8px; }
.cosm-color-row input[type=color] { width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; flex: none; }
.cosm-color-row input[type=color].is-empty { opacity: .35; }
.cosm-color-row .gs-input { flex: 1; }
.cosm-name-prev { padding: 10px 12px; border-radius: 12px; background: var(--fg-bg); font-size: 13px; color: var(--fg-muted); }
.cosm-name-prev span { font-weight: 700; font-size: 16px; margin-left: 8px; }
.cosm-vip-note { margin-top: 14px; padding: 12px; border-radius: 14px; text-align: center; font-size: 12px; color: var(--fg-muted); background: rgba(255, 209, 102, .05); border: 1px solid rgba(255, 209, 102, .15); }

/* ── 21. Emoji / GIF ───────────────────────────────────────────────────────── */
.ep { position: fixed; flex-direction: column; width: 340px; max-height: 420px; border-radius: 20px; background: var(--fg-solid-2); border: 1px solid var(--fg-line-2); box-shadow: var(--fg-shadow-lg); z-index: 10045; overflow: hidden; }
.ep-head { display: flex; align-items: center; border-bottom: 1px solid var(--fg-line); flex-shrink: 0; }
.ep-tab { flex: 1; padding: 11px 6px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg-muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.ep-tab.active { color: var(--fg-accent); border-bottom-color: var(--fg-accent); }
.ep-close { padding: 8px 14px; background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: 16px; }
.ep-close:hover { color: var(--fg-bad); }
.ep-panel { flex-direction: column; min-height: 0; }
.ep-cats { display: flex; gap: 2px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--fg-line); flex-shrink: 0; }
.ep-cats::-webkit-scrollbar { display: none; }
.ep-cat-btn { flex: none; width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; font-size: 18px; cursor: pointer; }
.ep-cat-btn.active, .ep-cat-btn:hover { background: var(--fg-surface-2); }
.ep-search { padding: 8px; flex-shrink: 0; }
.ep-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--fg-line-2); background: rgba(0, 0, 0, .25); color: var(--fg-text); font-size: 13px; outline: none; }
.ep-search input:focus { border-color: rgba(var(--fg-accent-rgb), .5); }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 4px 8px 10px; max-height: 230px; overflow-y: auto; }
.ep-emoji-item { aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 8px; font-size: 22px; cursor: pointer; padding: 0; transition: transform .1s, background .1s; }
.ep-emoji-item:hover { background: var(--fg-surface-2); transform: scale(1.12); }
.ep-empty { grid-column: 1 / -1; padding: 18px; text-align: center; color: var(--fg-muted); font-size: 12px; }
.ep-gif-grid { columns: 2 140px; column-gap: 6px; padding: 4px 8px 8px; max-height: 280px; overflow-y: auto; }
.ep-gif-item { display: block; width: 100%; margin-bottom: 6px; padding: 0; border: none; border-radius: 10px; overflow: hidden; background: var(--fg-solid-3); cursor: pointer; break-inside: avoid; }
.ep-gif-item img { width: 100%; display: block; }
.ep-gif-status { text-align: center; padding: 6px; color: var(--fg-muted-2); font-size: 10px; }

/* ── 22. Diversos ──────────────────────────────────────────────────────────── */
.fav-star-btn { transition: background .15s, transform .15s var(--fg-ease); }
.status-dot { border-color: var(--fg-bg); }
.status-dot.online { box-shadow: 0 0 0 2px rgba(52, 211, 153, .25); }
.rank-badge, .special-badge { border-radius: 6px; }
#fg-unified-mod-fab { z-index: 10005; }
.fg-data-saver img[data-hide-on-error] { display: none; }

/* ── 23. Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* v40.9: barra de baixo sem fundo — só os botões, que deslizam para o lado.
       As listas rolam por baixo dela e ganham espaço no fim (o último item sobe acima
       dos botões); conversas e bases terminam acima dela (a caixa de mensagem fica livre). */
    #app { --fg-nav-h: 68px; --fg-nav-space: calc(var(--fg-nav-h) + var(--fg-safe-b)); }
    .view > .view-scroll, .news-cards-container, .trans-content, #panel-quiz .qz-wrap, #feed-container {
        padding-bottom: calc(var(--fg-nav-space) + 24px) !important;
        scroll-padding-bottom: var(--fg-nav-space);
    }
    #view-dm.active, #view-comm-dashboard.active { padding-bottom: var(--fg-nav-space); }
    #sidebar {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        width: auto;
        height: calc(var(--fg-nav-h) + var(--fg-safe-b));
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 12px var(--fg-safe-b);
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 12px;
        scrollbar-width: none;
        touch-action: pan-x;
        --nav-fade-l: 0px;
        --nav-fade-r: 26px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-l), #000 calc(100% - var(--nav-fade-r)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-l), #000 calc(100% - var(--nav-fade-r)), transparent 100%);
    }
    #sidebar::-webkit-scrollbar { display: none; }
    #sidebar.nav-scrolled { --nav-fade-l: 26px; }
    #sidebar.nav-at-end { --nav-fade-r: 0px; }
    .nav-btn {
        flex: 0 0 auto;
        min-width: 62px;
        width: auto;
        height: 54px;
        margin: 0;
        padding: 0 10px;
        border-radius: 17px;
        flex-direction: column;
        gap: 4px;
        scroll-snap-align: start;
        background: rgba(var(--fg-bg2-rgb), .9);
        border: 1px solid var(--fg-line);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        -webkit-tap-highlight-color: transparent;
    }
    .nav-btn:hover { background: rgba(var(--fg-bg2-rgb), .94); }
    .nav-btn.active {
        background: linear-gradient(var(--fg-accent-soft), var(--fg-accent-soft)), rgba(var(--fg-bg2-rgb), .9);
        border-color: rgba(var(--fg-accent-rgb), .45);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(var(--fg-accent-rgb), .18);
    }
    .nav-btn svg { width: 21px; height: 21px; }
    .nav-label { display: block; overflow: visible; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1; }
    .nav-me { min-width: 54px; padding: 0; border-radius: 50%; width: 54px; }
    .nav-me .my-avatar-mini { width: 38px; height: 38px; }
    .nav-spacer { display: none; }
    .nav-btn.active::after { display: none; }
    .nav-badge { top: 3px; right: 6px; }
    .view-head { padding: 12px 14px 10px; }
    .view-title { font-size: 15.5px; letter-spacing: .2px; }
    .view-scroll.pad { padding: 12px 12px 30px; }
    .view-tools { padding: 10px 12px 2px; }
    .hide-xs { display: none !important; }
    .dm-view-shell { padding: 0; }
    .chat-box-centered { border-radius: 0; border: none; }
    .msg-row { max-width: 88%; }
    .del-msg-btn { right: -26px; }
    .msg-row.mine .del-msg-btn { left: -26px; }
    .pf-hero { --pf-av: 96px; --pf-lift: 44px; --pf-inset: 12px; padding-top: 10px; }
    .pf-cover { aspect-ratio: 2.6 / 1; min-height: 132px; border-radius: 18px; }
    .pf-head { gap: 12px; }
    .pf-id { min-width: 0; padding-top: calc(var(--pf-lift) + 6px); }
    .pf-name { font-size: 23px; }
    .pf-actions { width: 100%; padding-top: 4px; }
    .pf-cover-btn span { display: none; }
    .pf-cover-btn { padding: 7px 10px; font-size: 14px; }
    .pf-actions .pf-btn { flex: 1; }
    .pf-actions .pf-btn.icon { flex: none; }
    .pf-stat { min-width: calc(33% - 6px); flex: 1; }
    .pf-hero, .pf-panel { padding-left: 12px; padding-right: 12px; }
    .pf-tabs { padding-left: 12px; padding-right: 12px; }
    .tro-grid { grid-template-columns: 1fr; }
    .mural-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mural-item { border-radius: 14px; }
    .mural-cap { font-size: 12.5px; padding: 8px 10px 0; }
    .mural-foot { padding: 6px 10px 9px; gap: 12px; }
    .news-hero, .news-hero-body { min-height: 220px; }
    .trans-content { padding: 12px 12px 40px; }
    .trans-exec-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .trans-exec-card { max-width: none; min-width: 0; }
    .trans-exec-photo-wrap { max-height: 168px; }
    .trans-exec-info { padding: 10px 11px 12px; }
    .trans-exec-name { font-size: 14px; }
    .trans-exec-btn { padding: 7px 6px; font-size: 11.5px; }
    .loc-banner-top { flex-wrap: wrap; gap: 10px; }
    .loc-banner-left { min-width: 0; flex: 1 1 100%; }
    .loc-banner-label { letter-spacing: 1.2px; }
    .loc-banner-actions { margin-left: auto; }
    .trans-profile-hero { padding: 14px; }
    .trans-profile-photo { width: 84px; height: 84px; }
    .trans-hero-actions { flex-direction: row; width: 100%; }
    .trans-hero-actions .trans-compare-btn-lg { flex: 1; }
    .qz-wrap { padding: 12px 12px 30px; }
    .ep { left: 8px !important; right: 8px !important; width: auto !important; bottom: calc(70px + var(--fg-safe-b)) !important; }
    .modal-box { padding: 18px; }
    .modal-box.modal-wide { width: 100% !important; max-width: 100% !important; }
    .modal { align-items: flex-end; padding: 0; }
    .modal .modal-box { width: 100% !important; max-width: 100% !important; border-radius: 22px 22px 0 0; max-height: 92vh; overflow-y: auto; padding-bottom: calc(18px + var(--fg-safe-b)); box-sizing: border-box; }
    .modal .modal-box .modal-scroll { max-height: none; }
    .auth-modal { align-items: center; padding: 12px; }
    .auth-modal .modal-box { width: 92vw !important; max-width: 400px !important; border-radius: 22px; }
    #toast { bottom: calc(76px + var(--fg-safe-b)); }
}
@media (max-width: 420px) {
    .comm-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .comm-top-actions .glass-btn { padding: 7px 10px; }
    .pf-stats { gap: 6px; }
    .pf-stat { min-width: calc(33.33% - 4px); padding: 9px 10px; border-radius: 12px; }
    .pf-stat b { font-size: 17px; }
    .pf-stat span { font-size: 10.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COSMÉTICOS VIP v41 — molduras, anéis, balões e efeitos de nome
   Tudo em CSS/SVG embutido (nenhuma imagem baixada). Animação só no que é
   grande e único na tela (moldura do perfil, nome no perfil) e nunca nas listas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Moldura grande (perfil, perfil de amigo, prévia das Configurações) ── */
.vip-border-frame { position: absolute; top: 50%; left: 50%; width: 130%; height: 130%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; object-fit: contain; }
.vip-border-shine {
    position: absolute; top: 50%; left: 50%; width: 130%; height: 130%; margin: -65% 0 0 -65%;
    border-radius: 50%; pointer-events: none; z-index: 5; opacity: .8;
    background: conic-gradient(from 0deg, transparent 0deg 296deg, rgba(255, 255, 255, 0) 306deg, rgba(255, 255, 255, .9) 326deg, rgba(255, 255, 255, 0) 346deg, transparent 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 78.3%, #000 84%, transparent 85.4%);
            mask: radial-gradient(closest-side, transparent 77%, #000 78.3%, #000 84%, transparent 85.4%);
    animation: fgFrameShine 6.5s linear infinite;
}
.vip-border-shine[data-border="retro"] { display: none; }
@keyframes fgFrameShine { to { transform: rotate(360deg); } }
.fg-data-saver .vip-border-shine { display: none; }
@media (prefers-reduced-motion: reduce) { .vip-border-shine { display: none; } }

/* ── Moldura nos avatares pequenos (chat, listas, menu, comentários) ──
   A mesma arte do perfil, como border-image "fill" que transborda 15% para fora da
   foto (o vip_perks.js põe a arte e ajusta o --vb-out ao tamanho do avatar).
   border-image não é cortado pelo border-radius e fica atrás da foto. */
img.vip-framed {
    /* longhands: o atalho "border" zeraria o border-image */
    border-width: 0 !important; border-style: solid !important; border-color: transparent !important;
    border-image-slice: 0 fill;
    border-image-width: 0;
    border-image-outset: var(--vb-out, 5px);
    border-image-repeat: stretch;
    padding: 0 !important;
    box-shadow: 0 0 10px var(--vb-glow, transparent);
}
.msg-row.grouped .msg-av.vip-framed { border-image-source: none !important; box-shadow: none; }
[data-vip-border="prata"] { --vb-ring: conic-gradient(from 210deg, #ffffff, #9aa6b6, #eef2f7, #6b7685, #dfe5ee, #ffffff); --vb-glow: rgba(205, 215, 230, .3); }
[data-vip-border="ouro"] { --vb-ring: conic-gradient(from 210deg, #fff6d0, #f5cf63, #a8700f, #ffe7a3, #c48a1d, #fff6d0); --vb-glow: rgba(245, 197, 66, .45); }
[data-vip-border="medieval"] { --vb-ring: conic-gradient(#d9b45a 0 8%, #2f343a 8% 25%, #d9b45a 25% 33%, #2f343a 33% 50%, #d9b45a 50% 58%, #2f343a 58% 75%, #d9b45a 75% 83%, #2f343a 83%); --vb-glow: rgba(215, 38, 61, .35); }
[data-vip-border="anime"] { --vb-ring: conic-gradient(from 160deg, #ffe0ef, #ff7eb6, #c49bff, #ffe0ef); --vb-glow: rgba(255, 126, 182, .45); }
[data-vip-border="retro"] { --vb-ring: repeating-conic-gradient(#ffd23f 0 12deg, #ff9a1f 12deg 24deg); --vb-glow: rgba(63, 224, 255, .3); }
[data-vip-border="cyber"] { --vb-ring: conic-gradient(from 0deg, #3ff6ff 0 22%, #04121c 22% 25%, #b06bff 25% 47%, #04121c 47% 50%, #3ff6ff 50% 72%, #04121c 72% 75%, #b06bff 75% 97%, #04121c 97%); --vb-glow: rgba(63, 246, 255, .45); }
[data-vip-border="crimson"] { --vb-ring: conic-gradient(from 200deg, #ff8fa3, #9b001d, #ff4d6d, #3d0010, #ff8fa3); --vb-glow: rgba(255, 42, 79, .5); }
[data-vip-border="gelo"] { --vb-ring: conic-gradient(from 200deg, #ffffff, #8fd8ff, #e8f8ff, #4aa8ec, #ffffff); --vb-glow: rgba(155, 224, 255, .45); }
[data-vip-border="nebula"] { --vb-ring: conic-gradient(from 90deg, #7b5cff, #ff5ca8, #4cc9ff, #7b5cff); --vb-glow: rgba(176, 124, 255, .45); }
[data-vip-border="dragao"] { --vb-ring: conic-gradient(from 210deg, #d9fff0, #39c98e, #f5cf63, #0b6b46, #8ff0c6, #d9fff0); --vb-glow: rgba(125, 255, 207, .4); }

/* ── Balões VIP ──
   Camadas: preenchimento (padding-box) + borda em degradê (border-box),
   textura opcional em ::before (atrás do texto) e enfeite no canto em ::after.
   Sem backdrop-filter (o antigo borrava a tela inteira a cada balão).
   v40.5: o seletor ".msg-row.mine …" tem que vencer o fundo/cor padrão das MINHAS
   mensagens (".msg-row.mine .msg-bubble", no app.css e acima) — antes o balão
   escolhido só aparecia para os outros; para você ficava o fundo verde-água. */
.msg-bubble[data-vip-bubble],
.msg-row.mine .msg-bubble[data-vip-bubble] {
    position: relative; isolation: isolate;
    color: var(--vb-ink, var(--fg-text));
    background: var(--vb-fill) padding-box, var(--vb-edge) border-box;
    border: var(--vb-bw, 1.5px) solid transparent;
    border-radius: var(--vb-r, 18px 18px 18px 6px);
    box-shadow: var(--vb-shadow, 0 6px 18px rgba(0, 0, 0, .3)), inset 0 1px 0 var(--vb-hi, rgba(255, 255, 255, .08));
    font-family: var(--vb-font, inherit);
    text-shadow: var(--vb-ts, none);
}
.msg-row.mine .msg-bubble[data-vip-bubble] { border-radius: var(--vb-r-mine, 18px 18px 6px 18px); }
.msg-row.grouped .msg-bubble[data-vip-bubble] { border-radius: var(--vb-r-grouped, 18px); }
.msg-bubble[data-vip-bubble]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--vb-tex, none); pointer-events: none; }
.msg-bubble[data-vip-bubble]::after {
    content: ''; position: absolute; top: -9px; right: -8px; width: 17px; height: 17px; pointer-events: none;
    background: var(--vb-orn, none) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
.msg-row.mine .msg-bubble[data-vip-bubble]::after { right: auto; left: -8px; }
.msg-row.grouped .msg-bubble[data-vip-bubble]::after { display: none; }
.msg-bubble[data-vip-bubble] a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

[data-vip-bubble="prata"] {
    --vb-fill: linear-gradient(180deg, #2b323d, #1a1f27); --vb-edge: linear-gradient(135deg, #ffffff, #8d99ab 40%, #eef2f7 62%, #6b7685);
    --vb-ink: #eef2f7; --vb-hi: rgba(255, 255, 255, .18);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2h11v6c0 3.5-2.6 5.6-5.5 7C5.1 13.6 2.5 11.5 2.5 8z' fill='%23dfe5ee' stroke='%23515b69' stroke-width='1'/%3E%3Ccircle cx='8' cy='7.5' r='2.2' fill='%234c9dff'/%3E%3C/svg%3E");
}
[data-vip-bubble="gold"] {
    --vb-fill: linear-gradient(160deg, #3a2a08, #1d1404 72%); --vb-edge: linear-gradient(135deg, #fff3c4, #e6b84a 35%, #8a5a0c 62%, #ffe08a);
    --vb-ink: #ffefc2; --vb-hi: rgba(255, 230, 160, .25); --vb-shadow: 0 6px 20px rgba(230, 170, 40, .18);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.8 12 2.8 4l3.3 3.1L8 1.8l1.9 5.3L13.2 4l1 8z' fill='%23f5cf63' stroke='%236b4508' stroke-width='.9' stroke-linejoin='round'/%3E%3Crect x='1.8' y='11.6' width='12.4' height='2.8' rx='.9' fill='%23f5cf63' stroke='%236b4508' stroke-width='.9'/%3E%3Ccircle cx='8' cy='13' r='.9' fill='%23d7263d'/%3E%3C/svg%3E");
}
[data-vip-bubble="obsidian"] {
    --vb-fill: linear-gradient(160deg, #170c28, #0b0614); --vb-edge: linear-gradient(135deg, #c39bff, #5b2ca8 50%, #ff7ad9);
    --vb-ink: #eadcff; --vb-hi: rgba(200, 160, 255, .18); --vb-shadow: 0 6px 22px rgba(140, 80, 255, .22);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8 13.4 6.6 8 15.2 2.6 6.6z' fill='%235b2ca8' stroke='%23e1c8ff' stroke-width='.8'/%3E%3Cpath d='M8 .8 10 6.6 8 15.2 6 6.6z' fill='%23b07cff'/%3E%3C/svg%3E");
}
[data-vip-bubble="aurora"] {
    --vb-fill: linear-gradient(135deg, #072a24, #121a3d 60%, #24104a); --vb-edge: linear-gradient(120deg, #6ef3c5, #8fb8ff 50%, #c08cff);
    --vb-ink: #e6fff7; --vb-shadow: 0 6px 22px rgba(110, 243, 197, .16);
    --vb-tex: radial-gradient(120% 80% at 0% 0%, rgba(110, 243, 197, .22), transparent 60%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.9 5.6 10.4 7.1 16 8 10.4 8.9 8.9 10.4 8 16 7.1 10.4 5.6 8.9 0 8 5.6 7.1 7.1 5.6 8 0z' fill='%23b8ffe6'/%3E%3C/svg%3E");
}
[data-vip-bubble="cosmic"] {
    --vb-fill: linear-gradient(160deg, #1a0d3a, #0c0820); --vb-edge: linear-gradient(135deg, #9d7bff, #ff5ca8 50%, #4cc9ff);
    --vb-ink: #f1eaff; --vb-shadow: 0 6px 22px rgba(157, 123, 255, .22);
    --vb-tex: radial-gradient(circle at 18% 30%, rgba(255, 92, 168, .28), transparent 42%), radial-gradient(circle at 86% 80%, rgba(76, 201, 255, .22), transparent 48%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='9' r='.7' fill-opacity='.7'/%3E%3Ccircle cx='41' cy='6' r='.5' fill-opacity='.5'/%3E%3Ccircle cx='27' cy='30' r='.6' fill-opacity='.6'/%3E%3Ccircle cx='54' cy='26' r='.5' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .5l2.2 4.7 5.1.6-3.8 3.5 1 5L8 11.8 3.5 14.3l1-5L.7 5.8l5.1-.6z' fill='%23ffd6f0' stroke='%23ff5ca8' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-vip-bubble="crimson"] {
    --vb-fill: linear-gradient(160deg, #3d0a18, #1e040b); --vb-edge: linear-gradient(135deg, #ff8fa3, #d7263d 45%, #5c0012);
    --vb-ink: #ffe3e8; --vb-hi: rgba(255, 143, 163, .2); --vb-shadow: 0 6px 20px rgba(215, 38, 61, .22);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8S3 6.8 3 10.2a5 5 0 0 0 10 0C13 6.8 8 .8 8 .8z' fill='%23d7263d' stroke='%23ffb3c1' stroke-width='.8'/%3E%3Cellipse cx='6.3' cy='10' rx='1.1' ry='1.8' fill='%23ffb3c1' opacity='.7'/%3E%3C/svg%3E");
}
[data-vip-bubble="cyber"] {
    --vb-fill: linear-gradient(160deg, #04141f, #020a10); --vb-edge: linear-gradient(90deg, #3ff6ff, #b06bff);
    --vb-ink: #c9fbff; --vb-shadow: 0 0 16px rgba(63, 246, 255, .18); --vb-r: 4px 16px 4px 16px; --vb-r-mine: 16px 4px 16px 4px; --vb-r-grouped: 4px 16px;
    --vb-tex: repeating-linear-gradient(0deg, rgba(63, 246, 255, .07) 0 1px, transparent 1px 11px), repeating-linear-gradient(90deg, rgba(63, 246, 255, .07) 0 1px, transparent 1px 11px);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233ff6ff' stroke-width='2'%3E%3Cpath d='M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4'/%3E%3Ccircle cx='8' cy='8' r='1.6' fill='%23b06bff' stroke='none'/%3E%3C/svg%3E");
}
[data-vip-bubble="shadow"] {
    --vb-fill: linear-gradient(180deg, #0c0b14, #050408); --vb-edge: linear-gradient(135deg, rgba(200, 176, 255, .55), rgba(80, 60, 140, .25));
    --vb-ink: #e9ddff; --vb-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    --vb-tex: radial-gradient(90% 70% at 50% 130%, rgba(150, 110, 255, .38), transparent 70%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 1.2A7 7 0 1 0 14.8 10 5.6 5.6 0 0 1 10.5 1.2z' fill='%23c8b0ff'/%3E%3C/svg%3E");
}
[data-vip-bubble="rose"] {
    --vb-fill: linear-gradient(160deg, #3b1a23, #241018); --vb-edge: linear-gradient(135deg, #ffe0e8, #e8a1b0 40%, #b76e79 70%, #ffd1dc);
    --vb-ink: #ffe8ee; --vb-hi: rgba(255, 210, 222, .22); --vb-shadow: 0 6px 20px rgba(232, 161, 176, .16);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23f4a7b9' stroke='%23b76e79' stroke-width='.6'%3E%3Ccircle cx='8' cy='4' r='3'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='10.5' cy='11.8' r='3'/%3E%3Ccircle cx='5.5' cy='11.8' r='3'/%3E%3Ccircle cx='4' cy='7' r='3'/%3E%3C/g%3E%3Ccircle cx='8' cy='8.3' r='2' fill='%23ffe08a'/%3E%3C/svg%3E");
}
[data-vip-bubble="arctic"] {
    --vb-fill: linear-gradient(160deg, #143d56, #0b2232); --vb-edge: linear-gradient(135deg, #ffffff, #8fd8ff 50%, #e8f8ff);
    --vb-ink: #eefaff; --vb-hi: rgba(255, 255, 255, .25); --vb-r: 22px 22px 22px 8px; --vb-r-mine: 22px 22px 8px 22px; --vb-r-grouped: 22px;
    --vb-tex: radial-gradient(circle at 88% -10%, rgba(255, 255, 255, .22), transparent 42%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23eafaff' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M8 1v14M1.9 4.5l12.2 7M1.9 11.5l12.2-7M8 3.5 6.4 2M8 3.5 9.6 2M8 12.5l-1.6 1.5M8 12.5l1.6 1.5'/%3E%3C/svg%3E");
}
[data-vip-bubble="matrix"] {
    --vb-fill: linear-gradient(180deg, #021006, #010802); --vb-edge: linear-gradient(180deg, #00ff7b, #00843f);
    --vb-ink: #7dffb8; --vb-font: 'DM Mono', ui-monospace, 'Courier New', monospace; --vb-ts: 0 0 6px rgba(0, 255, 123, .45);
    --vb-r: 4px; --vb-r-mine: 4px; --vb-r-grouped: 4px; --vb-shadow: 0 0 14px rgba(0, 255, 123, .14);
    --vb-tex: repeating-linear-gradient(180deg, rgba(0, 255, 123, .07) 0 1px, transparent 1px 3px);
}
[data-vip-bubble="platinum"] {
    --vb-fill: linear-gradient(165deg, #f5f7fa, #d3d9e1 58%, #eaeef3); --vb-edge: linear-gradient(135deg, #ffffff, #8d99ab 50%, #ffffff);
    --vb-ink: #141922; --vb-hi: rgba(255, 255, 255, .95); --vb-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h8l3 4-7 9-7-9z' fill='%23eef2f7' stroke='%236b7685' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M1 6h14M5.5 6 8 15l2.5-9M4 2l1.5 4L8 2l2.5 4L12 2' fill='none' stroke='%236b7685' stroke-width='.6'/%3E%3C/svg%3E");
}
[data-vip-bubble="medieval"] {
    --vb-fill: linear-gradient(172deg, #f4e4be, #e0c890); --vb-edge: linear-gradient(135deg, #8a5a0c, #d9b45a 50%, #6b4508);
    --vb-ink: #3b2a14; --vb-hi: rgba(255, 250, 230, .7); --vb-font: Georgia, 'Times New Roman', serif; --vb-shadow: 0 6px 16px rgba(0, 0, 0, .4);
    --vb-r: 6px; --vb-r-mine: 6px; --vb-r-grouped: 6px;
    --vb-tex: radial-gradient(ellipse at 0% 0%, rgba(120, 80, 20, .18), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(120, 80, 20, .22), transparent 55%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8l1.6 1.4 2.1-.3.8 2 2 .8-.3 2.1L15.2 8l-1.4 1.6.3 2.1-2 .8-.8 2-2.1-.3L8 15.2l-1.6-1.4-2.1.3-.8-2-2-.8.3-2.1L.8 8l1.4-1.6-.3-2.1 2-.8.8-2 2.1.3z' fill='%23b3122b'/%3E%3Ccircle cx='8' cy='8' r='3.6' fill='none' stroke='%23ff8a8a' stroke-width='.8'/%3E%3Cpath d='M8 5.5 9 8 8 10.5 7 8z' fill='%23ffd28a'/%3E%3C/svg%3E");
}
[data-vip-bubble="anime"] {
    --vb-fill: linear-gradient(150deg, #3a1838, #261a48); --vb-edge: linear-gradient(120deg, #ffb3d6, #ff7eb6 45%, #c9a2ff);
    --vb-ink: #fff0f8; --vb-shadow: 0 6px 22px rgba(255, 126, 182, .2); --vb-r: 22px 22px 22px 8px; --vb-r-mine: 22px 22px 8px 22px; --vb-r-grouped: 22px;
    --vb-tex: radial-gradient(circle at 100% 0%, rgba(255, 143, 194, .25), transparent 45%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 16 16'%3E%3Cg fill='%23ffc2dc' stroke='%23ff6fae' stroke-width='.5'%3E%3Cpath id='p' d='M0 0C-3-2.2-3-6.2-.9-7.3L0-6.2.9-7.3C3-6.2 3-2.2 0 0z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='1.4' fill='%23fff1a8'/%3E%3C/svg%3E");
}
[data-vip-bubble="retro"] {
    --vb-fill: linear-gradient(180deg, #2433a0, #131b5c); --vb-edge: linear-gradient(#ffffff, #ffffff); --vb-bw: 2px;
    --vb-ink: #ffffff; --vb-r: 3px; --vb-r-mine: 3px; --vb-r-grouped: 3px; --vb-hi: rgba(255, 255, 255, .2);
    --vb-shadow: 0 0 0 2px #0a0f2e, 4px 4px 0 2px rgba(0, 0, 0, .7); --vb-font: ui-monospace, 'Courier New', monospace;
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v3H0zM1 4h5v1H1zM2 5h3v1H2zM3 6h1v1H3z' fill='%23ff3355'/%3E%3Cpath d='M1 1h1v1H1z' fill='%23ffb3c1'/%3E%3C/svg%3E");
}
[data-vip-bubble="solar"] {
    --vb-fill: linear-gradient(160deg, #4a1a05, #2a0d03); --vb-edge: linear-gradient(135deg, #ffe08a, #ff8a1f 45%, #e8361b);
    --vb-ink: #fff1d6; --vb-shadow: 0 6px 22px rgba(255, 120, 30, .24); --vb-hi: rgba(255, 210, 140, .22);
    --vb-tex: radial-gradient(circle at 100% 0%, rgba(255, 180, 60, .35), transparent 45%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke='%23ffb020' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 .8v2.2M8 13v2.2M.8 8H3M13 8h2.2M2.9 2.9l1.6 1.6M11.5 11.5l1.6 1.6M2.9 13.1l1.6-1.6M11.5 4.5l1.6-1.6'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='3.6' fill='%23ffd23f' stroke='%23e8361b' stroke-width='.8'/%3E%3C/svg%3E");
}
[data-vip-bubble="tactical"] {
    --vb-fill: linear-gradient(160deg, #252e19, #151b0e); --vb-edge: linear-gradient(135deg, #b5c97a, #59692f);
    --vb-ink: #eef5d8; --vb-r: 4px; --vb-r-mine: 4px; --vb-r-grouped: 4px;
    --vb-tex: repeating-linear-gradient(135deg, rgba(160, 190, 90, .07) 0 6px, transparent 6px 12px);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9d98f' stroke='%233b4620' stroke-width='.7'%3E%3Cpath d='M1 6 8 1.5 15 6v3L8 4.5 1 9z'/%3E%3Cpath d='M1 12 8 7.5 15 12v3L8 10.5 1 15z'/%3E%3C/svg%3E");
}
[data-vip-bubble="emerald"] {
    --vb-fill: linear-gradient(160deg, #073b2a, #032418); --vb-edge: linear-gradient(135deg, #c9ffe6, #2ec486 45%, #0b6b46 75%, #8ff0c6);
    --vb-ink: #e6fff3; --vb-shadow: 0 6px 20px rgba(46, 196, 134, .18);
    --vb-tex: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .1) 44%, transparent 56%);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1h6l4 5-7 9-7-9z' fill='%232ec486' stroke='%23c9ffe6' stroke-width='.8' stroke-linejoin='round'/%3E%3Cpath d='M1 6h14M5 1l3 5 3-5M8 6v9' fill='none' stroke='%23c9ffe6' stroke-width='.5'/%3E%3C/svg%3E");
}
[data-vip-bubble="samurai"] {
    --vb-fill: linear-gradient(160deg, #1d1908, #0f0c03); --vb-edge: linear-gradient(135deg, #fff08a, #facc15 50%, #a37f00);
    --vb-ink: #fff7c2; --vb-r: 4px 16px 4px 16px; --vb-r-mine: 16px 4px 16px 4px; --vb-r-grouped: 4px 16px;
    --vb-shadow: -3px 0 0 #00f0ff, 0 6px 18px rgba(250, 204, 21, .16);
    --vb-orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5.8 3 9h4.2l-1 6.2L13 6.8H8.7z' fill='%23facc15' stroke='%2300f0ff' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Efeitos do nome (buildNameStyle). "Aurora" só anima onde o nome é grande e único ── */
@keyframes fgNameFlow { to { background-position: 200% 50%; } }
[style*="fgNameFlow"] { animation-play-state: paused !important; }
.fg-name-live[style*="fgNameFlow"], .fg-name-live [style*="fgNameFlow"] { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) { .fg-name-live[style*="fgNameFlow"], .fg-name-live [style*="fgNameFlow"] { animation-play-state: paused !important; } }
.fg-data-saver .fg-name-live [style*="fgNameFlow"], .fg-data-saver .fg-name-live[style*="fgNameFlow"] { animation-play-state: paused !important; }

/* ── Configurações › Visual VIP: nível do item, efeitos e paletas do nome ── */
.cosm-tier { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: var(--fg-text-2); letter-spacing: .3px; }
.cosm-tier.gold { color: #1b1206; background: linear-gradient(135deg, #fff1c2, #e6b84a 60%, #b0801f); }
.cosm-card.is-gold { background: linear-gradient(var(--fg-surface), var(--fg-surface)) padding-box, linear-gradient(140deg, rgba(255, 225, 140, .55), rgba(255, 255, 255, .06) 40%, rgba(230, 184, 74, .4)) border-box; border-color: transparent; }
.cosm-card.is-active { border-color: rgba(var(--fg-accent-rgb), .6); background: var(--fg-accent-soft); }
.cosm-badge { background: var(--fg-accent); color: var(--fg-ink); border-radius: 999px; }
.cosm-name-stage { display: grid; place-items: center; min-height: 92px; margin-bottom: 14px; padding: 16px; border-radius: 16px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07), transparent 62%), var(--fg-bg); border: 1px solid var(--fg-line); }
.cosm-name-stage span { font-size: 30px; font-weight: 800; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.cosm-fx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cosm-fx { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.cosm-fx:hover { border-color: var(--fg-accent-line); }
.cosm-fx.active { border-color: rgba(var(--fg-accent-rgb), .6); background: var(--fg-accent-soft); color: var(--fg-text); }
.cosm-fx-sample { font-size: 24px; font-weight: 800; line-height: 1.1; }
.cosm-pal-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 4px; }
.cosm-pal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 14px; border: 1px solid var(--fg-line); background: var(--fg-surface); color: var(--fg-text-2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.cosm-pal:hover { border-color: var(--fg-accent-line); color: var(--fg-text); }
.cosm-pal i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .35); }

/* ── v40.7 Mapa (Notícias › Outro lugar e Transparência) ───────────────────── */
.geo-map { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--fg-line-2); background: #0e1626; isolation: isolate; }
.geo-map.is-light { background: #d4e4ee; }
.geo-map .leaflet-container, .geo-map.leaflet-container { font-family: var(--fg-font); background: inherit; }
.geo-map .leaflet-control-zoom { border: 1px solid var(--fg-line-2) !important; border-radius: 12px; overflow: hidden; box-shadow: var(--fg-shadow); }
.geo-map .leaflet-control-zoom a { background: rgba(var(--fg-solid-rgb), .92); color: var(--fg-text); border-bottom-color: var(--fg-line-2); width: 34px; height: 34px; line-height: 34px; }
.geo-map .leaflet-control-zoom a:hover { background: var(--fg-solid-3); color: var(--fg-accent); }
.geo-map .leaflet-control-attribution { background: rgba(var(--fg-solid-rgb), .72); color: var(--fg-muted); font-size: 10px; border-radius: 8px 0 0 0; padding: 1px 6px; }
.geo-map .leaflet-control-attribution a { color: var(--fg-text-2); }
.geo-map.is-busy::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1000; background: linear-gradient(90deg, transparent, var(--fg-accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: geoBusy 1s linear infinite; }
@keyframes geoBusy { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.leaflet-tooltip.fg-map-tip { background: rgba(var(--fg-solid-rgb), .95); color: #fff; border: 1px solid var(--fg-accent-line); border-radius: 10px; padding: 5px 10px; font: 600 12px var(--fg-font); box-shadow: var(--fg-shadow); }
.leaflet-tooltip.fg-map-tip::before { display: none; }
.fg-map-style { display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(var(--fg-solid-rgb), .9); border: 1px solid var(--fg-line-2); box-shadow: var(--fg-shadow); }
.fg-map-style button { border: 0; background: none; color: var(--fg-muted); font: 600 11px var(--fg-font); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.fg-map-style button.on { background: var(--fg-accent-soft); color: var(--fg-accent); }
.fg-map-style button:focus-visible, .geo-sug:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
.geo-map-wrap { position: relative; }
.geo-map-loading { position: absolute; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--fg-muted); font-size: 13px; text-align: center; padding: 16px; border-radius: 18px; background: var(--fg-solid-2); border: 1px solid var(--fg-line); }

.geo-search-wrap { position: relative; z-index: 1100; }
.geo-search input { min-width: 0; }
.geo-sugs { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--fg-solid-2); border: 1px solid var(--fg-line-2); box-shadow: var(--fg-shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.geo-sugs[hidden] { display: none; }
.geo-sug { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--fg-text); text-align: left; cursor: pointer; font: inherit; }
.geo-sug:hover, .geo-sug.on { background: var(--fg-surface-3); }
.geo-sug-flag { font-size: 20px; width: 26px; text-align: center; flex: none; }
.geo-sug-main { display: flex; flex-direction: column; min-width: 0; }
.geo-sug-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-sug-main small { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-sug.more { color: var(--fg-accent); font-size: 13px; font-weight: 600; justify-content: flex-start; }
.geo-sug-msg { padding: 10px 12px; font-size: 12px; color: var(--fg-muted); }

/* Notícias: escolher lugar */
.modal-box.modal-map { max-width: 880px; width: 96%; display: flex; flex-direction: column; gap: 12px; }
.modal-box.modal-map .modal-head { margin-bottom: 0; }
.modal-box.modal-map .modal-actions { margin-top: 0; }
#travel-map { height: min(54vh, 500px); min-height: 260px; }
.geo-pick { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; min-height: 44px; text-align: left; }
.geo-pick-empty { font-size: 13px; color: var(--fg-muted); }
.geo-pick-place { display: flex; align-items: center; gap: 10px; min-width: 0; }
.geo-pick-place > div { display: flex; flex-direction: column; min-width: 0; }
.geo-pick-place b { font-family: var(--fg-display); font-size: 17px; color: #fff; line-height: 1.2; }
.geo-pick-place small { font-size: 12px; color: var(--fg-muted); }
.geo-pick-flag { font-size: 28px; line-height: 1; }
.geo-scope { display: flex; gap: 6px; flex-wrap: wrap; }
.news-ed-note { font-size: 11px; }

/* Transparência: busca + mapa + país */
.tp-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tp-search { margin: 0; }
.tp-scope { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-mapcard { margin-bottom: 18px; padding: 10px; border-radius: 22px; background: var(--fg-surface); border: 1px solid var(--fg-line); }
.tp-map-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-cc-search { flex: 1; min-width: 0; }
.tp-map-toggle { flex: none; margin: 0 !important; }
.tp-mapcard.is-closed .tp-map-bar { margin-bottom: 8px; }
.tp-map-wrap[hidden] { display: none; }
.tp-map { height: 300px; }
.tp-cc-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
.tp-cc-row::-webkit-scrollbar { display: none; }
.tp-cc-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid var(--fg-line-2); background: var(--fg-surface); color: var(--fg-text-2); font: 600 12px var(--fg-font); cursor: pointer; white-space: nowrap; }
.tp-cc-chip span { font-size: 15px; line-height: 1; }
.tp-cc-chip:hover { border-color: var(--fg-accent-line); color: #fff; }
.tp-cc-chip.active { background: var(--fg-accent-soft); border-color: rgba(var(--fg-accent-rgb), .45); color: var(--fg-accent); }
.tp-banner { margin-bottom: 12px; }
.tp-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; }
.tp-groups::-webkit-scrollbar { display: none; }
.tp-groups .chip { flex: none; }
.tp-groups .chip small { opacity: .7; font-weight: 700; margin-left: 2px; }
.tp-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--fg-line); background: rgba(255, 255, 255, .03); }
.tp-filter:focus-within { border-color: rgba(var(--fg-accent-rgb), .45); }
.tp-filter > span { color: var(--fg-muted); font-size: 16px; }
.tp-filter input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg-text); font: 13px var(--fg-font); padding: 10px 0; outline: none; }
.tp-sec[hidden] { display: none; }
.tp-sec-note { margin: -8px 0 20px; padding: 10px 12px; border-radius: 12px; font-size: 12px; color: var(--fg-muted); background: var(--fg-surface); border: 1px dashed var(--fg-line-2); }
.tp-loading .trans-local-section-sub { color: var(--fg-accent); }
.tp-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.tp-skel .sk-card { height: 68px; border-radius: 14px; }
.trans-since { font-size: 11px; color: var(--fg-muted); margin-top: 4px; }
.trans-profile-role .trans-since { font-size: inherit; margin: 0; }
.trans-mini-extra { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 10.5px; color: var(--fg-muted-2); margin-top: 2px; }
.trans-mini-extra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.trans-wd-link { display: inline-block; margin-top: 6px; font-size: 12px; }

@media (max-width: 640px) {
    .modal .modal-box.modal-map { height: 94vh; max-height: 94vh; padding-top: 16px; }
    .modal-box.modal-map #travel-map { height: auto; flex: 1; min-height: 240px; }
    .modal-box.modal-map .geo-map-wrap { flex: 1; display: flex; flex-direction: column; min-height: 240px; }
    .geo-pick-place b { font-size: 15px; }
    .tp-map { height: 230px; }
    .tp-mapcard { padding: 8px; border-radius: 18px; }
    .tp-map-toggle { padding: 8px 10px !important; font-size: 12px !important; }
}
@media (min-width: 641px) {
    .modal-box.modal-map .geo-map-wrap { display: flex; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .geo-map.is-busy::after { animation: none; } }
/* Tiles do OpenStreetMap no modo escuro: o mesmo mapa, escurecido no navegador */
.geo-map.tiles-filtered .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.55); }
.geo-map.no-tiles { background: #0e1626; }
.geo-map.is-light.no-tiles { background: #b9d3e0; }

/* v40.8: câmera e transmissão de tela são VIP — coroa nos botões para quem não é */
html:not(.fg-vip) [data-vip-feature] { position: relative; }
html:not(.fg-vip) [data-vip-feature]::after { content: '👑'; position: absolute; top: -6px; right: -6px; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); pointer-events: none; }
.fgc-btn.is-locked { opacity: .72; }

/* v40.8: quizzes do dia — 10 grátis + 20 VIP */
.qz-tier { margin-top: 10px; }
.qz-tier + .qz-tier { margin-top: 22px; }
.qz-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--fg-line); }
.qz-tier-head b { font-family: var(--fg-display); font-size: 15px; color: #fff; }
.qz-tier-head span { font-size: 12px; color: var(--fg-muted); }
.qz-tier.is-vip .qz-tier-head b { color: var(--fg-gold); }
.qz-vip-tag { color: var(--fg-gold); font-weight: 800; }
.qz-card.locked { opacity: .78; }
.qz-card.locked .qz-title { color: var(--fg-text-2); }
.qz-play.qz-lock { background: linear-gradient(135deg, #f5c542, #d4a017); color: #2a1d00; }
.qz-opt.pending { border-color: var(--fg-accent-line); background: var(--fg-accent-soft); }
.qz-vip-cta { display: block; width: 100%; margin-top: 16px; }

/* v40.8: Transparência › Rankings da comunidade */
.tr-rank-wrap { max-width: 1100px; }
.tr-rank-head { margin-bottom: 12px; }
.tr-rank-cc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.tr-rank-cc::-webkit-scrollbar { display: none; }
.tr-rank-cc .tp-cc-chip small { opacity: .7; font-weight: 700; margin-left: 2px; }
.tr-rank-sum { font-size: 13px; color: var(--fg-text-2); margin-bottom: 14px; }
.tr-rank-sum b { color: #fff; }
.tr-rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tr-rank-col { border-radius: 18px; background: var(--fg-surface); border: 1px solid var(--fg-line); padding: 12px; }
.tr-rank-col-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 10px; border-bottom: 1px solid var(--fg-line); margin-bottom: 6px; }
.tr-rank-col-head b { font-family: var(--fg-display); font-size: 15px; color: #fff; }
.tr-rank-col-head span { font-size: 11px; color: var(--fg-muted); }
.tr-rank-col.best .tr-rank-col-head b { color: var(--fg-good); }
.tr-rank-col.worst .tr-rank-col-head b { color: var(--fg-bad); }
.tr-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-rank-row { position: relative; display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px 10px; border-radius: 12px; cursor: pointer; }
.tr-rank-row:hover, .tr-rank-row:focus-visible { background: var(--fg-surface-2); outline: none; }
.tr-rank-pos { font-size: 14px; font-weight: 800; color: var(--fg-muted); text-align: center; }
.tr-rank-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--fg-solid-3); }
.tr-rank-main { display: flex; flex-direction: column; min-width: 0; }
.tr-rank-main b { font-size: 13px; color: var(--fg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-rank-main small { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-rank-stars { font-size: 11px; color: var(--fg-muted); }
.tr-rank-stars .trans-stars { color: var(--fg-gold); letter-spacing: -1px; }
.tr-rank-stars em { font-style: normal; color: var(--fg-text-2); }
.tr-rank-side { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.tr-rank-side b { font-family: var(--fg-label); font-size: 18px; color: #fff; }
.tr-rank-side.best b { color: var(--fg-good); }
.tr-rank-side.worst b { color: var(--fg-bad); }
.tr-rank-side small { font-size: 10px; color: var(--fg-muted); }
.tr-rank-bar { position: absolute; left: 84px; right: 6px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--fg-surface-3); overflow: hidden; }
.tr-rank-bar i { display: block; height: 100%; background: currentColor; }
.tr-rank-col.best .tr-rank-bar { color: var(--fg-good); }
.tr-rank-col.worst .tr-rank-bar { color: var(--fg-bad); }
@media (max-width: 900px) { .tr-rank-grid { grid-template-columns: 1fr; } }
.trans-community-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 12px; color: #d1fae5; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .3); }
.glory-how { margin-top: 10px; font-size: 12px; color: var(--fg-text-2); }
.glory-how summary { cursor: pointer; color: var(--fg-accent); font-weight: 600; }
.glory-rules { margin: 8px 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.glory-ranks { display: flex; flex-wrap: wrap; gap: 6px; }
.glory-ranks span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--fg-surface-2); border: 1px solid var(--fg-line); font-size: 11px; color: var(--fg-text); }
.glory-ranks small { color: var(--fg-muted); }