:root {
    /* Brand fills - identical in both themes (gradients, badges, buttons). */
    --magenta: #bb17e3;
    --purple: #6622ca;
    --gold: #e6a71d;

    /* "Chrome" - the navbar and anything sitting on its fixed brand-color
       fills (row backgrounds, the dropdown menu, avatar-circle initials).
       These never change with the theme toggle, because the surfaces
       behind them don't either. */
    --chrome-ink: #f4eefa;
    --chrome-surface: #1f1130;
    --chrome-surface-hover: #2a1740;
    --chrome-accent: #dc5eef;

    /* Reading-surface tokens - these DO flip under [data-theme="light"]. */
    --bg: #14091f;
    --bg-card: #1f1130;
    --bg-card-hover: #2a1740;
    --text: #f4eefa;
    --text-muted: #b9a8cc;
    /* Lighter than --magenta specifically for text: #bb17e3 as foreground
       only hits ~3.7-4:1 on our dark backgrounds, below the 4.5:1 WCAG AA
       minimum for normal text. This variant measures 5.8:1+ while staying
       the same hue. Keep --magenta itself for gradients/fills. */
    --magenta-text: #dc5eef;
    /* Same story as --magenta-text: --gold reads great on dark but fails
       WCAG AA as foreground text on the light theme's pale background. */
    --gold-text: #e6a71d;
    --input-bg: rgba(0, 0, 0, 0.25);
    --input-bg-focus: rgba(0, 0, 0, 0.35);
    --input-border: rgba(255, 255, 255, 0.15);
    --hairline: rgba(255, 255, 255, 0.08);

    /* Largura de conteúdo compartilhada entre a topbar, o main e o rodapé,
       pra tudo ficar alinhado numa mesma coluna centralizada. */
    --content-max: 1400px;
}

/* Light theme: only the reading-surface tokens are redefined. Brand fills
   and "chrome" tokens above are deliberately absent here - the navbar and
   avatar circles stay the same in both themes. */
:root[data-theme="light"] {
    --bg: #f7f5fb;
    --bg-card: #ffffff;
    --bg-card-hover: #efe7f8;
    --text: #1c1024;
    --text-muted: #5c5468;
    --magenta-text: #9a12bd;
    --gold-text: #8f6208;
    --input-bg: rgba(28, 16, 36, 0.05);
    --input-bg-focus: rgba(28, 16, 36, 0.08);
    --input-border: rgba(28, 16, 36, 0.15);
    --hairline: rgba(28, 16, 36, 0.12);
}

html {
    /* The shrinking navbar reflows content below it; without this the
       browser's scroll anchoring nudges scrollY to compensate, which
       re-triggers the shrink/grow toggle and flickers indefinitely. */
    overflow-anchor: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Header */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-anchor: none;
}

.topbar-row--main {
    background: linear-gradient(90deg, var(--magenta), var(--purple));
    padding: 0.1rem 0;
    transition: padding 0.25s ease;
}

.topbar.is-scrolled .topbar-row--main {
    padding: 0.35rem 0;
}

/* Bloco de conteúdo centralizado dentro da barra (que continua com o
   degradê esticado de ponta a ponta) - assim os itens (menu, logo,
   entrar/cadastrar ou avatar) ficam agrupados no centro da tela em vez
   de grudados nas bordas em telas bem largas. */
.topbar-row-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* minmax(0, 1fr) em vez de 1fr puro: "1fr" sozinho tem mínimo "auto"
   (a largura do conteúdo), então o lado direito - bem mais cheio que o
   esquerdo (ícones + avatar + nome) - crescia além da metade e empurrava
   a logo pra fora do centro. Com mínimo 0 as duas colunas laterais ficam
   sempre com a mesma largura, e a logo, sempre no centro exato. */
.topbar-row--main .topbar-row-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.topbar-left {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.menu-btn {
    /* Só existe pra abrir/fechar a barra de busca+navegação em tela
       estreita (ver ".topbar.menu-open .topbar-row--sub" mais abaixo) -
       nessa largura, ".topbar-row--sub" já fica sempre visível sozinha,
       então o botão não tinha nenhum efeito visível e parecia quebrado. */
    display: none;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--chrome-ink);
    background: none;
    border: none;
    padding: 0;
    opacity: 0.9;
}

.menu-btn:hover {
    opacity: 1;
}

.topbar .logo {
    justify-self: center;
    line-height: 0;
    position: relative;
    z-index: 2;
    margin: -24px 0;
    transition: margin 0.25s ease;
}

.topbar .logo img {
    height: 124px;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: height 0.25s ease;
}

.topbar.is-scrolled .logo {
    margin: 0;
}

.topbar.is-scrolled .logo img {
    height: 56px;
}

.topbar-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--text);
    opacity: 0.9;
    cursor: pointer;
}

.auth-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* .auth-link doubles as the navbar's "Entrar" link and as content-area
   controls (ex.: "Sair da conta" in the painel). The navbar copy sits on
   the fixed brand gradient, so it needs the non-themed chrome color
   regardless of light/dark - this override only wins inside the navbar. */
.topbar-right .auth-link {
    color: var(--chrome-ink);
}

.auth-user-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--chrome-ink);
    opacity: 0.9;
}

.auth-user:hover {
    opacity: 1;
}

/* Nome longo não pode empurrar a barra até invadir a logo centralizada. */
.auth-user-nome {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .auth-user-nome {
        display: none;
    }
}

/* Tablet: ainda com a logo grande do desktop, mas sem largura pra ela +
   4 ícones + avatar logado sem encostar - logo e espaçamento menores só
   nessa faixa (abaixo de 721px vale o layout de celular). */
@media (min-width: 721px) and (max-width: 900px) {
    .topbar .logo img {
        height: 110px;
    }
    .topbar-right {
        gap: 0.5rem;
    }
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.6rem;
    min-width: 180px;
    background: var(--chrome-surface);
    border: 1px solid rgba(230, 167, 29, 0.3);
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 60;
}

.auth-user-wrap:hover .user-dropdown,
.auth-user-wrap:focus-within .user-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Bridges the gap between the trigger and the dropdown so the hover
   doesn't drop when the cursor crosses the margin between them. */
.auth-user-wrap::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 0.6rem;
}

.user-dropdown a {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--chrome-ink);
    white-space: nowrap;
}

/* Só aparece em tela estreita, onde o ícone do feed sai da barra. */
.user-dropdown .user-dropdown-feed {
    display: none;
}

.user-dropdown a:hover,
.user-dropdown a:focus-visible {
    background: var(--chrome-surface-hover);
    color: var(--gold);
}

.user-dropdown-logout {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-dropdown-logout button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--chrome-ink);
    cursor: pointer;
}

.user-dropdown-logout button:hover,
.user-dropdown-logout button:focus-visible {
    background: var(--chrome-surface-hover);
    color: var(--chrome-accent);
}

.auth-btn {
    background: var(--gold);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.auth-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.theme-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--chrome-ink);
    cursor: pointer;
    opacity: 0.9;
}

.theme-toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    display: none;
}

.theme-toggle .icon-sun {
    display: block;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

.notificacoes-btn {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--chrome-ink);
    opacity: 0.9;
}

.notificacoes-btn svg {
    width: 22px;
    height: 22px;
}

.notificacoes-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.notificacoes-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.notificacao-item {
    display: flex;
    gap: 0.85rem;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.notificacao-item--nova {
    border-color: var(--magenta-text);
}

.notificacao-corpo p {
    margin: 0 0 0.3rem;
}

.notificacao-link {
    color: var(--gold-text);
    font-weight: 600;
}

.notificacao-link:hover {
    text-decoration: underline;
}

.notificacoes-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--magenta);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

.topbar-mini-nav {
    display: none;
}

.mini-btn {
    display: none;
}

@media (min-width: 721px) {
    /* Fica no HTML dentro de ".topbar-right", mas aparece à esquerda, ao
       lado da lupa: o lado direito (ícones + avatar + nome) não tem mais
       largura pra ele sem invadir a logo centralizada, e o esquerdo fica
       quase vazio. Posição absoluta = não ocupa espaço em coluna nenhuma. */
    .topbar-mini-nav {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        position: absolute;
        left: calc(1.5rem + 34px + 1rem);
        top: 50%;
        transform-origin: left center;
        opacity: 0;
        transform: translateY(-50%) scale(0.9);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .topbar-mini-nav a {
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--chrome-ink);
        opacity: 0.9;
    }

    .topbar-mini-nav a:hover {
        opacity: 1;
        text-decoration: underline;
    }

    .topbar.is-scrolled .topbar-mini-nav {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        pointer-events: auto;
    }

    /* Tablet: menu compacto, senão encosta na logo rolada. */
    @media (max-width: 900px) {
        .topbar-mini-nav {
            gap: 0.7rem;
            left: calc(1.5rem + 34px + 0.6rem);
        }
        .topbar-mini-nav a {
            font-size: 0.72rem;
            letter-spacing: 0.02em;
        }
    }

    .mini-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: none;
        color: var(--chrome-ink);
        cursor: pointer;
        opacity: 0;
        transform: scale(0.6);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    }

    .mini-btn:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .topbar.is-scrolled .mini-btn {
        opacity: 0.9;
        transform: scale(1);
        pointer-events: auto;
    }

    .topbar.is-scrolled .mini-btn:hover {
        opacity: 1;
    }

    .topbar-row--sub {
        overflow: hidden;
        max-height: 220px;
        transition: max-height 0.25s ease, opacity 0.2s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
    }

    .topbar.is-scrolled .topbar-row--sub {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.topbar-row--sub {
    background: linear-gradient(90deg, #3a1e54, var(--chrome-surface));
    padding: 0.65rem 0;
}

.topbar-row--sub .topbar-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.topbar::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--magenta), var(--purple), var(--gold));
}

.topbar .search {
    flex: 0 1 320px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.topbar .search:focus-within {
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.35);
}

.topbar .search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--chrome-ink);
    font-size: 0.9rem;
    outline: none;
}

.topbar .search input::placeholder {
    color: rgba(244, 238, 250, 0.55);
}

.topbar .search button {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--chrome-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.85;
}

.topbar .search button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.topbar-row--sub nav {
    flex: 0 0 auto;
    display: flex;
    gap: 1.75rem;
}

.topbar-row--sub nav a {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.9;
}

/* Todos da mesma cor; dourado + tracinho só na página atual (antes cada item tinha uma cor fixa
   e parecia que os três estavam "selecionados"). */
.topbar-row--sub nav a {
    position: relative;
    color: var(--chrome-ink);
}

.topbar-row--sub nav a[aria-current="page"],
.topbar-mini-nav a[aria-current="page"] {
    color: var(--gold);
    opacity: 1;
}

.topbar-row--sub nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
}

.topbar-row--sub nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Hero: destaque + itens */

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.destaque {
    display: block;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.25);
    border-radius: 14px;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.15s ease;
}

.destaque:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.destaque-corpo {
    padding: 1.75rem 2rem 2rem;
}

.destaque .tag {
    display: inline-block;
    background: var(--gold);
    color: #1a1200;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.destaque h2 {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
}

.destaque .excerpt {
    color: var(--text-muted);
    margin: 0.8rem 0 1.2rem;
}

.destaque .ler-mais {
    color: var(--magenta-text);
    font-weight: 600;
}

.destaque-carousel {
    position: relative;
}

.destaque[hidden] {
    display: none;
}

.destaque-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(20, 9, 31, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.destaque-nav:hover {
    background: rgba(20, 9, 31, 0.8);
    transform: translateY(-50%) scale(1.08);
}

.destaque-nav--prev {
    left: 0.75rem;
}

.destaque-nav--next {
    right: 0.75rem;
}

.destaque-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.destaque-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--text-muted);
    opacity: 0.4;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.destaque-dot:hover {
    opacity: 0.75;
}

.destaque-dot.is-active {
    background: var(--gold-text);
    opacity: 1;
    transform: scale(1.3);
}

.itens {
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 14px;
    padding: 1.5rem;
}

.itens h3 {
    margin: 0 0 1rem;
    color: var(--gold-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.itens ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itens li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hairline);
}

.itens li:last-child {
    border-bottom: none;
}

.itens li a:hover {
    color: var(--magenta-text);
}

.itens .vazio-item {
    color: var(--text-muted);
}

/* Ultimas materias */

.ultimas h3 {
    color: var(--gold-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.card {
    display: block;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.15s ease;
}

.card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.card-corpo {
    padding: 1.1rem 1.25rem 1.25rem;
}

.card h4 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

/* Categorias */

.categoria-badge {
    display: inline-block;
    color: var(--magenta-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.categoria-badge + .categoria-badge {
    margin-left: 0.6rem;
}

.categoria-badge--link {
    text-decoration: none;
}

.categoria-badge--link:hover {
    text-decoration: underline;
}

.noticia-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tag-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.tag-badge:hover {
    background: var(--input-bg-focus);
    color: var(--magenta-text);
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.categoria-tile {
    display: block;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

.categoria-tile:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.categoria-tile h4 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--gold-text);
}

.categoria-tile .meta {
    margin: 0;
}

/* Capas de matéria (destaque + cards) */

.media-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.media-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-box--destaque {
    aspect-ratio: 16 / 8;
}

.media-box--card {
    aspect-ratio: 16 / 9;
}

.media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
}

/* Shared meta / vazio */

.meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.meta strong {
    color: var(--magenta-text);
}

.curtidas-contagem {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    color: var(--text-muted);
}

.vazio {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.paginacao-link {
    font-weight: 700;
    color: var(--magenta-text);
    text-decoration: none;
}

.paginacao-link:hover {
    text-decoration: underline;
}

.paginacao-link--desabilitado {
    color: var(--text-muted);
    opacity: 0.5;
    pointer-events: none;
}

.paginacao-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Detail page */

.voltar {
    display: inline-block;
    color: var(--gold-text);
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.voltar:hover {
    text-decoration: underline;
}

.detalhe-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.noticia-full {
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.25);
    border-radius: 14px;
    padding: 2rem;
}

.noticia-full-img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.noticia-full h1 {
    margin: 0 0 1rem;
}

.byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: var(--chrome-ink);
    font-weight: 700;
    font-size: 0.95rem;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar--sm {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

.avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.avatar--xl {
    width: 96px;
    height: 96px;
    font-size: 2.2rem;
}

.byline .meta {
    margin: 0;
}

.noticia-full .conteudo {
    margin-top: 1.5rem;
}

.noticia-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.copiar-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.copiar-link-btn:hover {
    color: var(--text);
    border-color: var(--gold-text);
}

.copiar-link-btn.copiado {
    color: var(--gold-text);
    border-color: var(--gold-text);
}

/* Curtidas (matéria e comentário) */

.curtir-form-inline {
    display: inline-flex;
}

.curtir-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.curtir-btn:hover {
    color: var(--text);
    border-color: var(--magenta-text);
}

.curtir-btn:active {
    transform: scale(0.94);
}

.curtir-btn.is-active {
    color: var(--magenta-text);
    border-color: var(--magenta-text);
}

.curtir-btn--sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    gap: 0.3rem;
}

/* Auth pages */

.auth-body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(20, 9, 31, 0.5) 0%, rgba(20, 9, 31, 0.8) 55%, rgba(20, 9, 31, 0.95) 100%),
        var(--auth-bg-image) center 30% / cover no-repeat;
}

.auth-body .topbar {
    position: static;
}

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: 2rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.25);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.65);
}

.auth-card h1 {
    margin: 0 0 0.4rem;
    font-size: 1.5rem;
}

.auth-sub {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.auth-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.auth-checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--magenta);
    cursor: pointer;
}

.auth-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

textarea.auth-input {
    resize: vertical;
}

.auth-input:focus {
    outline: none;
    border-color: var(--gold-text);
    background: var(--input-bg-focus);
}

.auth-help {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0.35rem 0 0;
}

.auth-error {
    color: var(--magenta-text);
    font-size: 0.8rem;
    margin: 0.35rem 0 0;
}

.auth-input-erro {
    border-color: var(--magenta-text) !important;
}

.auth-submit {
    background: var(--gold);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.auth-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.auth-submit--link {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 0.5rem;
}

.painel-form-acoes {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.preview-btn {
    background: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.preview-btn:hover {
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}

.auth-alt {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 1.3rem 0 0;
}

.auth-alt a {
    color: var(--gold-text);
    font-weight: 600;
}

.auth-alt a:hover {
    text-decoration: underline;
}

/* Painel do usuário */

.painel {
    display: flex;
    justify-content: center;
}

.painel-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.25);
    border-radius: 14px;
    padding: 2rem;
}

.painel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* Avatar sobrepondo a capa (estilo Twitter/Facebook) - só faz sentido
   quando existe capa acima pra sobrepor; sem capa, o avatar continua no
   fluxo normal ao lado do nome. Só o avatar sobe (não a linha toda) pra
   não levar o nome junto pra cima de cima da própria imagem de capa,
   onde ficaria ilegível. O anel (--bg-card) existe pra separar
   visualmente o avatar de qualquer parte clara da própria foto de capa
   por trás dele. */
.painel-header--com-capa {
    align-items: flex-start;
}

.painel-header--com-capa .avatar {
    margin-top: -3rem;
    border: 4px solid var(--bg-card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.painel-header h1 {
    margin: 0;
    font-size: 1.3rem;
}

.painel-header .meta {
    margin-top: 0.2rem;
}

.painel-header-title {
    margin-bottom: 1.5rem;
}

.painel-header-title h1 {
    margin: 0;
    font-size: 1.3rem;
}

.avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.avatar-upload-trigger {
    position: relative;
    display: block;
    flex: 0 0 auto;
    border-radius: 50%;
    cursor: pointer;
}

.avatar-upload-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--purple);
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}

.avatar-upload-trigger:hover .avatar-upload-badge,
.avatar-upload-trigger:focus-visible .avatar-upload-badge {
    background: var(--magenta);
    transform: scale(1.08);
}

.avatar-upload-info {
    min-width: 0;
}

.avatar-upload-name {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.avatar-upload-info .meta {
    margin: 0.15rem 0 0;
}

.avatar-upload-info .auth-help {
    margin-top: 0.35rem;
}

.avatar-upload input[type="file"],
.cover-upload input[type="file"],
.thumb-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cover-upload {
    position: relative;
}

.cover-upload-trigger {
    position: relative;
    display: block;
    cursor: pointer;
    max-width: 360px;
}

.cover-upload-preview {
    border-radius: 12px;
}

.cover-upload-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--purple);
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cover-upload-trigger:hover .cover-upload-badge,
.cover-upload-trigger:focus-visible .cover-upload-badge {
    background: var(--magenta);
    transform: scale(1.08);
}

.thumb-upload {
    display: inline-block;
}

.thumb-upload-trigger {
    position: relative;
    display: block;
    width: 84px;
    cursor: pointer;
}

.thumb-upload-preview {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.thumb-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-upload-preview .media-placeholder svg {
    width: 24px;
    height: 24px;
}

.thumb-upload-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--purple);
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}

.thumb-upload-trigger:hover .thumb-upload-badge,
.thumb-upload-trigger:focus-visible .thumb-upload-badge {
    background: var(--magenta);
    transform: scale(1.08);
}

/* Jogo favorito / últimos zerados - "tile" vertical (capa grande em cima,
   nome/plataformas/nota embaixo), reaproveitado tanto no formulário (com
   botão "x" pra remover) quanto no perfil público (só leitura). */
.jogo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.jogo-tile--vazio {
    aspect-ratio: 16 / 10;
    border-style: dashed;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.jogo-tile-vazio-texto {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.jogo-tile-capa-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.jogo-tile-capa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jogo-tile-remover {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jogo-tile-remover:hover {
    background: var(--magenta);
}

.jogo-tile-corpo {
    padding: 0.6rem 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.jogo-tile-nome {
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jogo-tile-plataformas {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogo-tile-nota {
    display: flex;
    gap: 2px;
    margin-top: auto;
    padding-top: 0.2rem;
}

.jogo-tile-estrela {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--input-border);
    cursor: pointer;
}

button.jogo-tile-estrela {
    cursor: pointer;
}

span.jogo-tile-estrela {
    cursor: default;
}

.jogo-tile-estrela.is-preenchida {
    color: var(--gold);
}

.jogo-favorito-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.jogo-favorito-wrap .jogo-tile,
.jogo-favorito-wrap .jogo-tile--vazio {
    max-width: 220px;
}

.jogos-zerados-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.jogos-zerados-slots:empty {
    margin-bottom: 0;
}

.jogo-busca {
    position: relative;
}

.jogo-resultados {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.3);
    border-radius: 10px;
    padding: 0.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.jogo-resultado-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-size: 0.85rem;
}

.jogo-resultado-item:hover,
.jogo-resultado-item:focus-visible {
    background: var(--chrome-surface-hover);
}

.jogo-resultado-capa {
    flex: 0 0 auto;
    width: 48px;
    height: 27px;
    border-radius: 5px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.jogo-resultado-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No perfil público os cartões são só leitura (sem botão de remover) e
   ficam numa grade em vez de empilhados. */
.painel-logout {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    text-align: center;
}

.painel-card--wide {
    max-width: 700px;
}

.categoria-slot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.categoria-slot .categoria-select,
.categoria-slot .categoria-novo-input {
    flex: 1 1 auto;
    min-width: 0;
}

.categoria-remover-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.categoria-remover-btn:hover {
    color: var(--magenta-text);
}

#add-categoria-btn {
    display: inline-block;
    margin-top: 0.2rem;
}

.imagens-conteudo-bloco {
    border-top: 1px solid var(--hairline);
    padding-top: 1.25rem;
    margin-top: 0.25rem;
}

.imagens-conteudo-bloco h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--gold-text);
}

.imagem-form-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    margin-bottom: 0.9rem;
}

.imagem-form-row .auth-field {
    margin: 0;
}

.imagem-form-identificador label {
    color: var(--text-muted);
    font-weight: 500;
}

.imagem-form-identificador .auth-help {
    margin-top: 0.3rem;
}

.imagem-inserir-wrap {
    grid-column: 1 / -1;
}

.imagem-inserir-btn {
    background: none;
    border: 1px dashed var(--gold-text);
    color: var(--gold-text);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.imagem-inserir-btn:hover {
    background: rgba(230, 167, 29, 0.12);
}

.imagem-form-delete {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

#add-imagem-btn {
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* Imagem inline no corpo da matéria: marcador antigo [[imagem:id]] (classe
   .conteudo-imagem) ou <img> direto do editor rico/TinyMCE - sem legenda é
   só a tag <img> solta; com legenda o TinyMCE embrulha em figure.image,
   igual ao sistema antigo. */

.conteudo-imagem,
.conteudo .image {
    margin: 1.5rem 0;
    text-align: center;
}

.conteudo-imagem img {
    display: inline-block;
}

/* O TinyMCE grava o tamanho arrastado como atributo width/height "de
   verdade" no <img> (não style inline) - como atributo HTML é só uma dica
   de tamanho pro navegador, um max-width/height:auto vindo de CSS externo
   (aqui) já vence sozinho se a imagem estourar a coluna numa tela estreita,
   sem precisar de !important. Sem border-radius de propósito: numa imagem
   pequena (ex.: uma logo bem larga e baixa, redimensionada pra caber no
   texto) um raio fixo em px vira uma fração grande da altura e corta
   conteúdo perto do canto - parecia bug de corte, mas era isso. */
.conteudo img {
    max-width: 100%;
    height: auto;
    margin: 0.3rem 0;
}

/* Imagem alinhada à esquerda/direita no editor rico (float, com texto
   fluindo ao lado) - um respiro lateral pro texto não colar na imagem. */
.conteudo p img[style*="float"] {
    margin: 0.3rem 1rem 0.5rem;
}

/* Tamanho escolhido na hora de inserir a imagem no texto - só existe no
   marcador antigo ([[imagem:id:tamanho]]). A imagem do editor rico é
   redimensionada livremente arrastando o canto dela, então já sai com a
   largura/altura certas nos atributos do próprio <img> (por isso não
   precisa de um equivalente aqui - o max-width acima é quem evita que ela
   estoure a coluna numa tela estreita). */
.conteudo-imagem--pequena img {
    max-width: 320px;
}

.conteudo-imagem--media img {
    max-width: 600px;
}

.conteudo-imagem--grande img {
    max-width: 100%;
    width: 100%;
}

.conteudo-imagem figcaption,
.conteudo .image figcaption {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 0.5rem;
    text-align: center;
}

/* Foto alta (arte em pé, pôster) não ocupa mais que a tela. Com width automático o navegador
   reduz mantendo a proporção. */
.conteudo-imagem img {
    max-height: 80vh;
}

/* Galeria (matéria de "novas imagens" do Redator): grade de miniaturas 16:9; com número ímpar
   de fotos a primeira ocupa a linha inteira, como destaque. Clicar abre o visualizador. */
.conteudo-galeria {
    margin: 1.5rem 0;
}

.conteudo-galeria-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-radius: 10px;
    overflow: hidden;
}

.conteudo .conteudo-galeria-grade img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    background: var(--bg-card);
}

.conteudo-galeria-grade img:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
}

.conteudo-galeria figcaption {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 0.5rem;
    text-align: center;
}

.conteudo figcaption a {
    color: inherit;
    text-decoration: underline;
}

/* Visualizador de imagens (noticias/static/noticias/js/materia.js). */
.imagem-ampliavel {
    cursor: zoom-in;
    transition: filter 0.15s ease;
}

.imagem-ampliavel:hover {
    filter: brightness(1.08);
}

.imagem-ampliavel:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

html.visualizador-aberto {
    overflow: hidden;
}

.visualizador {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 3, 14, 0.97);
    animation: visualizador-entra 0.15s ease;
}

.visualizador[hidden] {
    display: none;
}

@keyframes visualizador-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

.visualizador-figura {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 76px 20px;
    box-sizing: border-box;
}

.visualizador-foto {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 3rem);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease;
}

.visualizador.is-carregando .visualizador-foto {
    opacity: 0.35;
}

.visualizador-legenda {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    color: #e9def5;
    font-size: 0.88rem;
    text-align: center;
}

.visualizador-contador {
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.visualizador-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.visualizador-btn:hover,
.visualizador-btn:focus-visible {
    background: var(--purple);
}

.visualizador-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.visualizador-btn[hidden] {
    display: none;
}

.visualizador-fechar {
    top: 12px;
    right: 12px;
}

.visualizador-seta {
    top: 50%;
    transform: translateY(-50%);
}

.visualizador-anterior {
    left: 14px;
}

.visualizador-proxima {
    right: 14px;
}

@media (max-width: 720px) {
    .visualizador-figura {
        padding: 60px 8px 76px;
    }

    /* No celular as setas vão pra baixo, longe da foto (e o dedo também pode deslizar). */
    .visualizador-seta {
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .visualizador-anterior {
        left: calc(50% - 60px);
    }

    .visualizador-proxima {
        right: calc(50% - 60px);
    }
}

/* Vídeo do YouTube inline no corpo da matéria - via marcador [[video:id]]
   (sistema antigo) ou pelo botão de vídeo do editor rico - os dois geram
   exatamente este mesmo HTML (ver marcacaoDoVideo() em editor.js). */

.conteudo-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.conteudo-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Editor rico (TinyMCE) - a área de digitação em si já sai colorida certa
   via content_style (editor.js, injetado dentro do <iframe> dela). Aqui é só
   o "chrome" por fora (barra de ferramentas, rodapé) - o skin genérico
   escuro do TinyMCE usa um cinza sem nada a ver com o roxo escuro do site,
   então troca pra --bg-card/--hairline daqui. Precisa de !important porque
   o CSS do skin é injetado depois deste arquivo (o TinyMCE só sabe qual
   skin carregar depois de rodar), então venceria por ordem sozinho. */
.tox-tinymce,
.tox-editor-header,
.tox-toolbar-overlord,
.tox-toolbar__primary,
.tox-toolbar,
.tox-statusbar {
    background-color: var(--bg-card) !important;
    border-color: var(--hairline) !important;
}

/* Painel de matérias (staff) */

.materias-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.materias-header h3 {
    margin: 0;
}

.materias-tabela-wrap {
    overflow-x: auto;
    border-radius: 12px;
}

.materias-tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.2);
}

.materias-tabela th,
.materias-tabela td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}

.materias-tabela th {
    color: var(--gold-text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.materias-tabela tr:last-child td {
    border-bottom: none;
}

.materias-acoes {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.materias-acoes a {
    color: var(--magenta-text);
    font-weight: 600;
}

.materias-acoes a:hover {
    text-decoration: underline;
}

.materias-apagar-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.materias-apagar-btn:hover {
    color: var(--magenta-text);
    text-decoration: underline;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-badge--publicado {
    background: rgba(34, 202, 130, 0.15);
    color: #22ca82;
}

.status-badge--rascunho {
    background: rgba(230, 167, 29, 0.15);
    color: var(--gold-text);
}

.status-badge--agendado {
    background: rgba(102, 34, 202, 0.18);
    color: var(--magenta-text);
}

.materias-header-acoes {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.materias-leituras {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.materias-leituras span {
    color: var(--text-muted);
}

/* Agendar publicação: recolhido por padrão (a maioria das matérias sai na hora). */
.agendar {
    margin: 0.25rem 0 1rem;
    border-top: 1px solid var(--hairline);
    padding-top: 0.75rem;
}

.agendar summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.agendar[open] summary {
    color: var(--text);
}

.agendar-corpo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.agendar-corpo .auth-input {
    width: auto;
    min-width: 14rem;
}

/* Painel de leituras (equipe) */
.leituras-periodos {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.leituras-periodos a {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.leituras-periodos a[aria-current="page"] {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

.leituras-total {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.leituras-total strong {
    font-size: 1.6rem;
    color: var(--text);
}

.leituras-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--hairline);
}

.leituras-barra {
    flex: 1 1 0;
    min-width: 2px;
    background: linear-gradient(to top, var(--purple), var(--magenta));
    border-radius: 3px 3px 0 0;
}

.leituras-barra--zero {
    background: var(--hairline);
}

.materias-bloquear-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
}

.materias-bloquear-btn:hover {
    text-decoration: underline;
}

.perfil-bio {
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.perfil-bio--vazia {
    color: var(--text-muted);
    font-style: italic;
}

.perfil-privado-aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 1rem;
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.perfil-editar-btn {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.perfil-capa {
    margin: -2rem -2rem 1.5rem;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.perfil-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-redes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.perfil-rede-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

a.perfil-rede-link:hover {
    color: var(--magenta-text);
}

.perfil-rede-link--texto {
    font-size: 0.85rem;
}

.perfil-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}

.perfil-contador {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.perfil-contador strong {
    color: var(--text);
    font-weight: 700;
}

.perfil-contador:hover {
    border-color: var(--magenta-text);
    color: var(--text);
    background: var(--input-bg-focus);
}

.perfil-contador:active {
    transform: scale(0.96);
}

.seguir-form-inline {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.perfil-acoes-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.perfil-acoes-linha .seguir-form-inline {
    margin-bottom: 0;
}

.seguir-btn {
    display: inline-block;
    background: var(--gold);
    color: #1a1200;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.seguir-btn:hover {
    filter: brightness(1.08);
}

.seguir-btn.is-active {
    background: none;
    color: var(--text);
    border-color: var(--input-border);
    filter: none;
}

.seguir-btn.is-active:hover {
    border-color: var(--magenta-text);
    color: var(--magenta-text);
}

.seguir-btn--sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
}

.pessoas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pessoa-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}

.pessoa-nome {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pessoa-item .seguir-form-inline {
    margin-bottom: 0;
}

.feed-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Cada atividade é um "post": topo (avatar + frase + quando), o conteúdo
   recuado pra alinhar com o texto (não com o avatar) e as ações embaixo. */

.feed-item {
    --feed-recuo: calc(38px + 0.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.feed-item-topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feed-item-linha {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.45;
}

.feed-item-nome {
    font-weight: 700;
    color: var(--text);
}

.feed-item-nome:hover {
    color: var(--magenta-text);
}

.feed-item-quando {
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap;
}

/* Várias pessoas curtiram a mesma matéria: avatares sobrepostos. */
.feed-avatares {
    display: flex;
    flex: 0 0 auto;
}

.feed-avatares .avatar {
    border: 2px solid var(--bg-card);
}

.feed-avatares .avatar + .avatar {
    margin-left: -14px;
}

.feed-balao {
    margin: 0 0 0 var(--feed-recuo);
    padding: 0.65rem 0.9rem;
    background: var(--input-bg);
    border-radius: 4px 14px 14px 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.feed-materia {
    display: flex;
    align-items: stretch;
    margin-left: var(--feed-recuo);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.feed-materia:hover {
    border-color: var(--magenta-text);
}

.feed-materia-capa {
    flex: 0 0 auto;
    width: 112px;
    min-height: 64px;
    object-fit: cover;
    display: block;
}

.feed-materia-titulo {
    align-self: center;
    /* margin, não padding: o padding entra na área do line-clamp e deixava
       aparecer um pedaço da 3ª linha embaixo do texto cortado. */
    margin: 0.6rem 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-acoes {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: var(--feed-recuo);
}

.feed-form-inline {
    margin: 0;
}

.feed-acao-btn {
    background: none;
    border: none;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.feed-acao-btn:hover {
    background: var(--input-bg);
    color: var(--text);
}

.feed-responder-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: var(--feed-recuo);
}

.feed-responder-form[hidden] {
    display: none;
}

.feed-responder-form textarea {
    resize: vertical;
}

.feed-responder-botoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feed-responder-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gold-text);
}

.feed-responder-status--erro {
    color: var(--magenta-text);
}

.feed-pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: var(--feed-recuo);
}

.feed-pessoa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.85rem 0.25rem 0.3rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

a.feed-pessoa:hover {
    border-color: var(--magenta-text);
}

.feed-pessoa .avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.feed-pessoa--mais {
    padding: 0.25rem 0.85rem;
    color: var(--text-muted);
}

.feed-vazio {
    padding: 2rem 1rem;
    text-align: center;
}

.feed-vazio-titulo {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.feed-vazio .vazio {
    padding: 0;
}

@media (max-width: 720px) {
    .feed-item {
        --feed-recuo: 0px;
        padding: 0.9rem;
    }
    .feed-materia-capa {
        width: 88px;
    }
}

/* Mensagens (DM) */

.conversas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conversa-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: var(--text);
    text-decoration: none;
}

.conversa-item--nao-lida .conversa-item-link {
    border-color: var(--magenta-text);
}

.conversa-item-corpo {
    flex: 1;
    min-width: 0;
}

.conversa-item-nome {
    margin: 0;
    font-weight: 700;
}

.conversa-item-preview {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversa-item--nao-lida .conversa-item-preview {
    color: var(--text);
    font-weight: 600;
}

.conversa-item-lado {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.conversa-item-quando {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.conversa-item-badge {
    flex: 0 0 auto;
    background: var(--magenta);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
}

.conversa-header-nome {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.conversa-header-nome:hover {
    color: var(--magenta-text);
}

.conversa-corpo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.conversa-mensagens {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.25rem;
}

.conversa-bolha {
    align-self: flex-start;
    max-width: 75%;
    background: var(--input-bg);
    border-radius: 14px 14px 14px 4px;
    padding: 0.6rem 0.9rem;
}

.conversa-bolha p {
    margin: 0;
    overflow-wrap: break-word;
    /* Shift+Enter no campo de envio quebra linha - a bolha precisa mostrar. */
    white-space: pre-wrap;
}

.conversa-bolha--minha {
    align-self: flex-end;
    background: var(--magenta);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

.conversa-bolha-data {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    opacity: 0.7;
}

.conversa-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    flex: 0 0 auto;
}

.conversa-form textarea {
    flex: 1;
    resize: none;
}

.conversa-enviar-btn {
    flex: 0 0 auto;
}

.conversa-erro {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--magenta-text);
}

.conversa-erro[hidden] {
    display: none;
}

/* Mini-chat da navbar: painel flutuante aberto pelo ícone de mensagens.
   (.chat-wrap/.chat-panel/.chat-topo/... também servem o popup de notificações.) */

.chat-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.chat-panel {
    position: absolute;
    top: 100%;
    right: -1rem;
    margin-top: 0.6rem;
    width: 360px;
    height: 480px;
    max-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid rgba(230, 167, 29, 0.3);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 70;
}

.chat-panel[hidden],
.chat-view[hidden] {
    display: none;
}

.chat-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.5rem;
}

.chat-ver-tudo {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--magenta-text);
}

.chat-busca {
    padding: 0 0.75rem 0.5rem;
}

.chat-busca input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}

.chat-rolagem {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem;
}

.chat-panel .conversa-item-link {
    background: transparent;
    border-color: transparent;
}

.chat-panel .conversa-item-link:hover {
    background: var(--input-bg);
}

.chat-panel .conversa-item--nao-lida .conversa-item-link {
    border-color: transparent;
}

.vazio.chat-vazio {
    padding: 1rem 0.75rem 0.5rem;
    font-size: 0.9rem;
}

.chat-dica {
    margin: 0;
    padding: 0.25rem 1rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.chat-secao-titulo {
    margin: 0.75rem 0.5rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.chat-conversa {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-conversa-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--hairline);
}

.chat-conversa-topo .conversa-header-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-icone-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-icone-btn:hover {
    background: var(--input-bg);
    color: var(--text);
}

.chat-conversa .conversa-corpo {
    padding: 0.75rem;
}

.chat-conversa .conversa-form {
    margin-top: 0.6rem;
    gap: 0.5rem;
}

.chat-conversa .conversa-enviar-btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    /* Com o ícone de chat a fileira logada tem 5 itens (tema, feed, chat,
       sino, avatar) e passava da largura de um celular de 390px - aperta
       o espaçamento e o tamanho dos botões só em tela estreita. */
    .topbar-right {
        gap: 0.15rem;
    }

    .topbar-right .theme-toggle,
    .topbar-right .notificacoes-btn {
        width: 34px;
        height: 34px;
    }

    /* A fileira de ícones da navbar já enche a largura do celular: o avatar
       basta pra identificar a conta, o nome só ocupa espaço. */
    .auth-user-nome {
        display: none;
    }

    /* Em tela estreita o painel vira uma folha ocupando a largura toda,
       presa à viewport (não ao ícone, que fica longe da borda esquerda). */
    .chat-wrap {
        position: static;
    }

    .chat-panel {
        position: fixed;
        top: 4.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        height: min(75vh, 520px);
        margin-top: 0;
    }
}

/* Comentários */

.comentarios {
    margin-top: 2.5rem;
}

.comentarios h3 {
    margin: 0 0 1.2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-text);
}

.comentario-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.comentario-form textarea {
    resize: vertical;
}

.comentario-form .auth-submit {
    align-self: flex-end;
}

.comentario-login-prompt {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.comentario-login-prompt a {
    color: var(--gold-text);
    font-weight: 600;
}

.comentario-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comentario-item {
    display: flex;
    gap: 0.85rem;
}

.comentario-item .avatar {
    flex-shrink: 0;
}

.comentario-corpo {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

.comentario-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.4rem;
}

.autor-link {
    font-weight: 700;
    color: var(--text);
}

.autor-link:hover {
    color: var(--gold-text);
}

.comentario-data {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.comentario-texto {
    margin: 0;
    white-space: pre-line;
}

.comentario-acoes-gerais {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
}

.comentario-responder-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.comentario-responder-btn:hover {
    color: var(--magenta-text);
    text-decoration: underline;
}

.comentario-responder-form {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.comentario-responder-form[hidden] {
    display: none;
}

.comentario-responder-form textarea {
    resize: vertical;
}

.comentario-respostas {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.9rem 0 0 1.25rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.comentario-item--resposta .avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.comentario-acoes {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.comentario-acoes[hidden] {
    display: none;
}

.comentario-acoes button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.comentario-acoes button:hover {
    color: var(--magenta-text);
    text-decoration: underline;
}

.comentario-editar-form {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* The [hidden] attribute is how JS toggles this form, but setting our own
   `display` above on the same element outranks the browser's built-in
   `[hidden] { display: none }` default (author styles beat user-agent
   styles regardless of specificity) - so it has to be re-asserted here. */
.comentario-editar-form[hidden] {
    display: none;
}

.comentario-editar-form textarea {
    resize: vertical;
}

.comentario-editar-botoes {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.comentario-editar-botoes .auth-submit {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.comentario-editar-botoes button[type="button"] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.comentario-editar-botoes button[type="button"]:hover {
    color: var(--magenta-text);
    text-decoration: underline;
}

.comentario-vazio {
    color: var(--text-muted);
    font-style: italic;
}

/* Mensagens (django.contrib.messages) */

.messages {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.3);
    color: var(--gold-text);
}

.message--error {
    border-color: rgba(187, 23, 227, 0.4);
    color: var(--magenta-text);
}

.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--hairline);
    background: var(--bg-card);
}

.footer-grid {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.9rem 0 1rem;
    max-width: 32ch;
}

.footer-logo {
    height: 56px;
    display: block;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: var(--chrome-ink);
}

.footer-social:hover {
    filter: brightness(1.1);
}

.footer-col h4 {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-text);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-col a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-col a:hover {
    color: var(--magenta-text);
}

.footer-bottom {
    border-top: 1px solid var(--hairline);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Celular: marca numa faixa só (logo + frase + Instagram) e os links em duas colunas -
   empilhado, o rodapé ocupava mais de meia tela em toda página. */
@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 0.9rem;
    }

    .footer-logo {
        height: 40px;
    }

    .footer-brand p {
        flex: 1 1 160px;
        margin: 0;
        font-size: 0.82rem;
    }

    .footer-col h4 {
        margin-bottom: 0.7rem;
    }

    .footer-col ul {
        gap: 0.55rem;
    }

    .footer-bottom {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 720px) {
    .topbar .logo img {
        height: 52px;
    }
    .menu-btn {
        display: flex;
    }
    .menu-btn span {
        display: none;
    }
    /* Ícones da direita não cabem ao lado da logo centralizada: o do feed
       sai da barra e vira item do menu do avatar (".user-dropdown-feed",
       escondido em tela larga). */
    .feed-btn {
        display: none;
    }
    .user-dropdown .user-dropdown-feed {
        display: block;
    }
    .topbar-row-inner {
        padding: 0 1rem;
    }
    /* Deslogado: "Entrar" + "Cadastrar" não cabem ao lado da logo - fica
       só "Entrar" (com o visual do botão dourado), e o cadastro continua
       a um clique pelo "Cadastre-se" da própria tela de login. */
    .topbar-right .auth-btn {
        display: none;
    }
    .topbar-right .auth-link {
        background: var(--gold);
        color: #1a1200;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
    }
    /* Logado ainda sobram chat + sino + avatar na direita; o lado esquerdo
       (só o botão de menu) tem folga, então o botão de tema vai pra lá,
       colado no menu - posicionado por cima em vez de mudar o HTML, pra
       não mexer na ordem da barra no desktop. */
    .topbar-right .theme-toggle {
        position: absolute;
        left: calc(1rem + 20px + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
    }
    .topbar-row--sub {
        display: none;
    }
    .topbar-row--sub .topbar-row-inner {
        flex-wrap: wrap;
        row-gap: 0.6rem;
    }
    .topbar.menu-open .topbar-row--sub {
        display: block;
    }
    .topbar .search {
        flex: 1 1 100%;
    }
    .topbar nav {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .detalhe-grid {
        grid-template-columns: 1fr;
    }
    .cards {
        grid-template-columns: 1fr;
    }
    .categorias-grid {
        grid-template-columns: 1fr;
    }
    .materias-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .imagem-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .categoria-slot {
        flex-wrap: wrap;
    }
    .categoria-slot .categoria-select,
    .categoria-slot .categoria-novo-input {
        flex-basis: 100%;
    }
}

/* Página /mensagens/: todas as conversas à esquerda, a conversa aberta à direita */

.mensagens-card {
    max-width: 1000px;
    padding: 0;
    overflow: hidden;
}

.mensagens-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    height: 72vh;
    min-height: 460px;
}

.mensagens-lateral {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--hairline);
}

.mensagens-lateral-topo {
    padding: 1rem 1rem 0.5rem;
}

.mensagens-lateral-topo h1 {
    margin: 0;
    font-size: 1.2rem;
}

.mensagens-principal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.mensagens-principal .chat-conversa-topo {
    padding: 0.8rem 1.25rem;
}

.mensagens-principal .chat-conversa .conversa-corpo {
    padding: 1rem 1.25rem;
}

.mensagens-vazio {
    max-width: 320px;
    margin: auto;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.mensagens-vazio-titulo {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

/* O "voltar" só existe no celular, onde as colunas viram telas separadas. */
.mensagens-voltar {
    display: none;
}

.mensagens-lateral .conversa-item-link {
    background: transparent;
    border-color: transparent;
}

.mensagens-lateral .conversa-item-link:hover {
    background: var(--input-bg);
}

.mensagens-lateral .conversa-item--nao-lida .conversa-item-link {
    border-color: transparent;
}

/* Conversa aberta na lista: fundo + barrinha lateral. */
.conversa-item--ativa .conversa-item-link,
.mensagens-lateral .conversa-item--ativa .conversa-item-link {
    background: var(--input-bg);
    box-shadow: inset 3px 0 0 var(--magenta);
}

@media (max-width: 720px) {
    .mensagens-layout {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100vh - 9rem);
    }

    .mensagens-lateral {
        border-right: none;
    }

    .mensagens-layout--conversa .mensagens-lateral,
    .mensagens-layout:not(.mensagens-layout--conversa) .mensagens-principal {
        display: none;
    }

    .mensagens-voltar {
        display: flex;
    }
}

/* Popup de notificações (mesmo painel/estrutura do mini-chat) */

.notif-panel {
    height: auto;
    max-height: min(480px, calc(100vh - 6rem));
}

.notif-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.notif-item:hover {
    background: var(--input-bg);
}

.notif-item--nova {
    background: rgba(187, 23, 227, 0.1);
}

.notif-corpo {
    flex: 1;
    min-width: 0;
}

.notif-texto {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.notif-alvo {
    color: var(--gold-text);
    font-weight: 600;
}

.notif-quando {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notif-ponto {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--magenta);
}

/* Troféus, XP e nível de conta */

:root {
    --r-comum: #8fa3b8;
    --r-raro: #4aa8ff;
    --r-epico: #c04bff;
    --r-lendario: #ffb800;
}

:root[data-theme="light"] {
    --r-comum: #64748b;
    --r-raro: #1d78d6;
    --r-epico: #9a12bd;
    --r-lendario: #b57600;
}

.trofeu--comum { --cor: var(--r-comum); }
.trofeu--raro { --cor: var(--r-raro); }
.trofeu--epico { --cor: var(--r-epico); }
.trofeu--lendario { --cor: var(--r-lendario); }

/* Medalha: círculo com o ícone, na cor da raridade (lendário brilha). */
.trofeu-medalha,
.notif-medalha {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--cor);
    background: var(--input-bg);
    background: color-mix(in srgb, var(--cor) 16%, transparent);
    line-height: 1;
}

.trofeu-medalha {
    width: 56px;
    height: 56px;
    font-size: 1.7rem;
}

.notif-medalha {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
}

.trofeu--lendario .trofeu-medalha {
    box-shadow: 0 0 14px color-mix(in srgb, var(--cor) 55%, transparent);
}

/* Nível: selo + barra de XP (perfil e página de troféus) */

.nivel-bloco {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--input-bg);
    border-radius: 12px;
}

.nivel-selo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: #fff;
    line-height: 1;
}

.nivel-selo span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.85;
}

.nivel-selo strong {
    font-size: 1.5rem;
}

.nivel-info {
    flex: 1;
    min-width: 0;
}

.nivel-titulo {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.nivel-barra {
    height: 8px;
    margin-bottom: 0.4rem;
    border-radius: 999px;
    background: var(--hairline);
    overflow: hidden;
}

.nivel-barra-preenchimento {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--magenta));
}

/* Vitrine no perfil */

.perfil-trofeus-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--magenta-text);
}

/* Página de troféus */

.trofeus-cabecalho {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.trofeus-cabecalho h1 {
    margin: 0;
}

.trofeus-vitrine-barra {
    margin-bottom: 0.5rem;
    padding: 1rem;
    border: 1px dashed var(--hairline);
    border-radius: 12px;
}

.trofeus-vitrine-titulo {
    margin: 0 0 0.3rem;
    font-weight: 700;
}

.trofeus-contador {
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(187, 23, 227, 0.15);
    color: var(--magenta-text);
    font-size: 0.8rem;
}

.trofeus-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.trofeus-secao h2 {
    margin: 1.6rem 0 0.7rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trofeus-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trofeu-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}

.trofeu-card.is-desbloqueado {
    border-color: color-mix(in srgb, var(--cor) 45%, transparent);
}

.trofeu-card.is-bloqueado .trofeu-medalha {
    filter: grayscale(1);
    opacity: 0.45;
}

.trofeu-card.is-bloqueado .trofeu-nome,
.trofeu-card.is-bloqueado .trofeu-desc {
    opacity: 0.7;
}

.trofeu-card.is-na-vitrine {
    border-color: var(--cor);
    box-shadow: inset 0 0 0 1px var(--cor);
}

.trofeu-card.is-editavel .trofeu-corpo {
    padding-right: 6.8rem;
}

.trofeu-corpo {
    flex: 1;
    min-width: 0;
}

.trofeu-nome {
    margin: 0 0 0.15rem;
    font-size: 0.98rem;
}

.trofeu-desc {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trofeu-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.trofeu-raridade {
    font-weight: 700;
    color: var(--cor);
}

.trofeu-progresso {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.trofeu-progresso-barra {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--hairline);
    overflow: hidden;
}

.trofeu-progresso-barra div {
    height: 100%;
    border-radius: 999px;
    background: var(--cor);
}

.trofeu-escolher {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.trofeu-escolher.is-desativado {
    opacity: 0.4;
    cursor: not-allowed;
}

.trofeu-posicao {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cor);
    color: #fff;
    font-size: 0.7rem;
    line-height: 18px;
    text-align: center;
}

.trofeu-posicao:empty {
    display: none;
}

.notif-xp {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-text);
}

/* Perfil: coluna lateral (quem é) + coluna principal (o que faz) */

.perfil-card {
    max-width: 980px;
}

.perfil-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.perfil-lateral {
    min-width: 0;
}

/* Com capa, o avatar sobe pra sobrepor a imagem (o anel vem de .painel-header--com-capa .avatar). */
.perfil-lateral.painel-header--com-capa .avatar {
    margin-top: -3.6rem;
}

.perfil-lateral h1 {
    margin: 0.9rem 0 0.15rem;
    font-size: 1.4rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.perfil-lateral > .meta {
    margin: 0 0 1rem;
}

.perfil-lateral .perfil-bio {
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
}

.perfil-lateral .perfil-contadores {
    margin: 0 0 1rem;
}

.perfil-lateral .perfil-redes {
    margin: 0 0 1.25rem;
}

.perfil-lateral .perfil-editar-btn {
    display: block;
    margin-bottom: 0;
    text-align: center;
}

.perfil-lateral .perfil-acoes-linha {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0;
}

/* Seguir e Enviar mensagem com a mesma altura (os dois vêm de estilos diferentes no resto do site). */
.perfil-lateral .seguir-btn,
.perfil-lateral .preview-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
}

.perfil-principal {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
}

.perfil-principal > .perfil-privado-aviso {
    margin-top: 0;
}

/* Título de seção: discreto, com uma linha fina embaixo - é ela (e não caixas) que separa as seções. */
.perfil-secao-topo,
.secao-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--hairline);
}

.perfil-secao-topo h2,
.secao-topo h2 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Nível compacto: uma linha só, sem cartão em volta. */
.nivel-bloco--compacto {
    margin: 0 0 1.1rem;
    padding: 0;
    gap: 0.8rem;
    background: none;
    border-radius: 0;
}

.nivel-bloco--compacto .nivel-selo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
}

.nivel-bloco--compacto .nivel-selo span {
    font-size: 0.5rem;
}

.nivel-bloco--compacto .nivel-selo strong {
    font-size: 1.15rem;
}

.nivel-bloco--compacto .nivel-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
}

.nivel-bloco--compacto .nivel-titulo .meta {
    font-size: 0.78rem;
    font-weight: 400;
}

.nivel-bloco--compacto .nivel-barra {
    height: 6px;
    margin-bottom: 0;
}

/* Vitrine: só as medalhas, sem caixinha - o nome vai pequeno embaixo. */
.vitrine {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vitrine-trofeu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    text-align: center;
    cursor: default;
}

.vitrine-trofeu .trofeu-medalha {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
}

.vitrine-nome {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-muted);
}

/* Jogos: favorito + últimos zerados lado a lado, em cartazes pequenos do mesmo tamanho. */
.perfil-jogos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.perfil-jogos-bloco {
    flex: 0 0 auto;
    min-width: 0;
}

.perfil-jogos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.perfil-jogo {
    flex: 0 0 140px;
    width: 140px;
    min-width: 0;
}

.perfil-jogo-capa {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.perfil-jogo-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-jogo-nome {
    margin: 0.5rem 0 0;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.perfil-jogo-plat {
    margin: 0.1rem 0 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfil-jogo .jogo-tile-nota {
    padding-top: 0.25rem;
}

.perfil-jogo .jogo-tile-estrela {
    font-size: 0.8rem;
}

/* Matérias: lista compacta (miniatura + título), em vez de cartazes. */
.perfil-materias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0.4rem 0.75rem;
    /* margem negativa = o padding do item: a miniatura alinha com o título da seção. */
    margin: 0 -0.5rem;
    padding: 0;
    list-style: none;
}

.perfil-materia {
    display: flex;
    gap: 0.8rem;
    padding: 0.5rem;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease;
}

.perfil-materia:hover {
    background: var(--input-bg);
}

.perfil-materia-thumb {
    flex: 0 0 92px;
    align-self: flex-start;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
}

.perfil-materia-corpo {
    flex: 1;
    min-width: 0;
}

.perfil-materia-corpo h3 {
    margin: 0.2rem 0 0.25rem;
    font-size: 0.9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    .perfil-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .vitrine {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0.75rem;
    }

    /* Favorito + zerados numa faixa só, que rola de lado - empilhar cartazes
       de 140px ocupava mais de uma tela inteira no celular. */
    .perfil-jogos {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1.25rem;
        scroll-snap-type: x proximity;
        /* Folga de 10px dentro da faixa (compensada pela margem negativa, então nada
           desalinha): overflow-x corta também no eixo Y e no início, e o anel dourado
           e a estrelinha do jogo favorito saem pra fora do cartaz. */
        padding: 10px 10px 0.4rem;
        margin: -10px -10px 0;
        scroll-padding-left: 10px;
    }

    .perfil-jogos-lista {
        flex-wrap: nowrap;
    }

    /* "Últimos jogos zerados" não cabia ao lado do favorito e aparecia cortado na beirada. */
    .perfil-titulo-longo {
        display: none;
    }

    .perfil-jogo {
        flex-basis: 112px;
        width: 112px;
        scroll-snap-align: start;
    }
}

/* Jogo favorito: só um anel dourado e uma estrelinha no canto - destaque sem virar mais um bloco. */
.perfil-jogo--favorito .perfil-jogo-capa {
    overflow: visible;
    box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(230, 167, 29, 0.22);
}

.perfil-jogo--favorito .perfil-jogo-capa img {
    border-radius: 10px;
}

.perfil-jogo-estrela {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold);
    color: #1a1200;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.perfil-jogos-bloco--favorito .perfil-secao-topo h2 {
    color: var(--gold-text);
}

/* Comunidade: encontrar gente */

.comunidade-card {
    max-width: 980px;
}

.comunidade-topo h1 {
    margin: 0 0 0.25rem;
}

.comunidade-busca {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.comunidade-busca input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

.comunidade-busca input:focus {
    outline: none;
    border-color: var(--magenta-text);
}

.comunidade-resultados {
    margin-top: 1.5rem;
}

.comunidade-vazio {
    padding: 1.5rem 1rem;
}

.comunidade-secao {
    margin-top: 1.75rem;
}

.comunidade-convite {
    margin: 1.5rem 0 0;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-muted);
}

.comunidade-convite a {
    font-weight: 700;
    color: var(--magenta-text);
}

.comunidade-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.9rem 2.5rem;
    margin-top: 1.9rem;
    align-items: start;
}

.pessoas-linhas {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pessoas-linhas--duas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
}

.pessoa-linha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--hairline);
}

.pessoas-linhas > .pessoa-linha:last-child {
    border-bottom: 0;
}

.pessoa-pos {
    flex: 0 0 1.6rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pessoa-info {
    flex: 1;
    min-width: 0;
}

.pessoa-linha-nome {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
}

.pessoa-linha-nome:hover {
    color: var(--magenta-text);
}

.pessoa-sub {
    margin: 0.1rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pessoa-sub a {
    color: var(--magenta-text);
}

.pessoa-nivel {
    font-weight: 700;
    color: var(--gold-text);
}

.pessoa-linha .seguir-form-inline {
    flex: 0 0 auto;
    margin: 0;
}

/* Seguir nas listas: só contorno (uma página cheia de botões dourados cheios poluía);
   preenche ao passar o mouse. "Seguindo" fica apagado. */
.pessoa-linha .seguir-btn {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold-text);
    font-size: 0.78rem;
}

.pessoa-linha .seguir-btn:hover {
    background: var(--gold);
    color: #1a1200;
}

.pessoa-linha .seguir-btn.is-active {
    border-color: var(--hairline);
    background: transparent;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .comunidade-colunas,
    .pessoas-linhas--duas {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Linha estreita: o @usuário é o que mais cortaria o detalhe útil (nível e motivo). */
    .pessoa-arroba,
    .pessoa-comentou-em {
        display: none;
    }

    /* Lista inteira de cada seção seria mais de 4000px de rolagem - no celular, as 5 primeiras. */
    .comunidade-colunas .pessoas-linhas > .pessoa-linha:nth-child(n + 6) {
        display: none;
    }
}

/* Bloqueio de pessoas */

.chat-menu {
    position: relative;
}

.chat-menu > summary {
    list-style: none;
    cursor: pointer;
}

.chat-menu > summary::-webkit-details-marker {
    display: none;
}

.chat-menu-itens {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 5;
    min-width: 190px;
    padding: 0.35rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.chat-menu-itens button {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--magenta-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.chat-menu-itens button:hover {
    background: var(--input-bg);
}

.conversa-bloqueada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}

.conversa-bloqueada p {
    margin: 0;
}

.mensagens-bloqueados-link {
    display: block;
    margin: 0.75rem 0.5rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

.mensagens-bloqueados-link:hover {
    color: var(--magenta-text);
}

.perfil-bloquear {
    margin: 0.85rem 0 0;
    text-align: center;
}

.perfil-bloquear-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.perfil-bloquear-btn:hover {
    color: var(--magenta-text);
}

.bloqueados-explicacao {
    margin: 0 0 1.25rem;
}

.pessoa-acao-form {
    flex: 0 0 auto;
    margin: 0;
}

/* Denúncia de comentário e fila de moderação */

.comentario-denuncia {
    margin-top: 0.5rem;
}

.comentario-denuncia > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comentario-denuncia > summary::-webkit-details-marker {
    display: none;
}

.comentario-denuncia > summary:hover {
    color: var(--magenta-text);
}

.comentario-denuncia-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
    margin-top: 0.6rem;
}

.comentario-denunciado {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
}

.denuncias-explicacao {
    margin: 0 0 1.25rem;
}

.denuncia-card {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.denuncia-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin-bottom: 0.6rem;
}

.denuncia-contagem {
    font-weight: 700;
    color: var(--magenta-text);
}

.denuncia-comentario {
    margin: 0 0 0.5rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--magenta);
    border-radius: 4px 10px 10px 4px;
    background: var(--input-bg);
    overflow-wrap: anywhere;
}

.denuncia-motivos {
    margin: 0.6rem 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.denuncia-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.denuncia-acoes form {
    margin: 0;
}

.denuncia-btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.denuncia-btn:hover {
    border-color: var(--magenta-text);
    color: var(--magenta-text);
}

.denuncia-btn--perigo {
    border-color: var(--magenta-text);
    color: var(--magenta-text);
}

.denuncia-btn--perigo:hover {
    background: var(--magenta);
    color: #fff;
}

/* ---- Pautas (bot Monitor, painel da equipe) ---- */
.pautas-execucao {
    margin: 0 0 1rem;
}

.pautas-erro {
    color: var(--magenta-text);
}

.materias-header-acoes form {
    margin: 0;
}

.pautas-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.pautas-aba {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.pautas-aba span {
    margin-left: 0.2rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.pautas-aba:hover {
    color: var(--text);
    border-color: var(--magenta-text);
}

.pautas-aba--ativa {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
}

.pautas-aba--ativa:hover {
    color: #fff;
}

.pautas-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.pautas-filtros .auth-input {
    width: auto;
    flex: 1 1 12rem;
    max-width: 18rem;
}

.pautas-manual {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.pautas-manual summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--magenta-text);
}

.pautas-manual .auth-form {
    margin-top: 0.8rem;
    max-width: 36rem;
}

.pautas-barra {
    position: sticky;
    top: 5rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.pautas-marcar-todas {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.pautas-barra-botoes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pautas-btn-aprovar {
    border-color: var(--gold-text);
    color: var(--gold-text);
}

.pauta-card {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.pauta-card--terceiros {
    border-style: dashed;
}

.pauta-marcar {
    padding-top: 0.2rem;
    cursor: pointer;
}

.pauta-marcar input,
.pautas-marcar-todas input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--magenta);
    cursor: pointer;
}

.pauta-corpo {
    flex: 1;
    min-width: 0;
}

.pauta-titulo {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
}

.pauta-titulo:hover {
    color: var(--magenta-text);
    text-decoration: underline;
}

.pauta-meta {
    margin: 0.35rem 0 0;
}

.pauta-aviso {
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    background: rgba(230, 167, 29, 0.12);
    color: var(--gold-text);
    font-size: 0.82rem;
    font-weight: 600;
}

.pauta-resumo {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.fonte-inativa td {
    opacity: 0.55;
}

@media (max-width: 720px) {
    .pautas .materias-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pautas .materias-header-acoes {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }

    .pautas-filtros .auth-input {
        max-width: none;
    }

    .pautas-barra {
        top: 4rem;
    }
}

.pauta-redigida {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #22ca82;
}

.pauta-redigida a {
    color: var(--magenta-text);
}

.pauta-redigida a:hover {
    text-decoration: underline;
}

.pauta-aviso--erro {
    background: rgba(220, 94, 239, 0.12);
    color: var(--magenta-text);
}

.redator-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.redator-status > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.redator-status strong {
    overflow-wrap: anywhere;
}

.redator-form {
    margin-bottom: 1.5rem;
}

.redator-usos-titulo {
    margin: 0 0 0.8rem;
}

/* Quadro de revisão de rascunho escrito pelo Redator (IA), no editor de matéria. */
.revisao-ia {
    margin-bottom: 1.2rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(230, 167, 29, 0.35);
    border-radius: 12px;
    background: rgba(230, 167, 29, 0.08);
    font-size: 0.9rem;
}

.revisao-ia-titulo {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--gold-text);
}

.revisao-ia-sub {
    margin: 0.6rem 0 0.25rem;
    font-weight: 600;
}

.revisao-ia ul {
    margin: 0;
    padding-left: 1.2rem;
}

.revisao-ia a {
    color: var(--magenta-text);
    text-decoration: underline;
}

.aviso-spoiler {
    margin: 0 0 1.2rem;
    padding: 0.7rem 1rem;
    border-left: 4px solid var(--gold);
    border-radius: 4px 10px 10px 4px;
    background: rgba(230, 167, 29, 0.12);
    color: var(--text);
}

.aviso-spoiler strong {
    color: var(--gold-text);
}

.noticia-rodape {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.88rem;
    color: var(--text-muted);
}

.noticia-rodape p {
    margin: 0 0 0.4rem;
}

.noticia-rodape a {
    color: var(--magenta-text);
    overflow-wrap: anywhere;
}

.noticia-rodape a:hover {
    text-decoration: underline;
}

.noticia-aviso-ia {
    font-style: italic;
}

/* ---- Redação (fila de pautas) v2: fluxo direto, com atualização automática ---- */
.pautas-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.pautas-topo h3 {
    margin: 0 0 0.3rem;
}

.pautas-subtitulo {
    margin: 0;
    max-width: 46rem;
}

.pautas-topo form {
    margin: 0;
    flex: 0 0 auto;
}

.pautas-btn-principal,
.pautas-btn-escrever {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 999px;
    background: var(--gold);
    color: #1a1200;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.pautas-btn-principal {
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
}

.pautas-btn-escrever {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
}

.pautas-btn-principal:hover,
.pautas-btn-escrever:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.pautas-status {
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.pautas-status-linha {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.pautas-status-linha + .pautas-status-linha {
    margin-top: 0.35rem;
}

/* Flex só na linha com o indicador girando - numa linha de texto com link, flex separava
   o link do resto da frase. */
.pautas-status-linha--ativa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-weight: 600;
}

.pautas-status-linha a {
    text-decoration: underline;
}

.pautas-girando {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid var(--hairline);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: pautas-girar 0.8s linear infinite;
}

@keyframes pautas-girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pautas-girando {
        animation-duration: 2.5s;
    }
}

.pautas-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem 1rem;
    margin-bottom: 0.9rem;
}

.pautas-ferramentas .pautas-filtros {
    margin: 0;
    flex: 1 1 22rem;
}

.pautas-ferramentas .pautas-manual {
    margin: 0;
    flex: 1 1 18rem;
}

.pauta-miniatura {
    flex: 0 0 auto;
    width: 8.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: var(--input-bg);
}

.pauta-card .pauta-titulo {
    display: block;
    font-size: 1rem;
}

.pauta-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pauta-acoes .denuncia-btn {
    display: inline-flex;
    align-items: center;
}

/* "Na fila"/"Escrevendo" + a lixeira de cancelar na mesma linha (quebra no celular). */
.pauta-situacao-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.pauta-situacao-linha .pauta-situacao {
    margin: 0;
}

.pauta-situacao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gold-text);
}

.pauta-link-oficial summary {
    list-style: none;
}

.pauta-link-oficial summary::-webkit-details-marker {
    display: none;
}

.pauta-link-oficial[open] summary {
    margin-bottom: 0.5rem;
}

.pauta-link-oficial-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pauta-link-oficial-campos .auth-input {
    flex: 1 1 14rem;
    width: auto;
}

/* "+ Juntar um link": fechado é um botão na fileira; aberto ocupa a linha inteira embaixo. */
.pauta-juntar summary {
    cursor: pointer;
}

.pauta-juntar[open] {
    flex: 1 1 100%;
}

.pauta-juntar-ajuda {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
}

.pauta-nota-imprensa {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pautas-rodape {
    margin-top: 1.5rem;
    text-align: center;
}

.pautas-rodape a {
    color: var(--magenta-text);
}

.pautas-rodape a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .pautas-topo {
        flex-direction: column;
    }

    .pautas-topo form,
    .pautas-btn-principal {
        width: 100%;
    }

    .pauta-card {
        flex-wrap: wrap;
    }

    .pauta-miniatura {
        width: 100%;
        order: -1;
    }

    .pauta-marcar {
        order: -2;
    }

    .pauta-corpo {
        flex-basis: 100%;
    }
}

/* Barra no topo da matéria que ainda não foi publicada (só a equipe vê). */
.barra-rascunho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--gold);
    border-radius: 14px;
    background: rgba(230, 167, 29, 0.12);
}

.barra-rascunho-texto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.barra-rascunho-texto strong {
    font-size: 1.05rem;
    color: var(--gold-text);
}

.barra-rascunho-texto span {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.barra-rascunho-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.barra-rascunho-acoes form {
    margin: 0;
}

.barra-rascunho-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.barra-rascunho-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.barra-rascunho-btn--editar {
    border: none;
    background: var(--gold);
    color: #1a1200;
}

.barra-rascunho-btn--publicar {
    border: 2px solid var(--magenta);
    background: var(--magenta);
    color: #fff;
}

@media (max-width: 720px) {
    .barra-rascunho {
        flex-direction: column;
        align-items: stretch;
    }

    .barra-rascunho-acoes {
        flex-direction: column;
    }

    .barra-rascunho-btn,
    .barra-rascunho-acoes form {
        width: 100%;
    }
}

/* ---- Chat: bolha flutuante (computador) ----
   No computador o chat sai da barra do topo e vira uma bolha no canto inferior direito; o
   mini-chat abre logo acima dela. No celular a bolha some e o ícone do topo (#chat-btn) volta. */
.chat-flutuante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 80;
}

.chat-bolha {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: #fff;
    box-shadow: 0 10px 28px rgba(102, 34, 202, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chat-bolha:hover,
.chat-bolha[aria-expanded="true"] {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 34px rgba(102, 34, 202, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat-bolha:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.chat-bolha .notificacoes-badge {
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    font-size: 0.72rem;
    border: 2px solid var(--bg);
}

@media (min-width: 721px) {
    .chat-btn--topo {
        display: none;
    }

    .chat-flutuante .chat-panel {
        position: absolute;
        top: auto;
        right: 0;
        bottom: calc(100% + 0.8rem);
        margin-top: 0;
        max-height: calc(100vh - 8rem);
    }
}

@media (max-width: 720px) {
    .chat-bolha {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-bolha {
        transition: none;
    }
}

.chat-topo-acoes {
    display: inline-flex;
    gap: 0.9rem;
}

.mensagens-lateral-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Botão "Novo grupo" (topo do mini-chat e da página de mensagens): pílula com ícone. */
.btn-novo-grupo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    border: 1px solid rgba(187, 23, 227, 0.45);
    border-radius: 999px;
    background: rgba(187, 23, 227, 0.12);
    color: var(--magenta-text);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-novo-grupo:hover,
.btn-novo-grupo:focus-visible {
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}

.btn-novo-grupo:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.btn-novo-grupo svg {
    flex: 0 0 auto;
}

.chat-topo-acoes {
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .btn-novo-grupo {
        transition: none;
    }
}

/* ---- Grupos ---- */
.avatar--grupo {
    background: linear-gradient(135deg, var(--purple), var(--gold));
}

.avatar--grupo.avatar--com-foto {
    background: var(--bg-card);
}

.avatar-grupo-icone {
    width: 55%;
    height: 55%;
}

/* Foto do grupo: o círculo é o botão (mesmo visual do avatar do painel). */
.grupo-foto-form {
    position: relative;
    flex: 0 0 auto;
}

.grupo-foto-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grupo-foto-form.is-enviando .avatar {
    opacity: 0.55;
}

.grupo-foto-form.is-enviando .avatar-upload-badge {
    animation: grupo-foto-pulso 0.9s ease-in-out infinite alternate;
}

@keyframes grupo-foto-pulso {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.grupo-ajustes-titulo {
    min-width: 0;
}

.grupo-foto-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.35rem;
}

.grupo-foto-acoes .auth-help {
    margin: 0;
}

.grupo-foto-acoes form {
    margin: 0;
}

.grupo-foto-remover {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.grupo-foto-remover:hover,
.grupo-foto-remover:focus-visible {
    color: var(--magenta);
}

.grupo-novo-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grupo-novo-nome {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.conversa-header-nome--grupo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.conversa-header-nome--grupo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversa-header-nome--grupo small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.conversa-bolha-autor {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--magenta-text);
}

.conversa-aviso {
    align-self: center;
    max-width: 90%;
    margin: 0.2rem 0;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--input-bg);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    overflow-wrap: anywhere;
}

.chat-menu-itens a {
    display: block;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.chat-menu-itens a:hover {
    background: var(--input-bg);
}

.grupo-explicacao {
    margin: -0.5rem 0 1.2rem;
}

.grupo-rotulo {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.grupo-pessoas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.4rem;
    max-height: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* `.auth-field .grupo-pessoa` (e não só `.grupo-pessoa`): a regra `.auth-field label` dos
   formulários forçava display: block e empilhava caixa, avatar e nome. */
.grupo-pessoa,
.auth-field .grupo-pessoa {
    display: flex;
    margin-bottom: 0;
    font-size: 0.9rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    cursor: pointer;
    min-width: 0;
}

.grupo-pessoa span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-pessoa:has(input:checked) {
    border-color: var(--magenta-text);
    background: rgba(187, 23, 227, 0.1);
}

.grupo-pessoa input {
    accent-color: var(--magenta);
}

.grupo-ajustes-topo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.grupo-ajustes-topo h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

.grupo-ajustes-topo .meta {
    margin: 0.2rem 0 0;
}

.grupo-bloco {
    margin-top: 1.25rem;
}

.grupo-linha {
    display: flex;
    gap: 0.5rem;
}

.grupo-linha .auth-input {
    flex: 1;
    min-width: 0;
}

.grupo-subtitulo {
    margin: 1.5rem 0 0.6rem;
    font-size: 1rem;
}

.grupo-membros {
    margin: 0;
    padding: 0;
    list-style: none;
}

.grupo-membro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
}

.grupo-membro-nome {
    font-weight: 600;
    color: var(--text);
}

.grupo-membro-nome:hover {
    color: var(--magenta-text);
}

.grupo-membro form {
    margin: 0 0 0 auto;
}

/* Curadoria: "Também em N fontes" no cartão e motivo de quem foi descartada. */
.pauta-cobertura {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.pauta-cobertura strong {
    color: var(--gold-text);
}

.pauta-cobertura a {
    color: var(--magenta-text);
}

.pauta-cobertura a:hover {
    text-decoration: underline;
}

.pauta-motivo {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Lixeira da Redação (aba Descartadas). */
.pautas-btn-lixo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pautas-reserva {
    margin: 0 0 0.9rem;
}

.pautas-reserva a {
    color: var(--magenta-text);
    text-decoration: underline;
}

/* =============================================================================================
   Página da matéria (02/10/2026) - padrão medido em g1, IGN Brasil e Guardian: sem caixa em
   volta, cabeçalho centralizado, capa larga e texto numa coluna de ~70 letras por linha com
   18 px e entrelinha 1,7 (antes: 16 px numa coluna de 739 px, ~100 letras, dentro de um card).
   Classe .materia no <article>; .noticia-full continua nele porque o materia.js usa.
   ============================================================================================= */

.materia,
.materia-comentarios {
    --coluna-texto: 680px;
    --coluna-cabecalho: 800px;
    --coluna-larga: 1000px;
}

/* Monitor grande (2K/ultrawide): as colunas crescem um pouco, senão a matéria fica uma
   tira fina no meio da tela. A letra cresce junto pra linha não passar de ~80 letras. */
@media (min-width: 1600px) {
    .materia,
    .materia-comentarios {
        --coluna-texto: 780px;
        --coluna-cabecalho: 920px;
        --coluna-larga: 1160px;
    }

    .materia .conteudo {
        font-size: 1.1875rem;
    }
}

@media (min-width: 2200px) {
    .materia,
    .materia-comentarios {
        --coluna-texto: 860px;
        --coluna-cabecalho: 1020px;
        --coluna-larga: 1300px;
    }

    .materia .conteudo {
        font-size: 1.25rem;
    }
}

.noticia-full.materia {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Barra de progresso da leitura (o materia.js preenche). */
.materia-progresso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
}

.materia-progresso span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--magenta), var(--gold));
    transform: scaleX(0);
    transform-origin: left center;
}

/* Cabeçalho: trilha/editoria, título, linha fina, autor + compartilhar */
.materia-cabecalho {
    max-width: var(--coluna-cabecalho);
    margin: 0 auto;
}

.materia-trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.materia-trilha a {
    color: inherit;
}

.materia-trilha a:hover {
    color: var(--text);
}

.materia-trilha .materia-editoria {
    color: var(--magenta-text);
}

.materia-titulo {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 1.15rem + 2.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.materia-linha-fina {
    margin: 0 0 1.5rem;
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: pretty;
}

.materia-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.25rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.materia .byline,
.byline-texto {
    min-width: 0;
}

.byline-texto p {
    margin: 0;
}

.byline-autor {
    font-size: 0.95rem;
    font-weight: 600;
}

.byline-autor .autor-link {
    color: var(--magenta-text);
}

.materia .byline .meta {
    font-size: 0.82rem;
}

/* Capa: mais larga que o texto, com o crédito embaixo (como nos portais) */
.materia-capa {
    max-width: var(--coluna-larga);
    margin: 1.75rem auto 0;
}

.materia-capa .noticia-full-img {
    display: block;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    border-radius: 12px;
    background: var(--bg-card);
}

.materia-capa figcaption {
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Texto */
.materia-corpo {
    max-width: var(--coluna-texto);
    margin: 2.25rem auto 0;
}

.materia .conteudo {
    font-size: 1.125rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.materia .conteudo p {
    margin: 0 0 1.35em;
}

/* Primeiro parágrafo um pouco maior: o "lide", que puxa a leitura. */
.materia .conteudo > p:first-child {
    font-size: 1.2rem;
    line-height: 1.6;
}

.materia .conteudo h2 {
    margin: 2.3rem 0 0.85rem;
    padding-left: 0.85rem;
    border-left: 4px solid var(--magenta);
    font-size: 1.5rem;
    line-height: 1.25;
}

.materia .conteudo h3 {
    margin: 1.9rem 0 0.6rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.materia .conteudo a {
    color: var(--magenta-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.materia .conteudo ul,
.materia .conteudo ol {
    margin: 0 0 1.35em;
    padding-left: 1.4rem;
}

.materia .conteudo li {
    margin: 0.4em 0;
}

.materia .conteudo li::marker {
    color: var(--magenta-text);
}

.materia .conteudo blockquote {
    margin: 2rem 0;
    padding: 0.2rem 0 0.2rem 1.25rem;
    border-left: 4px solid var(--gold);
    font-size: 1.22rem;
    font-style: italic;
    line-height: 1.55;
}

.materia .conteudo .conteudo-video,
.materia .conteudo .conteudo-imagem,
.materia .conteudo .conteudo-galeria {
    margin: 2rem 0;
}

.materia .aviso-spoiler {
    margin-bottom: 1.75rem;
}

/* Fim da matéria: curtir/comentários + compartilhar */
.materia-fim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.materia .noticia-acoes {
    margin-top: 0;
}

.materia-ir-comentarios {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.materia-ir-comentarios:hover {
    color: var(--text);
    border-color: var(--magenta-text);
}

.materia-fim-compartilhar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.materia-fim-compartilhar > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Botões de compartilhar (_compartilhar.html) */
.compartilhar {
    display: flex;
    gap: 0.5rem;
}

.compartilhar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--input-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.compartilhar-btn:hover,
.compartilhar-btn:focus-visible {
    background: var(--purple);
    border-color: transparent;
    color: #fff;
}

.compartilhar-btn--whatsapp:hover,
.compartilhar-btn--whatsapp:focus-visible {
    background: #1fae55;
}

.compartilhar-btn:active {
    transform: scale(0.93);
}

.compartilhar-btn.copiado {
    background: var(--gold);
    color: #1c1024;
}

/* "Link copiado!" (o site.js escreve no <span> do botão de link) */
.compartilhar-copiado {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.compartilhar-copiado:empty {
    display: none;
}

/* Comentários e "Leia também" logo depois da matéria */
.materia-secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    font-weight: 800;
}

.materia-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: #fff;
    font-size: 0.85rem;
}

.materia-comentarios {
    max-width: var(--coluna-texto);
    margin: 3rem auto 0;
}

.materia-convite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.materia-convite p {
    margin: 0;
    color: var(--text-muted);
}

.materia-convite strong {
    color: var(--text);
}

.materia-convite-acoes {
    display: flex;
    gap: 0.6rem;
}

.comentario-login-prompt a.materia-convite-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
}

.comentario-login-prompt a.materia-convite-btn--principal {
    border-color: transparent;
    background: var(--gold);
    color: #1c1024;
}

.comentario-login-prompt a.materia-convite-btn:hover {
    border-color: var(--magenta-text);
}

.materia-relacionadas {
    max-width: var(--content-max);
    margin: 3.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}

.relacionadas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem 1.25rem;
}

.relacionada {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--text);
}

.relacionada-imagem {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.relacionada-imagem img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.relacionada:hover .relacionada-imagem img {
    transform: scale(1.04);
}

.relacionada-editoria {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--magenta-text);
}

.relacionada-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.3;
}

.relacionada:hover .relacionada-titulo {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.relacionada-data {
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .materia-meta {
        padding: 0.75rem 0;
    }

    /* Capa de ponta a ponta no celular (o main tem 1.5rem de margem lateral). */
    .materia-capa {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .materia-capa .noticia-full-img {
        border-radius: 0;
    }

    .materia-capa figcaption {
        padding: 0 1.5rem;
    }

    .materia-corpo {
        margin-top: 1.75rem;
    }

    .materia .conteudo {
        line-height: 1.65;
    }

    .materia .conteudo > p:first-child {
        font-size: 1.15rem;
    }

    .materia .conteudo h2 {
        font-size: 1.35rem;
    }

    .materia-fim-compartilhar > span {
        font-size: 0.78rem;
    }

    .relacionadas-grade {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* No celular, cartão "deitado": miniatura à esquerda, texto à direita. */
    .relacionada {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 0.85rem;
        row-gap: 0.25rem;
        align-items: start;
    }

    .relacionada-imagem {
        grid-row: 1 / 4;
    }

    .relacionada-titulo {
        font-size: 0.95rem;
    }
}

/* Carrossel de fotos (02/10/2026): o bloco de galeria (figure.conteudo-galeria - botão
   "Carrossel" do editor, ou o Redator em matéria de "novas imagens") vira uma foto por vez na
   matéria publicada. Só com CSS já desliza foto a foto (scroll-snap, dedo no celular); o
   materia.js acrescenta setas, contador e bolinhas. A foto inteira aparece (contain), sem cortar
   arte em pé nem print com texto. No editor continua em grade (content_style do editor.js). */
.materia .conteudo-galeria {
    position: relative;
}

.materia .conteudo-galeria-grade {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 12px;
    background: #0b0612;
}

.materia .conteudo-galeria-grade::-webkit-scrollbar {
    display: none;
}

.materia .conteudo .conteudo-galeria-grade img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: transparent;
}

/* O materia.js põe a faixa de fotos dentro do "palco": setas e contador ficam presos à foto, não à
   legenda embaixo. */
.carrossel-palco {
    position: relative;
}

.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 4, 18, 0.62);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, opacity 0.15s ease;
}

.carrossel-seta:hover,
.carrossel-seta:focus-visible {
    background: var(--purple);
}

.carrossel-seta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.carrossel-seta[disabled] {
    opacity: 0;
    pointer-events: none;
}

.carrossel-seta--anterior {
    left: 10px;
}

.carrossel-seta--proxima {
    right: 10px;
}

.carrossel-contador {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(10, 4, 18, 0.62);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.carrossel-pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 0.7rem;
}

.carrossel-ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--hairline);
    background: color-mix(in srgb, var(--text) 25%, transparent);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.carrossel-ponto[aria-current="true"] {
    width: 22px;
    background: var(--gold);
}

.materia .conteudo-galeria figcaption {
    margin-top: 0.45rem;
}

@media (max-width: 720px) {
    /* Celular: o dedo já passa as fotos; setas menores pra não cobrir a imagem. */
    .carrossel-seta {
        width: 34px;
        height: 34px;
    }

    .carrossel-seta--anterior {
        left: 6px;
    }

    .carrossel-seta--proxima {
        right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .materia .conteudo-galeria-grade {
        scroll-behavior: auto;
    }
}

/* Bit, o robô mascote que assina as matérias do Redator (noticias/static/noticias/img/bit.svg). */
.avatar--bit {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
}

.avatar--bit .avatar-img {
    object-fit: contain;
    padding: 9%;
}

.byline-revisao {
    white-space: nowrap;
    font-weight: 400;
    color: var(--text-muted);
}

.byline-revisao a {
    color: var(--text);
    font-weight: 600;
}

.byline-revisao a:hover {
    text-decoration: underline;
}

.sobre-bit {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(187, 23, 227, 0.1), rgba(102, 34, 202, 0.06));
}

.sobre-bit-texto p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.sobre-bit-texto strong {
    color: var(--text);
}

.sobre-bit-texto .sobre-bit-nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.sobre-bit-selo {
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1c1024;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Fim da matéria: "Compartilhe" (WhatsApp, link) + "Siga o HereGO!" (Instagram, YouTube). */
.materia-fim-redes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.compartilhar-btn--instagram:hover,
.compartilhar-btn--instagram:focus-visible {
    background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af);
}

.compartilhar-btn--youtube:hover,
.compartilhar-btn--youtube:focus-visible {
    background: #e62117;
}

.footer-brand .siga {
    margin-top: 0.75rem;
}

/* Páginas institucionais (Sobre, Termos, Privacidade, Contato) no visual da matéria. */
.pagina-texto .materia-cabecalho .meta {
    margin: 0 0 0.5rem;
}

.pagina-texto .materia-corpo {
    margin-top: 1.5rem;
}

.contato-form {
    max-width: none;
}

.contato-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contato-enviado {
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-card);
}

.contato-enviado p {
    margin: 0.4rem 0 1rem;
    color: var(--text-muted);
}

.contato-enviado .materia-convite-btn {
    display: inline-flex;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1c1024;
    font-weight: 700;
}

.contato-outros {
    margin-top: 1rem;
}

.contato-outros a {
    color: var(--magenta-text);
}

.contato-painel {
    max-width: 900px;
}

.contato-itens {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.contato-item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}

.contato-item--resolvida {
    opacity: 0.6;
}

.contato-item-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.contato-item-topo a {
    color: var(--magenta-text);
    overflow-wrap: anywhere;
}

.contato-item-texto {
    margin: 0.6rem 0 0.8rem;
    white-space: normal;
}

.painel-excluir {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.82rem;
}

.painel-excluir a {
    color: var(--text-muted);
    text-decoration: underline;
}

.painel-excluir a:hover {
    color: #ff6b6b;
}

.conta-excluir {
    max-width: 640px;
}

.conta-excluir ul {
    padding-left: 1.3rem;
    color: var(--text-muted);
}

.conta-excluir-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Enquete no fim da matéria (_enquete.html). */
.enquete {
    margin: 2.25rem 0 0;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(102, 34, 202, 0.14), rgba(187, 23, 227, 0.06));
}

.enquete-rotulo {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.materia .enquete-pergunta,
.enquete-pergunta {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    font-size: 1.2rem;
    line-height: 1.3;
}

.enquete-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.enquete-opcao {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 1rem;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.enquete-opcao:hover,
.enquete-opcao:focus-visible {
    border-color: var(--magenta-text);
}

.enquete-opcao:active {
    transform: scale(0.99);
}

.enquete-opcao-texto,
.enquete-opcao-pct {
    position: relative;
    z-index: 1;
}

.enquete-opcao-barra {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: rgba(187, 23, 227, 0.22);
    transition: width 0.5s ease;
}

.enquete-opcao-pct {
    display: none;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Depois de votar: barra com a porcentagem; a minha em dourado. */
.enquete--votada .enquete-opcao-barra {
    width: var(--pct, 0%);
}

.enquete--votada .enquete-opcao-pct {
    display: inline;
}

.enquete-opcao.is-minha {
    border-color: var(--gold);
}

.enquete--votada .enquete-opcao.is-minha .enquete-opcao-barra {
    background: rgba(230, 167, 29, 0.28);
}

.enquete--votada .enquete-opcao.is-minha .enquete-opcao-pct {
    color: var(--gold-text);
    font-weight: 800;
}

.enquete--votada .enquete-opcao.is-minha .enquete-opcao-pct::before {
    content: "✓ ";
}

.enquete-opcao-pct {
    flex: 0 0 auto;
}

.enquete-form.is-enviando {
    opacity: 0.6;
    pointer-events: none;
}

.enquete-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.enquete-rodape a {
    color: var(--magenta-text);
    font-weight: 600;
}

.enquete-cta[hidden] {
    display: none;
}

.editor-enquete .editor-enquete-opcao + .editor-enquete-opcao {
    margin-top: 0.45rem;
}

/* Home viva (02/10/2026) */
.secao-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.secao-cabecalho h3 {
    margin: 0;
}

.secao-ver-mais {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--magenta-text);
}

.secao-ver-mais:hover {
    text-decoration: underline;
}

.cards--quatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mais-lidas {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid rgba(230, 167, 29, 0.15);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 0.75rem;
}

/* Fica no pé da caixa (que estica até a altura do carrossel): fecha o espaço que sobrava. */
.mais-lidas-todas {
    margin-top: auto;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--magenta-text);
}

.mais-lidas h3 {
    margin: 0 0 0.75rem;
    color: var(--gold-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mais-lidas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mais-lidas-lista li + li {
    border-top: 1px solid var(--hairline);
}

.mais-lida {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0;
    color: var(--text);
}

.mais-lida-numero {
    flex: 0 0 auto;
    width: 1.6rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    background: linear-gradient(135deg, var(--magenta), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mais-lida-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mais-lida-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

.mais-lida:hover .mais-lida-titulo {
    color: var(--magenta-text);
}

.mais-lida-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mais-lida-imagem {
    flex: 0 0 auto;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
}

.home-comunidade {
    margin: 2.5rem 0;
}

.home-comunidade h3 {
    color: var(--gold-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-comunidade-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.home-comunidade-bloco {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-card);
}

.home-enquete {
    padding: 0;
    border: 0;
    background: none;
}

.home-enquete .enquete {
    margin: 0;
}

.home-enquete-materia {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.home-enquete-materia:hover {
    color: var(--magenta-text);
}

.home-comunidade-subtitulo {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-comentando,
.home-top {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-comentando li {
    display: flex;
    gap: 0.7rem;
    padding: 0.6rem 0;
}

.home-comentando li + li,
.home-top li + li {
    border-top: 1px solid var(--hairline);
}

.home-comentando-texto {
    min-width: 0;
}

.home-comentando-texto p {
    margin: 0;
}

.home-comentando-nome,
.home-top-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
}

.home-comentando-fala {
    display: block;
    margin: 0.15rem 0;
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.home-comentando-fala:hover {
    color: var(--magenta-text);
}

.home-comentando-materia {
    font-size: 0.75rem;
}

.home-top li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.home-top-posicao {
    width: 1.6rem;
    text-align: center;
    font-weight: 800;
    color: var(--text-muted);
}

.home-top .meta {
    margin-left: auto;
    font-size: 0.75rem;
    white-space: nowrap;
}

.home-convite {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(187, 23, 227, 0.18), rgba(102, 34, 202, 0.12));
}

.home-convite p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.home-convite strong {
    color: var(--text);
}

.home-convite-btn {
    display: inline-flex;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1c1024;
    font-weight: 800;
    font-size: 0.9rem;
}

.home-secao {
    margin-top: 2.5rem;
}

@media (max-width: 1000px) {
    .cards--quatro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cards--quatro {
        grid-template-columns: 1fr;
    }
}

/* Celular: cartão "deitado" nas listas (miniatura à esquerda) - um cartão por tela inteira
   deixava a home com mais de 5 mil px de altura. */
@media (max-width: 720px) {
    .cards .card {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        align-items: stretch;
    }

    .cards .card .media-box--card {
        aspect-ratio: auto;
        height: 100%;
        min-height: 88px;
    }

    .cards .card .card-corpo {
        padding: 0.7rem 0.85rem;
    }

    .cards .card h4 {
        margin: 0.15rem 0 0.35rem;
        font-size: 0.95rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cards .card .categoria-badge {
        font-size: 0.65rem;
    }

    .cards .card .meta {
        font-size: 0.75rem;
    }

    .cards {
        gap: 0.75rem;
    }
}

/* Primeiros passos (home, quem acabou de chegar) */
.boas-vindas {
    margin-bottom: 2rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(230, 167, 29, 0.35);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(187, 23, 227, 0.16), rgba(102, 34, 202, 0.1) 60%, rgba(230, 167, 29, 0.08));
}

.boas-vindas-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.boas-vindas-topo h2 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.boas-vindas-topo .meta {
    margin: 0;
}

.boas-vindas-fechar {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.boas-vindas-fechar:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.boas-vindas-progresso {
    height: 6px;
    margin: 1rem 0;
    border-radius: 999px;
    background: var(--input-bg);
    overflow: hidden;
}

.boas-vindas-progresso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--magenta), var(--gold));
}

.boas-vindas-passos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.boas-vindas-passo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
}

.boas-vindas-marca {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--input-bg);
    font-weight: 800;
    color: var(--text-muted);
}

.boas-vindas-passo.is-feito .boas-vindas-marca {
    background: var(--gold);
    color: #1c1024;
}

.boas-vindas-passo-texto {
    flex: 1 1 170px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.boas-vindas-passo-texto span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.boas-vindas-passo.is-feito .boas-vindas-passo-texto strong {
    color: var(--text-muted);
    text-decoration: line-through;
}

.boas-vindas-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1c1024;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.boas-vindas-sugestoes {
    margin-top: 1rem;
}

.boas-vindas-sugestoes-titulo {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .boas-vindas {
        padding: 1rem;
    }

    .boas-vindas-btn {
        margin-left: calc(30px + 0.75rem);
    }
}

/* Sequência de dias (perfil e menu do avatar) */
.perfil-sequencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
}

.perfil-bio--vazia a {
    color: var(--magenta-text);
    font-style: normal;
    font-weight: 600;
}

.user-dropdown-sequencia {
    margin: 0;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-text);
}

/* Troféus no celular: o "Na vitrine" desce pra baixo do texto (absoluto no canto, ele espremia
   a descrição numa coluna estreita e a página passava de 6 mil px). */
@media (max-width: 720px) {
    .trofeu-card {
        gap: 0.7rem;
        padding: 0.75rem;
    }

    .trofeu-medalha {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }

    .trofeu-card.is-editavel .trofeu-corpo {
        padding-right: 0;
    }

    .trofeu-card {
        flex-wrap: wrap;
    }

    .trofeu-escolher {
        position: static;
        display: inline-flex;
        flex-basis: 100%;
        margin: 0.1rem 0 0 calc(44px + 0.7rem);
    }
}

/* Cada categoria de troféus recolhe (só a primeira começa aberta) - com 45 troféus a página
   ficava enorme no celular. O resumo mostra quantos já foram desbloqueados. */
.trofeus-secao > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    cursor: pointer;
    list-style: none;
}

.trofeus-secao > summary::-webkit-details-marker {
    display: none;
}

.trofeus-secao > summary h2 {
    margin: 0;
}

.trofeus-secao-placar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.trofeus-secao-placar::after {
    content: "▾";
    transition: transform 0.15s ease;
}

.trofeus-secao[open] .trofeus-secao-placar::after {
    transform: rotate(180deg);
}

.trofeus-secao[open] > summary {
    margin-bottom: 0.5rem;
}

/* @menções e comentário em destaque */
.mencao {
    color: var(--magenta-text);
    font-weight: 600;
}

.mencao:hover {
    text-decoration: underline;
}

.mencoes-lista {
    position: absolute;
    z-index: 70;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.mencoes-lista li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.mencoes-lista li.is-ativo,
.mencoes-lista li:hover {
    background: var(--input-bg);
}

.mencoes-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.mencoes-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comentarios-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}

.comentarios-topo > :first-child {
    margin: 0;
}

.comentarios-ordem {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.comentarios-ordem a {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.comentarios-ordem a[aria-current="true"] {
    background: var(--purple);
    color: #fff;
}

.comentario-item--destaque {
    padding: 0.85rem;
    border: 1px solid rgba(230, 167, 29, 0.45);
    border-radius: 14px;
    background: rgba(230, 167, 29, 0.06);
}

.comentario-selo {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold-text);
}

/* Feed vazio: sugestões de gente pra seguir e quem está comentando */
.feed-vazio-secao {
    margin-top: 1.5rem;
}

.feed-vazio-mais {
    margin: 0.75rem 0 0;
    text-align: center;
}

/* Perfil: "Jogando agora" */
.perfil-jogando-ponto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2);
    vertical-align: middle;
}

.perfil-jogo--jogando .perfil-jogo-capa {
    box-shadow: 0 0 0 2px #3ddc84;
}

/* Comunidade: abas do ranking (semana / mês / geral) */
.secao-topo--abas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ranking-abas {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.ranking-abas a {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.ranking-abas a[aria-current="true"] {
    background: var(--purple);
    color: #fff;
}

.ranking-explica {
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
}

.ranking-explica summary {
    cursor: pointer;
    color: var(--text-muted);
}

/* Eventos temáticos: anúncio (home e matéria) e painel da equipe */
.eventos-home {
    margin-bottom: 1.5rem;
}

.evento-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(230, 167, 29, 0.45);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(187, 23, 227, 0.16), rgba(102, 34, 202, 0.14) 55%, rgba(230, 167, 29, 0.1));
}

.evento-banner .trofeu-medalha {
    flex: 0 0 auto;
}

.evento-banner-corpo {
    min-width: 0;
}

.evento-banner-corpo p {
    margin: 0;
}

.evento-banner-topo {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.evento-banner-selo {
    margin-right: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1a0f00;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.evento-banner-nome {
    margin: 0.2rem 0 !important;
    font-size: 1.1rem;
    font-weight: 800;
}

.evento-banner-texto {
    font-size: 0.9rem;
}

.evento-banner-progresso {
    margin-left: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--gold-text);
    white-space: nowrap;
}

.trofeu-ate {
    color: var(--gold-text);
}

.eventos-painel {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.evento-painel {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--hairline);
}

.evento-painel--encerrado {
    opacity: 0.65;
}

.evento-painel-corpo {
    flex: 1;
    min-width: 0;
}

.evento-painel-corpo p {
    margin: 0;
}

.evento-painel-acoes {
    display: flex;
    gap: 0.4rem;
}

.eventos-form-titulo {
    margin: 2rem 0 0.5rem;
    font-size: 1.15rem;
}

@media (max-width: 720px) {
    .evento-painel {
        flex-wrap: wrap;
    }

    .evento-painel-acoes {
        width: 100%;
    }
}

/* PWA: avisos no aparelho (push) e botões "Instalar o app" */
.push-bloco {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-card);
}

.push-bloco[hidden] {
    display: none;
}

.push-bloco--ativo {
    border-color: rgba(61, 220, 132, 0.45);
}

.push-bloco-texto {
    flex: 1;
    min-width: 0;
}

.push-bloco-texto p {
    margin: 0;
}

.push-bloco-titulo {
    font-weight: 700;
}

.user-dropdown-instalar {
    width: 100%;
    padding: 0.55rem 1rem;
    border: 0;
    background: none;
    color: var(--gold-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.user-dropdown-instalar[hidden],
.footer-instalar[hidden] {
    display: none;
}

.footer-instalar {
    margin-top: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: none;
    color: var(--gold-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Instagram: posts na home (embed oficial) e painel da equipe */
/* Flex centralizado (não grade de 4 colunas): com menos de 4 posts não sobra buraco de um
   lado, e quando não cabem 4 numa linha quebra centralizado. 326px = largura máxima do embed; a base de 280px deixa os
   4 caberem numa linha já em 1280px. */
.home-instagram-grade {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    align-items: flex-start;
}

.home-instagram-grade > * {
    flex: 1 1 280px;
}

/* Celular: faixa deslizante (um post por vez, o próximo aparecendo na beirada) em vez de
   empilhar os 4 - cada embed tem quase uma tela de altura. O filho direto é o blockquote
   e, depois do embed.js, o iframe que o substitui. */
@media (max-width: 720px) {
    .home-instagram-grade {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin: 0 -1.5rem;  /* sangra até a borda da tela (o padding lateral do <main>) */
        padding: 0 1.5rem 0.25rem;
        scroll-padding: 0 1.5rem;
    }

    .home-instagram-grade::-webkit-scrollbar {
        display: none;
    }

    .home-instagram-grade > *,
    .home-instagram-grade .instagram-media {
        flex: 0 0 85% !important;
        width: 85% !important;
        max-width: 85% !important;
        scroll-snap-align: start;
    }
}

.home-instagram-grade .instagram-media {
    min-width: 0 !important;
    max-width: 326px !important;
    margin: 0 !important;
}

.home-instagram-grade blockquote.instagram-media {
    padding: 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-card);
}

.insta-secao {
    margin-top: 1.75rem;
}

.insta-secao h2 {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
}

.insta-form {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.insta-form .auth-input {
    flex: 1;
    min-width: 0;
}

.insta-posts {
    margin: 0;
    padding-left: 1.25rem;
}

.insta-posts li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--hairline);
    overflow-wrap: anywhere;
}

.insta-post--fora {
    opacity: 0.6;
}

.insta-post-acoes {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
}

.insta-sugestoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.insta-sugestao {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
}

.insta-sugestao-topo {
    display: flex;
    gap: 0.75rem;
}

.insta-sugestao-topo img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

.insta-sugestao-topo p {
    margin: 0.2rem 0 0;
}

.insta-sugestao-titulo {
    font-weight: 700;
    color: var(--text);
}

.insta-legenda {
    resize: vertical;
    font-size: 0.85rem;
    line-height: 1.45;
}

.insta-sugestao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Pódio (ranking da home e da Comunidade): número num círculo ouro/prata/bronze, no lugar das
   medalhas em emoji. Ícone de chama da sequência de dias. */
.home-top-posicao.posicao--1, .home-top-posicao.posicao--2, .home-top-posicao.posicao--3,
.pessoa-pos.posicao--1, .pessoa-pos.posicao--2, .pessoa-pos.posicao--3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #1a0f00;
    font-size: 0.8rem;
    font-weight: 800;
}

.posicao--1 { background: #e6a71d; }
.posicao--2 { background: #c9c3d6; }
.posicao--3 { background: #c98a5a; }

.icone-chama {
    flex: 0 0 auto;
    color: var(--gold-text);
    vertical-align: -2px;
}

/* Redação: pauta na fila esperando o Gemini (cota do dia / limite por minuto) */
.pauta-situacao--esperando {
    color: var(--gold-text);
}

/* "Mais lidas" vem com até 7 e mostra quantas cabem na altura do carrossel ao lado: 7 em tela
   larga, 6 no desktop comum, 5 em notebook pequeno (títulos quebram em 3 linhas). Celular: 7. */
@media (min-width: 721px) and (max-width: 1409px) {
    .mais-lidas-lista li:nth-child(n+7) {
        display: none;
    }
}

@media (min-width: 721px) and (max-width: 1249px) {
    .mais-lidas-lista li:nth-child(n+6) {
        display: none;
    }
}

/* Destaque e "Mais lidas" com a mesma altura: as bolinhas do carrossel ficam DENTRO do cartão
   (canto de baixo, na linha do autor) e o cartão estica até a altura da linha do grid. */
@media (min-width: 721px) {
    .destaque-carousel {
        display: flex;
        flex-direction: column;
    }

    .destaque-carousel > .destaque:not([hidden]) {
        flex: 1;
    }

    .destaque-carousel .destaque-dots {
        position: absolute;
        right: 1.5rem;
        bottom: 1.6rem;
        margin: 0;
    }
}

/* Celular: o menu do avatar abre por toque (site.js põe .is-aberto), não por hover - no
   toque o hover "gruda" e o clique levava direto pro perfil. O item "Perfil" está no menu. */
@media (max-width: 720px) {
    .auth-user-wrap:hover .user-dropdown,
    .auth-user-wrap:focus-within .user-dropdown {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
    }

    .auth-user-wrap.is-aberto .user-dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* =============================================================================================
   Páginas de erro (404/403) - noticias/erro.html. A 500 é estática (templates/500.html).
   ============================================================================================= */
.erro-pagina {
    max-width: 560px;
    margin: 1.5rem auto 0;
    text-align: center;
}

.erro-codigo {
    margin: 0;
    font-size: clamp(4.5rem, 3rem + 6vw, 7rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--magenta), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.erro-pagina h1 {
    margin: 0.75rem 0 0.5rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.erro-texto {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.erro-busca {
    display: flex;
    gap: 0.5rem;
}

.erro-busca .auth-input {
    border-radius: 999px;
    padding-left: 1rem;
}

.erro-busca .auth-btn {
    flex: 0 0 auto;
    padding: 0.6rem 1.2rem;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.erro-links {
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.erro-links a {
    color: var(--magenta-text);
    font-weight: 700;
}

.erro-recentes {
    margin-top: 3.5rem;
}

/* =============================================================================================
   Fim da matéria mais curto (refino 02/10/2026): tags e fonte colados no texto; uma faixa só com
   reações + curtir/comentários e, embaixo, compartilhar/siga; depois enquete e o Bit compacto.
   ============================================================================================= */
.materia .noticia-tags {
    margin-top: 1.75rem;
    gap: 0.4rem;
}

.materia .noticia-tags .tag-badge {
    font-size: 0.85rem;
}

.materia .noticia-rodape {
    margin-top: 0.9rem;
    padding-top: 0;
    border-top: 0;
}

.materia .materia-fim {
    margin-top: 1.5rem;
    row-gap: 0.9rem;
}

.materia .sobre-bit {
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding: 0.8rem 1rem;
}

.materia .sobre-bit .avatar {
    flex: 0 0 auto;
}

.materia .sobre-bit-texto {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.materia .sobre-bit-texto .sobre-bit-nome {
    display: inline;
    margin: 0 0.25rem 0 0;
    font-size: 0.95rem;
}

.materia .sobre-bit-selo {
    margin-right: 0.3rem;
    vertical-align: 1px;
}

/* Busca: campo na própria página + total de resultados */
.busca-pagina-form {
    display: flex;
    gap: 0.5rem;
    max-width: 640px;
    margin-bottom: 1.75rem;
}

.busca-pagina-form .auth-input {
    border-radius: 999px;
    padding-left: 1rem;
}

.busca-pagina-form .auth-btn {
    flex: 0 0 auto;
    padding: 0.6rem 1.3rem;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.busca-total {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.busca-vazia p {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
}

.busca-vazia a {
    color: var(--magenta-text);
    font-weight: 700;
}

/* Categorias: cartão com a capa da matéria mais recente por trás (escurecida pro texto ler bem) */
.categoria-tile--com-capa {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 230px;
    padding: 0;
    text-align: left;
    border-color: transparent;
}

.categoria-tile-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.categoria-tile--com-capa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 9, 31, 0.05) 0%, rgba(20, 9, 31, 0.75) 38%, rgba(20, 9, 31, 0.97) 70%);
}

.categoria-tile--com-capa:hover .categoria-tile-capa {
    transform: scale(1.04);
}

.categoria-tile-texto {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

.categoria-tile--com-capa .categoria-tile-texto {
    padding: 1.1rem 1.25rem;
}

.categoria-tile--com-capa h4 {
    font-size: 1.35rem;
    color: var(--gold);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.categoria-tile--com-capa .meta {
    color: rgba(244, 238, 250, 0.8);
}

.categoria-tile-recente {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #f4eefa;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.categoria-tile:not(.categoria-tile--com-capa) .categoria-tile-recente {
    color: var(--text-muted);
}

/* Página da categoria: a matéria mais recente maior (2 colunas) no computador */
@media (min-width: 721px) {
    /* Destaque ocupa 2 colunas x 2 linhas; a 2ª e a 3ª empilham na coluna da direita (sem vão). */
    .cards--com-destaque > .card:first-child {
        grid-column: span 2;
        grid-row: span 2;
        display: flex;
        flex-direction: column;
    }

    .cards--com-destaque > .card:first-child .media-box--card {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 260px;
    }

    .cards--com-destaque > .card:first-child h4 {
        font-size: 1.35rem;
    }
}

@media (max-width: 720px) {
    .footer-brand .siga {
        margin-top: 0;
    }
}

/* =============================================================================================
   Painel da equipe (papéis, 02/10/2026): abas e filtros das listas, selos de papel e tabelas
   que viram cartões no celular (`.tabela-cartoes` + `data-rotulo` em cada célula).
   ============================================================================================= */
.painel-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.painel-aba {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.painel-aba span {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.painel-aba:hover {
    color: var(--text);
    border-color: var(--magenta-text);
}

.painel-aba.is-ativa {
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    border-color: transparent;
    color: #fff;
}

.painel-aba--alerta:not(.is-ativa) {
    border-color: var(--gold);
    color: var(--gold-text);
}

.painel-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    max-width: 720px;
}

.painel-filtros .auth-input {
    flex: 1 1 220px;
    width: auto;
}

.painel-filtros select.auth-input {
    flex: 0 1 200px;
}

.status-badge--revisao {
    background: rgba(230, 167, 29, 0.22);
    color: var(--gold-text);
    box-shadow: inset 0 0 0 1px rgba(230, 167, 29, 0.5);
}

.materias-tabela .materias-titulo {
    white-space: normal;
    min-width: 280px;
    max-width: 460px;
}

.papel-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.papel-selo {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: var(--input-bg);
    color: var(--text-muted);
}

.papel-selo--redator { background: rgba(187, 23, 227, 0.16); color: var(--magenta-text); }
.papel-selo--moderador { background: rgba(34, 140, 202, 0.18); color: #5cb8f0; }
.papel-selo--admin { background: rgba(230, 167, 29, 0.18); color: var(--gold-text); }

:root[data-theme="light"] .papel-selo--moderador { color: #1f6f9f; }

.papeis-ajuda {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    font-size: 0.9rem;
}

.papeis-ajuda summary {
    cursor: pointer;
    font-weight: 700;
}

.papeis-ajuda ul {
    margin: 0.75rem 0 0.5rem;
    padding-left: 1.1rem;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .materias-tabela-wrap {
        overflow: visible;
    }

    .tabela-cartoes,
    .tabela-cartoes tbody,
    .tabela-cartoes tr,
    .tabela-cartoes td {
        display: block;
        width: 100%;
    }

    .tabela-cartoes {
        background: none;
        border: 0;
    }

    .tabela-cartoes thead {
        display: none;
    }

    .tabela-cartoes tr {
        position: relative;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(230, 167, 29, 0.2);
        border-radius: 12px;
        background: var(--bg-card);
    }

    .tabela-cartoes td {
        padding: 0.2rem 0;
        border: 0;
        white-space: normal;
    }

    .tabela-cartoes td[data-rotulo] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: 0.88rem;
    }

    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo);
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .tabela-cartoes .tabela-cartoes-titulo {
        min-width: 0;
        max-width: none;
        margin-bottom: 0.35rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .tabela-cartoes .tabela-cartoes-avatar {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        width: auto;
    }

    .tabela-cartoes .materias-acoes {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.5rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--hairline);
    }

    .tabela-cartoes td.vazio {
        text-align: center;
    }
}

/* Editor: observações da revisão (matéria devolvida) e o bloco "Devolver pro redator" */
.revisao-nota {
    margin-bottom: 1.2rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(187, 23, 227, 0.4);
    border-left: 4px solid var(--magenta);
    border-radius: 12px;
    background: rgba(187, 23, 227, 0.08);
    font-size: 0.92rem;
}

.revisao-nota p {
    margin: 0 0 0.4rem;
}

.revisao-nota-titulo {
    font-weight: 800;
    color: var(--magenta-text);
}

.revisao-devolver-corpo {
    align-items: stretch;
}

.revisao-devolver-corpo textarea {
    flex: 1 1 260px;
    resize: vertical;
}

/* Painel da equipe (/painel/equipe/) */
.painel-equipe-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.painel-equipe-topo h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.painel-equipe-topo .meta {
    margin: 0;
}

.painel-equipe-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}

.painel-bloco {
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(230, 167, 29, 0.18);
    border-radius: 14px;
    background: var(--bg-card);
}

.painel-bloco--alerta {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(230, 167, 29, 0.25);
}

.painel-bloco header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.painel-bloco h2 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.painel-bloco-numero {
    min-width: 1.9rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1a1200;
    font-weight: 900;
    text-align: center;
}

.painel-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}

.painel-numeros div {
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    background: var(--input-bg);
}

.painel-numeros dt {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.painel-numeros dd {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.painel-bloco-sub {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.painel-bloco-lista {
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

ol.painel-bloco-lista {
    padding-left: 1.2rem;
    list-style: decimal;
}

.painel-bloco-lista li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--hairline);
    line-height: 1.35;
}

.painel-bloco-lista li:last-child {
    border-bottom: 0;
}

.painel-bloco-lista a {
    display: block;
    font-weight: 700;
}

.painel-bloco-lista .meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
}

.painel-bloco-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.painel-bloco-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--magenta-text);
}

.painel-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
}

.painel-atalhos h2 {
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.painel-atalhos a {
    font-weight: 700;
    color: var(--magenta-text);
}

@media (max-width: 720px) {
    .painel-equipe-grade {
        grid-template-columns: 1fr;
    }
}

/* Menu do avatar: seção da equipe */
.user-dropdown-secao {
    margin: 0.35rem 0.75rem 0.1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.user-dropdown .user-dropdown-painel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--gold);
}

.user-dropdown-contador {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1a1200;
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.perfil-papel {
    margin: 0.1rem 0 0.35rem;
}

.byline-autor .papel-selo {
    margin-left: 0.2rem;
    vertical-align: 1px;
    font-size: 0.68rem;
}

/* Ações na tabela: a célula continua célula de tabela (com display:flex nela, a linha
   desalinhava quando o título quebrava em duas linhas). */
.materias-tabela td.materias-acoes {
    display: table-cell;
    vertical-align: middle;
}

.materias-tabela td.materias-acoes > * {
    display: inline-block;
    margin-right: 0.9rem;
    vertical-align: middle;
}

.materias-tabela td.materias-acoes form {
    margin: 0;
}

@media (max-width: 720px) {
    .tabela-cartoes td.materias-acoes {
        display: flex;
    }

    /* Cartão sem as linhas de "—" (rascunho não tem data nem leituras). */
    .tabela-cartoes td.celula-vazia {
        display: none;
    }
}

/* Editor: aviso de texto não salvo guardado no navegador (rascunho-local.js) */
.rascunho-local {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.2rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--gold);
    border-radius: 12px;
    background: rgba(230, 167, 29, 0.1);
}

.rascunho-local p {
    margin: 0;
    font-size: 0.92rem;
}

.rascunho-local-acoes {
    display: flex;
    gap: 0.5rem;
}

/* Redação no celular (02/10/2026): cartão compacto - miniatura pequena ao lado do título, sem o
   resumo (o título já diz a notícia) e as outras fontes em no máximo 2 linhas. Antes cada
   cartão ocupava ~600px e a página passava de 9 mil. */
@media (max-width: 720px) {
    .pautas-subtitulo {
        display: none;
    }

    .pauta-card {
        display: grid;
        grid-template-columns: auto 84px minmax(0, 1fr);
        column-gap: 0.65rem;
        row-gap: 0.5rem;
        align-items: start;
        padding: 0.8rem;
    }

    .pauta-marcar {
        order: 0;
        padding-top: 0.15rem;
    }

    .pauta-miniatura {
        order: 0;
        width: 84px;
    }

    .pauta-corpo {
        grid-column: auto / -1;
        min-width: 0;
    }

    .pauta-card .pauta-titulo {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.92rem;
        line-height: 1.3;
    }

    .pauta-card .pauta-meta {
        font-size: 0.75rem;
    }

    .pauta-card .pauta-resumo,
    .pauta-card .pauta-nota-imprensa {
        display: none;
    }

    .pauta-card .pauta-cobertura {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.75rem;
    }

    /* Ações embaixo, ocupando o cartão todo (não só a coluna do texto). */
    .pauta-card .pauta-acoes {
        gap: 0.4rem;
    }

    .pauta-card .pauta-acoes button,
    .pauta-card .pauta-acoes .pautas-btn-escrever {
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 720px) {
    /* O corpo "se desfaz" na grade do cartão: título/linha de fontes ficam na coluna do texto e
       os botões (e avisos de situação) ocupam a largura toda, embaixo da miniatura. */
    .pauta-card .pauta-corpo {
        display: contents;
    }

    .pauta-card .pauta-corpo > * {
        grid-column: 3;
        margin-top: 0;
    }

    .pauta-card .pauta-marcar {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .pauta-card .pauta-miniatura {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .pauta-card .pauta-corpo > .pauta-acoes,
    .pauta-card .pauta-corpo > .pauta-situacao-linha,
    .pauta-card .pauta-corpo > .pauta-aviso,
    .pauta-card .pauta-corpo > .pauta-redigida,
    .pauta-card .pauta-corpo > .pauta-motivo {
        grid-column: 1 / -1;
    }

    .pauta-card .pauta-acoes {
        flex-wrap: wrap;
    }
}

/* Subtítulo discreto ao lado do título de seção (ex.: "Pra você") */
.secao-subtitulo {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Perfil: comentários recentes */
.perfil-comentarios {
    margin: 0;
    padding: 0;
    list-style: none;
}

.perfil-comentarios li + li {
    border-top: 1px solid var(--hairline);
}

.perfil-comentario {
    display: block;
    padding: 0.65rem 0;
}

.perfil-comentario:hover .perfil-comentario-texto {
    color: var(--magenta-text);
}

.perfil-comentario-texto {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: anywhere;
}

.perfil-comentario .meta {
    margin: 0;
    font-size: 0.78rem;
}

/* Comentários: "Ver mais" e alvos de toque maiores no celular */
.comentarios-ver-mais {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--magenta-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.comentarios-ver-mais:hover {
    border-color: var(--magenta-text);
}

@media (max-width: 720px) {
    .comentario-acoes button,
    .comentario-responder-btn {
        min-height: 36px;
        padding: 0.4rem 0.2rem;
        font-size: 0.85rem;
    }

    .comentario-acoes,
    .comentario-acoes-gerais {
        gap: 1.25rem;
    }
}

/* =============================================================================================
   Painel da equipe v2 (/painel/equipe/, 03/10/2026): saudação + números de destaque (tiles
   clicáveis, com variação e barrinhas das leituras) + duas colunas (o que precisa de ação à
   esquerda; audiência, comunidade e atalhos à direita). Prefixo `pe-`.
   ============================================================================================= */
.pe {
    --pe-borda: var(--hairline);
    --pe-cartao: var(--bg-card);
    --pe-suave: var(--input-bg);
    --pe-sobe: #22ca82;
    --pe-desce: #ff7a8a;
    --pe-spark: rgba(220, 94, 239, 0.35);
}

:root[data-theme="light"] .pe {
    --pe-sobe: #12814f;
    --pe-desce: #c0344a;
    --pe-spark: rgba(154, 18, 189, 0.28);
}

.pe-topo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.6rem 1.75rem;
    border: 1px solid rgba(230, 167, 29, 0.25);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(230, 167, 29, 0.16), transparent 55%),
        linear-gradient(135deg, rgba(187, 23, 227, 0.22), rgba(102, 34, 202, 0.14) 60%, transparent);
}

.pe-data {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.pe-topo h1 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    line-height: 1.15;
}

.pe-papel {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pe-topo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    background: var(--gold);
    color: #1a1200;
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.pe-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.pe-btn--secundario {
    background: transparent;
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--input-border);
}

.pe-btn--pequeno {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
}

.pe-icone {
    flex: 0 0 auto;
}

/* Números de destaque */
.pe-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.pe-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--pe-borda);
    border-radius: 16px;
    background: var(--pe-cartao);
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.pe-tile:hover {
    border-color: var(--magenta-text);
    transform: translateY(-2px);
}

.pe-tile--alerta {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(230, 167, 29, 0.14), transparent 70%), var(--pe-cartao);
}

.pe-tile-rotulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pe-tile--alerta .pe-tile-rotulo {
    color: var(--gold-text);
}

.pe-tile-valor {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.pe-tile-nota,
.pe-tile-delta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pe-tile-delta--sobe {
    color: var(--pe-sobe);
    font-weight: 700;
}

.pe-tile-delta--desce {
    color: var(--pe-desce);
    font-weight: 700;
}

.pe-tile--grafico {
    padding-right: 6.2rem;
}

.pe-spark {
    position: absolute;
    right: 1.1rem;
    bottom: 1.05rem;
    width: 68px;
    height: 34px;
    overflow: visible;
}

.pe-spark rect {
    fill: var(--pe-spark);
}

.pe-spark rect.pe-spark-hoje {
    fill: var(--magenta-text);
}

/* Colunas */
.pe-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pe-principal,
.pe-lateral {
    display: grid;
    gap: 1rem;
}

.pe-cartao {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--pe-borda);
    border-radius: 16px;
    background: var(--pe-cartao);
}

.pe-cartao--aviso {
    border-color: rgba(187, 23, 227, 0.45);
    box-shadow: inset 4px 0 0 var(--magenta);
}

.pe-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.pe-cartao-topo h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.pe-cartao-topo h2 .pe-icone {
    color: var(--magenta-text);
}

.pe-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--magenta-text);
}

.pe-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--pe-borda);
}

.pe-item:first-child {
    border-top: 0;
}

.pe-item-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.pe-item-titulo {
    display: block;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.pe-item-titulo:hover {
    color: var(--magenta-text);
}

.pe-item-meta,
.pe-item-nota {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pe-item-nota {
    font-style: italic;
}

.pe-data-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    background: var(--pe-suave);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pe-data-chip strong {
    font-size: 0.95rem;
    color: var(--text);
}

.pe-vazio {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--pe-suave);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pe-vazio .pe-icone {
    width: 26px;
    height: 26px;
    color: var(--pe-sobe);
}

.pe-vazio p {
    margin: 0;
    line-height: 1.45;
}

.pe-vazio strong {
    color: var(--text);
}

/* Ranking de leituras com barra (o número em texto ao lado - a barra só reforça) */
.pe-ranking {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pe-ranking;
}

.pe-ranking li {
    counter-increment: pe-ranking;
}

.pe-ranking-item {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    grid-template-areas:
        "n titulo total"
        "n barra barra";
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid var(--pe-borda);
    color: var(--text);
}

.pe-ranking li:first-child .pe-ranking-item {
    border-top: 0;
}

.pe-ranking-item::before {
    content: counter(pe-ranking);
    grid-area: n;
    align-self: start;
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--magenta-text);
}

.pe-ranking-titulo {
    grid-area: titulo;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}

.pe-ranking-item:hover .pe-ranking-titulo {
    color: var(--magenta-text);
}

.pe-ranking-total {
    grid-area: total;
    align-self: start;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.pe-ranking-barra {
    grid-area: barra;
    height: 4px;
    border-radius: 4px;
    background: var(--pe-suave);
    overflow: hidden;
}

.pe-ranking-barra span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--magenta-text);
}

.pe-numeros {
    display: grid;
    margin: 0;
}

.pe-numeros div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-top: 1px solid var(--pe-borda);
}

.pe-numeros div:first-child {
    border-top: 0;
}

.pe-numeros dt {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.pe-numeros dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pe-atalhos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.pe-atalhos a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: var(--pe-suave);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}

.pe-atalhos a:hover {
    background: var(--bg-card-hover);
    color: var(--magenta-text);
}

.pe-atalhos .pe-icone {
    color: var(--magenta-text);
}

@media (max-width: 960px) {
    .pe-colunas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .pe-topo {
        padding: 1.2rem;
    }

    .pe-topo-acoes,
    .pe-topo-acoes .pe-btn {
        width: 100%;
        justify-content: center;
    }

    .pe-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .pe-tile {
        padding: 0.85rem;
    }

    .pe-tile-valor {
        font-size: 1.8rem;
    }

    .pe-tile--grafico {
        grid-column: 1 / -1;
    }

    /* O título já é o link; no celular o botão apertava o texto. */
    .pe-item .pe-btn--pequeno {
        display: none;
    }
}

.pe-colunas--uma {
    grid-template-columns: minmax(0, 1fr);
}

/* Na coluna larga os atalhos cabem em 4 por linha. */
.pe-principal .pe-atalhos {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

@media (max-width: 720px) {
    .pe-principal .pe-atalhos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tile que sobraria sozinho na linha ocupa as duas colunas (3º de 4 quando o 4º é o das
       leituras, que já é largura toda; ou o último de uma quantidade ímpar). */
    .pe-tile:nth-child(odd):nth-last-child(2):not(.pe-tile--grafico),
    .pe-tile:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}

/* Painel da equipe: quem é da equipe */
.pe-equipe {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-equipe li + li {
    border-top: 1px solid var(--pe-borda);
}

.pe-membro {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    color: var(--text);
}

.pe-membro-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.9rem;
}

.pe-membro:hover .pe-membro-nome {
    color: var(--magenta-text);
}

.pe-membro-nome small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}