/* Extensões do fórum sobre o JLP Design System. Só tokens, nada de cor solta.
   bundle.css e tokens.css vêm do design system e não são editados aqui. */

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 60; padding: 10px 14px; border-radius: var(--radius-md); background: var(--brand); color: #ffffff; font-weight: 600; }
.skip-link:focus { top: 12px; color: #ffffff; }

/* Página */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
/* content-box, como .jlp-nav__inner: 1200px de conteúdo + gutter */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack--tight { gap: 18px; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }

/* Aviso de e-mail não confirmado e aviso do admin no topo */
.topbar { background: var(--warning-surface); border-bottom: 1px solid var(--warning-line); color: var(--warning); font-size: 13px; }
.topbar .container { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; min-height: 44px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.topbar button { background: transparent; border: 0; padding: 0 4px; min-height: 36px; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; }

/* Field: label com link à direita (Senha / Esqueci a senha) */
.jlp-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.jlp-field__head a { font-size: 13px; }

/* Erro de formulário (o design system só tem erro por campo) */
.jlp-callout--error { background: var(--danger-soft); color: var(--danger-ink); }
.jlp-callout--error svg { color: var(--danger-ink); }
.jlp-callout--error strong { color: var(--danger-ink); }

/* Auth */
.auth { flex: 1; }
.auth--tint { background: linear-gradient(180deg, var(--hero-tint) 0%, var(--surface) 60%); }
.auth--muted { background: var(--surface-muted); }
.auth__header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.auth__header--line { border-bottom: 1px solid var(--line); background: var(--surface); }
.auth__header-end { font-size: 14px; color: var(--ink-muted); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.auth__header-end a { font-weight: 600; }
/* main vira coluna flex para o bloco do cartão centralizar na vertical (margin-block: auto);
   se não couber, as margens zeram e ele fica em cima, com rolagem normal */
.page > main:has(> .auth__main) { display: flex; flex-direction: column; }
.auth__main { display: flex; justify-content: center; align-items: flex-start; margin-block: auto; padding: 48px 16px; }
.auth__card { width: 100%; max-width: 440px; box-sizing: border-box; padding: 36px 32px; border: 1px solid var(--line); }
.auth__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.auth__lead { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.auth__card--center .auth__title, .auth__card--center .auth__lead { text-align: center; }
.auth__form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.auth__alt { margin: 24px 0 0; font-size: 14px; color: var(--ink-muted); text-align: center; }
.auth__alt a { font-weight: 600; }
.auth__legal { padding: 20px 24px; text-align: center; font-size: 12px; color: var(--ink-muted); }
.auth__step-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #ffffff; display: flex; align-items: center; justify-content: center; }
.auth__step-icon svg { width: 24px; height: 24px; }
.auth__step-icon--ok { background: var(--success-soft); color: var(--success); }
.auth__step-icon--alert { background: var(--danger-soft); color: var(--danger); }
.auth__step-icon + .auth__title { margin-top: 20px; font-size: 24px; }
.auth__back { margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }

/* Cadastro em duas colunas */
.signup { max-width: var(--content-max); width: 100%; box-sizing: border-box; margin: 0 auto; padding: 48px var(--space-6) 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.signup__form { flex: 1 1 420px; min-width: 0; max-width: 520px; }
.signup__title { margin: 12px 0 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.signup__lead { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.signup__aside { flex: 1 1 380px; min-width: 0; border-radius: var(--radius-2xl); padding: 40px; box-sizing: border-box; }
.signup__aside h2 { margin: 12px 0 0; font-size: 26px; line-height: 1.2; font-weight: 800; }
.signup__list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.signup__list li { display: flex; gap: 14px; font-size: 14px; line-height: 1.5; }
.signup__list strong { display: block; color: #ffffff; font-size: 15px; }
.signup__list .jlp-iconbox { width: 40px; height: 40px; flex-basis: 40px; border-radius: var(--radius-md); }
.signup__list .jlp-iconbox svg { width: 18px; height: 18px; }
.signup__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--navy-line); font-size: 12px; color: var(--on-navy-muted); }
.signup__checks { display: flex; flex-direction: column; }

/* Regras e páginas de texto */
.prose { max-width: 760px; font-size: 15px; line-height: 1.7; color: var(--text); }
.prose h1 { margin: 12px 0 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.prose h2 { margin: 32px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.prose ul { padding-left: 20px; }
.prose li { margin: 10px 0; }
.prose li strong { color: var(--ink); }

/* Botão carregando (htmx): o spinner entra no lugar do ícone */
.jlp-btn .htmx-indicator { display: none; }
.jlp-btn.htmx-request .htmx-indicator { display: inline-block; }
.jlp-btn.htmx-request > svg { display: none; }

/* Navbar no celular */
@media (max-width: 640px) {
  .jlp-nav__links { order: 3; width: 100%; gap: 4px 18px; }
  .jlp-nav__links a { min-height: 40px; display: inline-flex; align-items: center; }
  .auth__card { padding: 28px 20px; }
  .signup__title { font-size: 30px; }
  .signup__aside { padding: 28px 22px; }
}

/* Sair é um POST: botão com a cara de item de menu */
.jlp-account__item--button { width: 100%; border: 0; background: transparent; font: inherit; font-family: var(--font-sans); cursor: pointer; text-align: left; }
.jlp-footer h2 { margin: 0; }

/* Checkbox obrigatório não marcado */
.jlp-check input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.signup__checks .jlp-hint--error { margin: -6px 0 6px 32px; }
/* Turnstile (anti-robô) no cadastro: ocupa a largura do formulário; altura reservada evita pulo ao carregar */
.signup__captcha { display: flex; flex-direction: column; gap: 6px; }
.signup__captcha .js-turnstile { width: 100%; }
/* até poder aparecer, o widget fica escondido sob o "carregando" (65px; compacto, 140px) */
.turnstile-box { position: relative; height: 65px; overflow: hidden; }
.turnstile-box.is-drawn { height: auto; min-height: 65px; overflow: visible; }
.turnstile-box[hidden] { display: none; }
@media (max-width: 340px) { .turnstile-box { height: 140px; } }
.turnstile-loading { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); background: var(--surface-muted); font-size: 13px; color: var(--ink-muted); }
.turnstile-loading[hidden] { display: none; }
.turnstile-note { margin: 0; font-size: 12px; color: var(--ink-muted); }
.turnstile-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); background: var(--surface-muted); font-size: 13px; color: var(--ink); }
.turnstile-fail[hidden] { display: none; }
.turnstile-fail__hint { color: var(--ink-muted); }
.turnstile-fail .jlp-btn { margin-top: 6px; }

/* A área clicável do checkbox vai só até o fim do texto, não a linha inteira */
.jlp-check { width: fit-content; max-width: 100%; }

/* Ícone de categoria grande (cabeçalho da categoria) */
.jlp-iconbox--lg { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; }
.jlp-iconbox--lg svg { width: 24px; height: 24px; }

/* Layout de duas colunas: conteúdo + sidebar (README: Espaço) */
.layout { max-width: var(--content-max); margin: 0 auto; padding: 48px var(--space-6) 72px; display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; }
.layout--tight { padding-top: 28px; }
.layout__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.layout__main--compact { gap: var(--space-4); }
.layout__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head a { font-size: 14px; font-weight: 600; }

/* Cabeçalho de página interna (categoria, listas) */
.page-head { background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.page-head__inner { max-width: var(--content-max); margin: 0 auto; padding: 20px var(--space-6) 28px; }
.page-head__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-top: 20px; }
.page-head__title { display: flex; gap: 18px; align-items: center; flex: 1 1 480px; min-width: 0; }
.page-head h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.page-head p { margin: 6px 0 0; font-size: 15px; color: var(--ink-muted); }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Barra da lista: abas + busca na categoria */
.listbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.listbar .jlp-search { width: 280px; max-width: 100%; border-color: var(--line-strong); border-radius: var(--radius-lg); }
a.jlp-tab { display: inline-flex; align-items: center; text-decoration: none; }
.jlp-segmented a.jlp-tab:hover { color: var(--ink); }

/* Tabela de tópicos da categoria */
.topic-table__head { display: flex; gap: 16px; padding: 12px 20px; background: var(--surface-muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.topic-table__main { flex: 1 1 320px; min-width: 0; display: flex; gap: 14px; align-items: center; }
.topic-table__num { flex: 0 0 80px; text-align: right; font-size: 14px; color: var(--ink-muted); }
.topic-table__num strong { color: var(--ink); }
.topic-table__when { flex: 0 0 150px; text-align: right; font-size: 13px; color: var(--ink-muted); }
.topic-table__head .topic-table__main { flex-basis: auto; }
@media (max-width: 720px) {
  .topic-table__head { display: none; }
  .topic-table__row .topic-table__num, .topic-table__row .topic-table__when { flex: 0 0 auto; text-align: left; font-size: 12px; }
  .topic-table__row .topic-table__num .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
}
.jlp-topic__meta a.jlp-chip { text-decoration: none; }

/* Sidebar */
.side-card h2, .side-card h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.side-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.side-card ul, .side-card ol { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text); }
.side-card ul li { display: flex; gap: 8px; }
.side-card ul li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--brand); }
.side-card__link { display: inline-flex; margin-top: 12px; font-size: 13px; font-weight: 600; min-height: 32px; align-items: center; }
.side-card__nav { display: flex; flex-direction: column; margin-top: 8px; font-size: 14px; }
.side-card__nav a { min-height: 36px; display: flex; align-items: center; color: var(--ink); }
.side-card__nav a:hover { color: var(--brand); }
.side-card__stats { display: flex; gap: 20px; margin-top: 12px; font-size: 13px; color: var(--ink-muted); }
.side-card__stats strong { color: var(--ink); font-size: 18px; display: block; }
.helpers li { display: flex; align-items: center; gap: 10px; }
.helpers__name { font-weight: 600; color: var(--ink); }
.helpers__meta { font-size: 12px; color: var(--ink-muted); }
.me-card { display: flex; align-items: center; gap: 12px; }
.me-card__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.me-card__since { font-size: 12px; color: var(--ink-muted); }

/* Busca: resultados */
.search-summary { font-size: 14px; color: var(--ink-muted); }
.search-summary strong { color: var(--ink); }
.topic-table__head .topic-table__num, .topic-table__head .topic-table__when { font-size: inherit; color: inherit; }
.jlp-card--navy.side-card h2, .jlp-card--navy.side-card h3 { color: #ffffff; }
@media (max-width: 640px) { .listbar form, .listbar .jlp-search { width: 100%; } }

/* ---------- Tópico ---------- */
.topic-head__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.topic-head__chips a.jlp-chip { text-decoration: none; }
.topic-head__title { margin: 12px 0 0; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.topic-head__meta { margin: 10px 0 0; font-size: 14px; color: var(--ink-muted); }
.topic-head__meta a { font-weight: 600; }
.topic-head__solution { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success); font-size: 14px; font-weight: 600; }
.topic-head__solution:hover { color: var(--success); }
.post-list { display: flex; flex-direction: column; gap: 16px; }
.jlp-post { scroll-margin-top: 16px; }
.jlp-post__when a.post-permalink { color: inherit; }
.jlp-post__when a.post-permalink:hover { color: var(--brand); }
.post-tag { font-size: 11px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border-radius: var(--radius-sm); padding: 2px 8px; }
.post-hidden { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); font-size: 14px; color: var(--ink-muted); background: var(--surface-muted); }
.jlp-post__content { overflow-wrap: anywhere; }
.jlp-post__content a { font-weight: 500; }
.jlp-post__content pre.jlp-code { margin: 14px 0; }
.jlp-post__content code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-sunken); border-radius: 6px; padding: 1px 5px; }
.jlp-post__content pre code { background: transparent; padding: 0; color: inherit; }
.jlp-post__content blockquote { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink-muted); }
.jlp-post__content blockquote p { margin-bottom: 6px; }
.jlp-post__content ul, .jlp-post__content ol { margin: 0 0 12px; padding-left: 22px; }
.jlp-post__content h3, .jlp-post__content h4 { margin: 18px 0 8px; color: var(--ink); }
.jlp-post__content table { border-collapse: collapse; margin: 0 0 12px; font-size: 14px; display: block; overflow-x: auto; }
.jlp-post__content th, .jlp-post__content td { border: 1px solid var(--line); padding: 6px 10px; }
.jlp-post__content th { background: var(--surface-muted); }
.jlp-post__actions .jlp-btn--sm[disabled] { background: var(--surface); color: var(--ink-muted); border-color: var(--line); cursor: default; }
.post-solution__mark { color: var(--success) !important; }
.jlp-post__actions .post-solution__mark { margin-left: auto; }

/* Resposta */
.reply-form { display: flex; flex-direction: column; margin-top: 8px; }
.reply-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.jlp-composer[aria-invalid="true"] { border: 2px solid var(--danger); }
.jlp-composer__preview { min-height: 160px; padding: 14px 16px; }
.composer-error { margin: 0; padding: 8px 16px 12px; }
.reply-invite { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reply-invite h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.reply-invite p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.reply-invite__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sidebar do tópico */
.topic-facts { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.topic-facts dt { font-size: 12px; color: var(--ink-muted); }
.topic-facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.topic-facts__label { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }
/* avatares sobrepostos: cada um vem dentro de <a>, então o "+ .jlp-avatar" do design system não pega */
.jlp-avatars > a { position: relative; border-radius: 50%; transition: transform .15s; }
.jlp-avatars > a + a { margin-left: -8px; }
.jlp-avatars > a:hover, .jlp-avatars > a:focus-visible { z-index: 1; transform: translateY(-2px); }
.jlp-avatars__more { position: relative; margin-left: -8px; border: 2px solid var(--surface); background: var(--surface-sunken); color: var(--ink-muted); font-size: 11px; cursor: default; }
.related li { display: flex; flex-direction: column; gap: 2px; }
.related li::before { display: none; }
.related a { font-weight: 600; font-size: 14px; }
.related span { font-size: 12px; color: var(--ink-muted); }

/* Selo Cliente (produto JLP): em destaque, com "Assinatura ativa" embaixo quando há um em dia */
.customer-seal { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; vertical-align: top; }
.customer-seal__sub { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--success); white-space: nowrap; }
.customer-seal__sub::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success-strong); }

/* Celular: autor do post em linha, em cima do texto (canvas Tópico mobile) */
@media (max-width: 640px) {
  .topic-head__title { font-size: 24px; }
  .jlp-post__author { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .jlp-post--best .jlp-post__author { border-radius: 14px 14px 0 0; }
  .jlp-post__author .jlp-avatar--lg { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
  .jlp-post__name { margin: 0; }
  .jlp-post__stat { margin: 0; flex-basis: 100%; padding-left: 46px; margin-top: -4px; }
  .jlp-post__body { padding: 16px; }
  .jlp-post__actions .post-solution__mark { margin-left: 0; }
}

/* ---------- Novo tópico ---------- */
.new-topic__title { margin: 4px 0 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.new-topic { padding: 28px; }
.new-topic__form { display: flex; flex-direction: column; gap: 22px; }
.new-topic__types { border: 0; margin: 0; padding: 0; min-width: 0; }
.new-topic__types legend { padding: 0; margin-bottom: 10px; }
.new-topic__row { display: flex; flex-wrap: wrap; gap: 22px; }
.new-topic__row > .jlp-field { flex: 1 1 260px; min-width: 0; }
.new-topic__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.new-topic__draft { margin-left: auto; }
.similar { flex-direction: column; gap: 6px; margin-top: 10px; }
.similar ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.similar a { font-size: 14px; font-weight: 600; }
.similar li span { font-size: 13px; color: var(--ink-muted); }
.tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--control-lg); box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: text; }
.tags-input:focus-within { border: 2px solid var(--brand); padding: 5px 9px; }
.tags-input__chips { display: contents; }
.tags-input__chip { gap: 4px; padding-right: 2px; }
.tags-input__chip button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; }
.tags-input__chip button:hover { background: var(--brand-line); }
.tags-input input { flex: 1 1 100px; min-width: 80px; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--ink); background: transparent; height: 32px; }
.side-card__no li::before { background: var(--danger); }
@media (max-width: 640px) { .new-topic { padding: 20px 16px; } .new-topic__draft { margin-left: 0; flex-basis: 100%; order: 3; } }
.jlp-chip--tag { background: var(--surface-sunken); color: var(--ink-muted); text-decoration: none; }
.jlp-chip--tag:hover { color: var(--ink); }

/* ---------- Anexos ---------- */
.uploader { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.jlp-drop.is-dragging { border-color: var(--brand); background: var(--brand-soft); }
.jlp-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
/* anexos enviados em colunas (2 no formulário largo, 1 no celular), sem sobrar espaço ao lado */
.uploader__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.uploader__list > * { max-width: none; min-width: 0; }
.uploader__list:empty { display: none; }
.upload-progress .jlp-progress { margin-top: 6px; }
.upload-progress--error { border-color: var(--danger-soft); background: var(--danger-soft); }
.upload-progress--error .jlp-attach__meta { color: var(--danger-ink); font-weight: 600; }
.upload-row__remove { width: 40px; height: 40px; }
.post-attachments { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.jlp-attach-img__frame a { display: block; }
.jlp-attach-img img { max-height: 420px; object-fit: contain; background: var(--surface-sunken); }
.topic-files { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.topic-files a { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.topic-files a:hover .topic-files__name { color: var(--brand); }
.topic-files .jlp-attach__type { width: 34px; height: 34px; flex-basis: 34px; font-size: 9px; }
.topic-files__info { min-width: 0; display: flex; flex-direction: column; }
.topic-files__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-files__meta { font-size: 12px; color: var(--ink-muted); }
.side-card .topic-files li::before { display: none; }

/* Foto de perfil no lugar das iniciais */
img.jlp-avatar--photo { object-fit: cover; background: var(--surface-sunken); padding: 0; }
.jlp-account__btn { overflow: hidden; }
.jlp-account__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Perfil ---------- */
.profile-head { background: linear-gradient(180deg, var(--hero-tint) 0%, var(--surface) 100%); border-bottom: 1px solid var(--line); }
.profile-head__inner { max-width: var(--content-max); margin: 0 auto; padding: 40px var(--space-6) 28px; display: flex; flex-direction: column; gap: 24px; }
.profile-head__id { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.profile-head__id .jlp-avatar--xl { box-shadow: 0 0 0 4px var(--surface); }
.profile-head h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.profile-head__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.profile-head__since { font-size: 13px; color: var(--ink-muted); }
.profile-head__edit { margin-left: auto; }
.profile-head__stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity__item { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.activity__item:last-child { border-bottom: 0; }
.activity__icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); font-size: 14px; }
.activity__item--solution .activity__icon { background: var(--success-soft); color: var(--success); }
.activity__body { flex: 1; min-width: 0; }
.activity__what { font-size: 14px; color: var(--ink-muted); }
.activity__what a { font-weight: 600; }
.activity__excerpt { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.activity__when { margin-top: 6px; font-size: 12px; color: var(--ink-muted); }
.activity__status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--danger-ink); }

/* Configurações */
.settings-card h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.settings-card__lead { margin: 6px 0 0; font-size: 14px; color: var(--ink-muted); }
.settings-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.settings-photo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.settings-photo__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 260px; }
.settings-photo__pick { cursor: pointer; }
.settings-photo__pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-form .settings-actions { margin-top: 2px; }
.settings-data { margin-top: 18px; }
.settings-data__delete { color: var(--danger); }
.settings-data__delete:hover { color: var(--danger-ink); background: var(--danger-soft); }
.jlp-dialog .jlp-field { text-align: left; }
@media (max-width: 640px) { .profile-head h1 { font-size: 26px; } .profile-head__edit { margin-left: 0; } .settings-actions > * { flex: 1 1 auto; } }

/* Recorte da foto de perfil */
.cropper { width: 560px; }
.cropper__stage { position: relative; margin-top: 16px; display: flex; justify-content: center; background: var(--surface-sunken); border-radius: var(--radius-lg); overflow: hidden; touch-action: none; user-select: none; }
.cropper__stage img { display: block; max-width: 100%; max-height: 52vh; }
.cropper__box { position: absolute; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(10, 22, 51, 0.55); cursor: move; touch-action: none; }
.cropper__box::after { content: ""; position: absolute; inset: -2px; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 0; pointer-events: none; }
.cropper__box:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cropper__controls { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.cropper__preview { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; background-color: var(--surface-sunken); background-repeat: no-repeat; box-shadow: 0 0 0 1px var(--line); }
.cropper__zoom { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cropper__zoom input { width: 100%; accent-color: var(--brand); }

/* Botão carregando (aria-busy) mantém a cor da variante mesmo com disabled (que só impede duplo envio).
   README do DS: carregando = aria-busy + spinner + gerúndio, não é estado desabilitado. */
.jlp-btn.jlp-btn--primary[aria-busy="true"] { background: var(--brand); color: #ffffff; border-color: transparent; }
.jlp-btn.jlp-btn--danger[aria-busy="true"] { background: var(--danger); color: #ffffff; border-color: transparent; }
.jlp-btn.jlp-btn--dark[aria-busy="true"] { background: var(--ink); color: #ffffff; border-color: transparent; }
.jlp-btn.jlp-btn--secondary[aria-busy="true"] { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.jlp-btn.jlp-btn--ghost[aria-busy="true"] { background: transparent; color: var(--ink-muted); border-color: transparent; }

/* Lightbox dos anexos de imagem (Dialog do DS com a imagem grande) */
.jlp-dialog.lightbox { width: fit-content; max-width: min(92vw, 2048px); max-height: 94vh; display: none; flex-direction: column; overflow: hidden; }
.jlp-dialog.lightbox[open] { display: flex; }
.lightbox__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.lightbox__title { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__title strong { color: var(--ink); }
.lightbox__close { flex: 0 0 auto; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; min-width: min(320px, 80vw); min-height: 200px; flex: 0 1 auto; overflow: hidden; background: var(--surface-sunken); }
.lightbox__img { display: block; max-width: 92vw; max-height: min(85vh, calc(94vh - 150px)); width: auto; height: auto; object-fit: contain; }
.lightbox__img[hidden], .lightbox__stage .jlp-spinner[hidden] { display: none; }
.lightbox__error { margin: 0; padding: 24px; font-size: 14px; color: var(--ink-muted); }
.post-attachments .jlp-attach-img__frame a { cursor: zoom-in; }
@media (max-width: 640px) {
  .jlp-dialog.lightbox { max-width: calc(100vw - 16px); }
  .lightbox__img { max-width: calc(100vw - 16px); max-height: calc(94vh - 150px); }
  .lightbox__head { padding-left: 14px; }
}

/* Modal de denúncia */
.report-dialog { width: 480px; }
.report-dialog__reasons { border: 0; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.report-dialog__reasons legend { padding: 0; margin-bottom: 4px; }
.report-dialog__reasons .jlp-check { min-height: 40px; padding: 8px 0; }
.report-dialog .jlp-field { margin-top: 12px; }
.report-dialog__note { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.5; }
#denuncia-erro:not(:empty) { margin-top: 12px; }
@media (max-width: 480px) { .report-dialog__reasons { grid-template-columns: 1fr; } }

/* Edição de post */
.jlp-post--editing { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.edit-form .jlp-composer { margin-top: 12px; }
.edit-form__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.reply-form__buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Admin: calibração ---------- */
.mode-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; }
.mode-pill--enforce { background: var(--success-soft); color: var(--success); }
.mode-pill--shadow { background: var(--warning-soft); color: var(--warning); }
.calib { display: flex; flex-direction: column; gap: 16px; }
.calib-progress { display: flex; flex-direction: column; gap: 8px; }
.calib-progress__text { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }
.calib-progress__text strong { color: var(--ink); }
.calib__flash { margin: 0; font-size: 13px; color: var(--success); font-weight: 600; }
.calib__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }
.calib__meta a { margin-left: auto; font-weight: 600; }
.calib__title { margin: 12px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.calib__content { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-muted); }
.calib__images { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.calib__images img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--line); display: block; }
.calib__files { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); }
.calib__form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.calib__decision { display: flex; gap: 12px; flex-wrap: wrap; }
.calib__decision .jlp-btn { flex: 1 1 200px; height: var(--control-lg); font-size: 15px; }
.calib__ok:hover { border-color: var(--success-strong); color: var(--success); }
.calib__bad:hover, .calib__bad[aria-pressed="true"] { border-color: var(--danger); color: var(--danger-ink); background: var(--danger-soft); }
.calib__reasons { border: 0; margin: 0; padding: 0; min-width: 0; }
.calib__reasons legend { padding: 0; margin-bottom: 10px; }
.calib__reasons-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.calib__aux { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.calib-table__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 20px; border-bottom: 1px solid var(--line); }
.calib-table__head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.calib-table__head p { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); max-width: 520px; }
.calib-table__weight { font-size: 12px; margin-top: 2px; }

/* ---------- Admin: estrutura (SideNav) ---------- */
.adminbar__link { color: #c9d3e8; font-size: 14px; text-decoration: none; min-height: var(--control-md); display: inline-flex; align-items: center; }
.adminbar__link:hover { color: #ffffff; }
.jlp-adminbar .jlp-account__btn { background: var(--brand); color: #ffffff; }
/* menu sempre ao lado (sem quebrar): o conteúdo fica com a sobra, então nunca abre buraco */
.admin { max-width: 1320px; margin: 0 auto; padding: 28px var(--space-6) 64px; display: flex; flex-wrap: nowrap; gap: 28px; align-items: flex-start; }
.admin__nav { flex: 0 0 240px; min-width: 0; position: sticky; top: 16px; }
.admin__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.admin-head p { margin: 6px 0 0; font-size: 14px; color: var(--ink-muted); }
/* sem espaço para o menu ao lado: vira um bloco no topo, com os itens quebrando linha */
@media (max-width: 900px) {
  .admin { flex-direction: column; align-items: stretch; gap: 20px; }
  .admin__nav { flex: none; position: static; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  .admin__nav a { flex: 0 0 auto; white-space: nowrap; }
  .admin__main { flex: none; }
}
@media (max-width: 720px) {
  .admin { padding: 16px var(--space-4) 48px; gap: 16px; }
}
/* layout de duas colunas dentro do admin (conteúdo + lateral) */
.layout--admin { max-width: none; margin: 0; padding: 0; gap: 24px; }
.layout--admin .layout__side { flex-basis: 260px; }

/* ---------- Admin: visão geral ---------- */
.admin-period { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.admin-period .jlp-select { height: 40px; width: auto; font-size: 13px; }
.admin-alerts { display: flex; flex-direction: column; gap: 8px; }
.admin-alert { display: flex; align-items: center; gap: 10px; min-height: var(--control-md); padding: 10px 14px; border-radius: var(--radius-lg); border: 1px solid var(--warning-line); background: var(--warning-soft); color: var(--ink); font-size: 14px; text-decoration: none; }
.admin-alert svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--warning); }
.admin-alert--ia { border-color: var(--danger); background: var(--danger-soft); }
.admin-alert--ia svg { color: var(--danger); }
.admin-alert:hover { text-decoration: underline; }
.admin-chart { padding: 20px; }
.admin-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin-chart__head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.admin-chart__head span { font-size: 13px; color: var(--ink-muted); }
.admin-chart__head strong { color: var(--ink); }
.admin-chart__bars { margin-top: 18px; display: grid; gap: 2px; align-items: end; height: 180px; border-bottom: 1px solid var(--line); }
/* cada coluna inteira é a área de hover; a barra é só o desenho */
.admin-chart__bar { position: relative; height: 100%; display: flex; align-items: flex-end; padding: 0 2px; }
.admin-chart__bar > span { display: block; width: 100%; background: #c9d7ff; border-radius: 4px 4px 0 0; }
.admin-chart__bar--today > span { background: var(--brand); }
.admin-chart__bar:hover > span { background: var(--brand-strong); }
.admin-chart__bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--navy); color: #ffffff; font-size: 12px; font-weight: 600; z-index: 2; pointer-events: none; }
.admin-chart__bar:first-child:hover::after { left: 0; transform: none; }
.admin-chart__bar:last-child:hover::after { left: auto; right: 0; transform: none; }
.admin-chart__axis { display: grid; gap: 2px; margin-top: 6px; font-size: 11px; color: var(--ink-muted); text-align: center; white-space: nowrap; }
.admin-chart__axis span:last-child { color: var(--ink); font-weight: 700; }
.admin-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.admin-list { overflow: hidden; }
.admin-list__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-list__head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.admin-list__head a { font-size: 13px; font-weight: 600; text-decoration: none; }
.admin-list ul { list-style: none; margin: 0; padding: 0; }
.admin-list li { padding: 12px 20px; border-top: 1px solid var(--line); }
.admin-list li:first-child { border-top: 0; }
.admin-list li > a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.admin-list li > a:hover { color: var(--brand); }
.admin-list__meta { margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.admin-list__user { display: flex; align-items: center; gap: 12px; }
a.admin-list__user { margin: -12px -20px; padding: 12px 20px; transition: background 0.15s ease; }
a.admin-list__user:hover { background: var(--surface-muted); }
a.admin-list__user:hover .admin-list__name { color: var(--brand); }
.admin-list__user .admin-list__meta { margin: 0 0 0 auto; }
.admin-list__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.admin-list__empty { margin: 0; padding: 16px 20px; font-size: 14px; color: var(--ink-muted); }

/* ---------- Admin: tópicos e usuários ---------- */
.admin-datatable { overflow: visible; }
.admin-filters__search { flex: 999 1 240px; height: var(--control-md); border-color: var(--line-strong); border-radius: var(--radius-lg); }
.admin-filters__search input { font-size: 14px; }
.admin-filters__select { flex: 1 1 190px; width: auto; height: var(--control-md); font-size: 14px; }
.admin-filters__go { height: var(--control-md); }
.admin-datatable .jlp-bulkbar .jlp-btn { min-height: 36px; }
.admin-datatable .jlp-bulkbar .jlp-btn[aria-busy="true"] { background: var(--brand); color: #ffffff; border-color: transparent; }
.admin-move { display: inline-flex; gap: 6px; align-items: center; }
.admin-move__select { width: auto; max-width: 220px; height: 36px; padding-left: 12px; border-radius: 10px; font-size: 13px; background-color: var(--surface); }
.admin-bulk__clear { margin-left: auto; }
.admin-table { min-width: 860px; }
.admin-table--users { min-width: 900px; }
.admin-table__check { width: 28px; }
.admin-check { display: flex; align-items: center; justify-content: center; min-width: var(--control-md); min-height: var(--control-md); margin: -12px 0; cursor: pointer; }
.admin-check input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface) center / 14px 14px no-repeat; cursor: pointer; }
.admin-check:hover input { border-color: var(--brand); }
.admin-check input:checked { background-color: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.admin-table__title a { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.admin-table__title a:hover { color: var(--brand); }
.admin-table__sub { margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.admin-table__when { white-space: nowrap; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-chip--muted { background: var(--surface-sunken); color: var(--ink-muted); }
.admin-chip-none { font-size: 12px; color: var(--ink-muted); }
/* "Mais ações" (details/summary) */
.admin-rowmenu { position: relative; display: inline-block; text-align: left; }
.admin-rowmenu > summary { list-style: none; font-size: 18px; }
.admin-rowmenu > summary::-webkit-details-marker { display: none; }
.admin-rowmenu__list { position: fixed; z-index: 20; width: 200px; padding: 6px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(10, 22, 51, 0.24); }
.admin-rowmenu__list > a, .admin-rowmenu__list > button { display: flex; align-items: center; width: 100%; min-height: var(--control-md); padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.admin-rowmenu__list > a:hover, .admin-rowmenu__list > button:hover { background: var(--surface-muted); }
.admin-rowmenu__list > .admin-rowmenu__danger { color: var(--danger); }
/* usuários */
.admin-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-user__text { min-width: 0; }
.admin-user__name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.admin-user__you { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-strong); background: var(--brand-soft); border-radius: var(--radius-sm); padding: 1px 6px; }
.admin-user__email { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.admin-user .admin-chips { margin-top: 4px; }
.admin-online { display: inline-flex; align-items: center; gap: 8px; color: var(--success); font-weight: 600; }
.admin-role { width: 130px; height: var(--control-md); font-size: 14px; }
.admin-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.admin-actions form { margin: 0; }
.admin-actions .jlp-btn--sm { min-height: var(--control-md); }
.admin-ban { width: 480px; }
.admin-ban__field { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.admin-ban__reason { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.admin-ban__reason:focus { padding: 9px 13px; }
.admin-ban__durations { display: flex; margin-top: 8px; }
.admin-ban__duration { flex: 1 1 0; min-height: 40px; padding: 10px 12px; border-radius: 9px; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.admin-ban__duration:has(input:checked) { background: var(--surface); box-shadow: var(--shadow-tab); font-weight: 600; color: var(--ink); }

/* ---------- Admin: denúncias ---------- */
.review__head { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.review__head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.review__head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.review__list { list-style: none; margin: 0; padding: 0; }
.review__item { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; padding: 16px 20px; border-top: 1px solid var(--line); }
.review__item:first-child { border-top: 0; }
.review__main { flex: 1 1 420px; min-width: 0; }
.review__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.review__reason { color: var(--danger-ink); background: var(--danger-soft); border-radius: 6px; padding: 2px 8px; font-weight: 700; }
.review__reports { color: var(--ink); background: var(--warning-soft); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.review__when { color: var(--ink-muted); }
.review__excerpt { margin: 8px 0 0; font-size: 14px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.review__excerpt a { font-weight: 600; text-decoration: none; }
.review__author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-muted); }
.review__notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-muted); font-style: italic; }
.review__details { margin-top: 10px; }
.review__details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); min-height: 32px; display: inline-flex; align-items: center; }
.review__body { margin-top: 8px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-muted); display: flex; flex-direction: column; gap: 12px; }
.review__where { margin: 0; font-size: 12px; color: var(--ink-muted); }
.review__content { font-size: 14px; }
.review__md { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; color: var(--ink); }
.review__images { display: flex; gap: 10px; flex-wrap: wrap; }
.review__img { position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); cursor: pointer; }
.review__img img { width: 160px; height: 120px; object-fit: cover; display: block; filter: blur(14px); transform: scale(1.1); }
.review__img-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.review__img.is-revealed img { filter: none; transform: none; }
.review__img.is-revealed .review__img-hint { display: none; }
.review__files { margin: 0; font-size: 13px; color: var(--ink-muted); }
.review__analysis h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.review__analysis .jlp-table { background: var(--surface); border-radius: var(--radius-md); overflow: hidden; }
.review__over td { color: var(--danger-ink); font-weight: 700; }
.review__analysis-note { margin: 0; font-size: 13px; color: var(--ink-muted); }
.review__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.review__pager { display: flex; gap: 8px; }

/* ---------- Admin: categorias e configurações ---------- */
/* aviso do admin no topo (Configurações › Geral) */
.topbar--notice { background: var(--brand-soft); border-bottom-color: var(--brand-line); color: var(--ink); }
/* imagem própria da categoria no lugar do ícone */
.jlp-iconbox--image { background: var(--surface-muted); overflow: hidden; }
.jlp-iconbox--image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* lista de categorias (RA-08) */
.cat-admin__row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px; background: var(--surface); }
.cat-admin__row + .cat-admin__row { border-top: 1px solid var(--line); }
.cat-admin__row--hidden { background: var(--surface-muted); }
.cat-admin__row--hidden .jlp-iconbox, .cat-admin__row--hidden .cat-admin__main { opacity: 0.6; }
.cat-admin__row.is-dragging { opacity: 0.5; box-shadow: inset 0 0 0 2px var(--brand); }
.cat-admin__grip { display: inline-flex; color: var(--ink-subtle); cursor: grab; }
.cat-admin__arrows { display: flex; flex-direction: column; gap: 2px; }
.cat-admin__arrow { width: 32px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-muted); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.cat-admin__arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cat-admin__arrow:disabled { opacity: 0.35; cursor: default; }
.cat-admin__main { flex: 1 1 240px; min-width: 0; }
.cat-admin__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--ink); }
.cat-admin__desc { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.cat-admin__stats { display: flex; flex-direction: column; flex: 0 0 110px; font-size: 13px; color: var(--ink-muted); }
.cat-admin__stats strong { color: var(--ink); }
.cat-admin__actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 640px) { .cat-admin__grip { display: none; } .cat-admin__actions { width: 100%; justify-content: flex-end; } }

/* nova/editar categoria (RA-09) */
.cat-form__slug { font-size: 12px; color: var(--ink); }
.cat-form__desc { height: auto; min-height: 72px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.5; }
.cat-form__modes { margin-top: 16px; }
.cat-form__panel { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.cat-form__panel[hidden] { display: none; }
.cat-form__drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.cat-form__current { display: flex; align-items: center; gap: 12px; }
.cat-form__fieldset { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.cat-preview__box { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.cat-preview__row { padding: 14px; gap: 12px; }
.cat-preview__row .jlp-cat__stats { flex-basis: auto; }
.cat-preview__icon { display: inline-flex; }
.side-card .cat-preview__sub { margin-top: 16px; font-size: 13px; color: var(--ink-muted); }

/* configurações (RA-10) */
.settings-tabs { margin-bottom: 4px; }
.settings-form textarea.jlp-input { height: auto; min-height: 96px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.5; }
.settings-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px 16px; }
.settings-readonly { display: flex; align-items: center; min-height: var(--control-lg); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: 15px; color: var(--ink-muted); overflow-wrap: anywhere; }
.settings-info { margin: 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-muted); font-size: 13px; line-height: 1.6; color: var(--text); }
.settings-info strong { color: var(--ink); }
.thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 20px; }
.thresholds .jlp-input { max-width: 120px; }
.input-suffix { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.admin-noban { visibility: hidden; }
/* visão geral: números em linhas de 3 (2 no tablet, 1 no celular) */
.admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .admin-stats { grid-template-columns: minmax(0, 1fr); } }
/* texto sr-only (absoluto) dentro da tabela não pode escapar da rolagem e esticar a página */
.jlp-table-wrap { position: relative; }
/* campo com erro do servidor no modal de banir */
.admin-ban__field:has(.ban-error:not([hidden])) .jlp-input { border-color: var(--danger); }
.ban-error[hidden] { display: none; }

/* ---------- Regras: coluna lateral ---------- */
.rules-layout .layout__main { display: block; }
/* a coluna acompanha o texto inteiro; o sumário (último card) fica preso no topo ao rolar */
.rules-side { align-self: stretch; }
.rules-toc { position: sticky; top: 16px; }
.rules-toc ol { counter-reset: regra; gap: 2px; }
.rules-toc li a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--ink); text-decoration: none; }
.rules-toc li a:hover, .rules-toc li a:focus-visible { background: var(--surface-muted); color: var(--brand); }
.rules-steps { gap: 12px !important; }
.rules-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.rules-steps__n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rules-legal { font-size: 13px; }
.rules-cta h2 { color: #ffffff; }
.rules-cta p { color: var(--on-navy-muted); }
.rules-cta__actions { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rules-cta .rules-cta__actions .jlp-btn { color: #ffffff; }
.rules-cta .rules-cta__login { color: #ffffff; font-size: 14px; font-weight: 600; }
/* âncora não fica escondida atrás do topo */
.prose [id] { scroll-margin-top: 16px; }
@media (max-width: 900px) { .rules-toc { position: static; } }
/* regras, privacidade e termos: o sumário leva até a seção com rolagem suave */
@media (prefers-reduced-motion: no-preference) {
  html:has(.rules-layout) { scroll-behavior: smooth; }
}

/* ---------- Admin: detalhe do usuário ---------- */
.jlp-card.admin-user { padding: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.admin-user__who { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.admin-user__id { flex: 1 1 320px; min-width: 0; }
.admin-user__id h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 24px; font-weight: 800; color: var(--ink); }
.admin-user__id p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); overflow-wrap: anywhere; }
.admin-user__meta { font-size: 13px !important; }
.admin-user__ban { color: var(--danger-ink) !important; font-weight: 600; }
.admin-user__repeat { font-size: 12px; font-weight: 700; color: var(--warning); background: var(--warning-soft); border-radius: 6px; padding: 2px 8px; }
.admin-user__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.admin-user__stats { align-self: stretch; width: 100%; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.admin-user__who { align-self: stretch; }
.review__author a { color: var(--ink); font-weight: 600; text-decoration: none; }
.review__author a:hover { color: var(--brand); text-decoration: underline; }
.admin-warning__text { font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* admin no tópico: atalho para a análise do post recusado ou oculto */
.post-mod-link { font-size: 12px; font-weight: 600; text-decoration: none; }
.post-mod-link:hover { text-decoration: underline; }

/* ---------- Editor visual ---------- */
.composer__editor { display: block; box-sizing: border-box; max-height: 60vh; overflow-y: auto; resize: vertical; padding: 14px 16px; outline: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; cursor: text; }
.composer__editor:empty::before { content: attr(data-placeholder); color: var(--ink-subtle, #8a93a6); pointer-events: none; }
.jlp-composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.composer__editor > :first-child { margin-top: 0; }
.composer__editor img { display: inline-block; max-width: 100%; height: auto; margin: 6px 0; border-radius: var(--radius-md); border: 1px solid var(--line); vertical-align: middle; }
.composer__editor pre { white-space: pre-wrap; }
.composer__emoji { position: relative; display: inline-flex; }
.composer__emoji > button span { font-size: 16px; line-height: 1; }
.composer__emoji-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(10, 22, 51, 0.18); }
.composer__emoji-panel[hidden] { display: none; }
.jlp-composer__tools .composer__emoji-panel button { min-width: 36px; width: 36px; height: 36px; padding: 0; font-size: 20px; }
@media (max-width: 520px) { .composer__emoji-panel { grid-template-columns: repeat(6, 36px); left: auto; right: -80px; } }

/* imagem no meio do texto do post: miniatura que abre no visualizador */
.jlp-post__content a.post-img { display: inline-block; margin: 6px 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); line-height: 0; cursor: zoom-in; }
.jlp-post__content a.post-img img { display: block; max-width: min(100%, 480px); height: auto; }
.jlp-post__content a.post-img img[width] { max-width: 100%; }
/* o painel de emojis sai para fora da caixa do editor */
.jlp-composer.composer { overflow: visible; }
.composer .jlp-composer__bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.composer textarea[hidden] { display: none; }
/* bloco de dezenas no editor: igual ao post publicado (jlp-code) */
.composer__editor pre { margin: 10px 0; padding: 14px 16px; background: var(--navy); color: var(--code-ink); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.composer__editor code { font-family: var(--font-mono); font-size: 13px; }
/* modal de link do editor */
.link-dialog { width: min(480px, calc(100vw - 32px)); }
.link-dialog .jlp-field + .jlp-field { margin-top: 14px; }
.link-dialog .jlp-input[aria-invalid="true"] { border-color: var(--danger); }
.link-dialog .jlp-dialog__text { margin-bottom: 18px; }
.link-dialog .jlp-dialog__icon { background: var(--brand-soft); color: var(--brand); }

/* ---------- Modais: abrir e fechar suave (todos os .jlp-dialog) ----------
 * Abrir: sobe 8px com fade e o fundo escurece; fechar: o inverso.
 * @starting-style + allow-discrete animam também o fechamento sem JS; navegador
 * antigo só abre e fecha na hora. Quem pede menos movimento não vê animação. */
@media (prefers-reduced-motion: no-preference) {
  .jlp-dialog {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      overlay 0.2s ease allow-discrete,
      display 0.2s ease allow-discrete;
  }
  .jlp-dialog[open] { opacity: 1; transform: none; }
  @starting-style {
    .jlp-dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); }
  }
  .jlp-dialog::backdrop {
    background: rgba(10, 22, 51, 0);
    transition:
      background-color 0.2s ease,
      overlay 0.2s ease allow-discrete,
      display 0.2s ease allow-discrete;
  }
  .jlp-dialog[open]::backdrop { background: rgba(10, 22, 51, 0.45); }
  @starting-style {
    .jlp-dialog[open]::backdrop { background: rgba(10, 22, 51, 0); }
  }
}

/* ---------- Editor: imagem selecionada (alinhar, tamanho, remover) ---------- */
.composer__body { position: relative; }
.composer__editor img { cursor: pointer; }
.composer__editor img.is-selected { outline: 2px solid var(--brand); outline-offset: 2px; }
.composer__editor img[data-align] { display: block; }
.composer__editor img[data-align="left"] { margin-right: auto; }
.composer__editor img[data-align="center"] { margin-left: auto; margin-right: auto; }
.composer__editor img[data-align="right"] { margin-left: auto; }
.composer__imghandle { position: absolute; z-index: 3; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--brand); border: 3px solid #ffffff; box-shadow: 0 1px 4px rgba(10, 22, 51, 0.35); cursor: nwse-resize; touch-action: none; }
.composer__imghandle[hidden], .composer__imgbar[hidden] { display: none; }
.composer__imgbar { position: absolute; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(10, 22, 51, 0.18); }
.composer__imgbar button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.composer__imgbar button:hover { background: var(--surface-muted); }
.composer__imgbar button[data-img="remove"]:hover { background: var(--danger-soft); color: var(--danger); }
.composer__imgbar svg { width: 18px; height: 18px; }
.composer__size { font-size: 12px; font-weight: 700; }
.composer__imgbar-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }

/* post publicado: alinhamento escolhido no editor */
.jlp-post__content a.post-img--left, .jlp-post__content a.post-img--center, .jlp-post__content a.post-img--right { display: table; }
.jlp-post__content a.post-img--center { margin-left: auto; margin-right: auto; }
.jlp-post__content a.post-img--right { margin-left: auto; }
.jlp-post__content a.post-img img[width] { max-width: 100%; height: auto; }
.composer__imgbar button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-strong); }
.jlp-btn.jlp-btn--secondary[aria-busy="true"] { cursor: progress; }
.jlp-btn[aria-busy="true"] .jlp-spinner--sm { margin-right: 6px; }
/* números dos cartões sempre na base, alinhados mesmo quando o rótulo quebra linha */
.admin-user__stats .jlp-stat, .admin-stats .jlp-stat { display: flex; flex-direction: column; }
.admin-user__stats .jlp-stat__value { margin-top: auto; padding-top: 6px; }
.admin-user__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .admin-user__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .admin-user__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* lista de seleção com erro: mesma borda vermelha do campo de texto (o DS só define para .jlp-input) */
.jlp-select[aria-invalid="true"], .jlp-select[aria-invalid="true"]:hover:not(:focus) { border: 2px solid var(--danger); padding: 0 13px; }

/* caixa de texto (textarea) com o estilo de campo: o foco do DS zera o padding vertical
   (pensado para campo de uma linha) e o campo encolhia; aqui a borda de 2px só tira 1px */
textarea.jlp-input { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
textarea.jlp-input:focus, textarea.jlp-input[aria-invalid="true"] { padding: 9px 13px; }
/* imagem sempre em linha própria (nunca ao lado do texto), no editor e no post */
.composer__editor img { display: block; }
.jlp-post__content a.post-img { display: table; }
/* Denúncias: imagem no texto do post denunciado desfocada até clicar (como os anexos) */
.review__content a.post-img { position: relative; overflow: hidden; cursor: pointer; }
.review__content a.post-img img { filter: blur(14px); transform: scale(1.05); }
.review__content a.post-img::after { content: "Clique para ver"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); line-height: 1.2; }
.review__content a.post-img.is-revealed { cursor: zoom-in; }
.review__content a.post-img.is-revealed img { filter: none; transform: none; }
.review__content a.post-img.is-revealed::after { content: none; }
/* título do aviso (Callout) numa linha própria, acima do texto */
.jlp-callout__title { display: block; margin-bottom: 2px; }

/* ---------- Banners: lateral do fórum ---------- */
/* grade: uma coluna na lateral; com a lateral embaixo (tablet), lado a lado em vez de esticar */
.side-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; align-items: start; }
.side-banner { position: relative; display: block; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); line-height: 0; }
.side-banner img { display: block; width: 100%; height: auto; border-radius: inherit; }
a.side-banner:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Admin › Banners ---------- */
.banner-admin__thumb { flex: 0 0 96px; width: 96px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-muted); }
.banner-admin__pos { font-size: 12px; font-weight: 700; color: var(--ink-muted); min-width: 22px; }
.banner-admin .cat-admin__desc { overflow-wrap: anywhere; }
.banner-form { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.banner-form__fields { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.banner-form__preview { flex: 1 1 300px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.banner-form__frame { padding: 16px; border-radius: var(--radius-xl); background: var(--surface-muted); border: 1px dashed var(--line-strong); }
.banner-form__empty { margin: 0; padding: 40px 12px; text-align: center; font-size: 13px; color: var(--ink-muted); }
/* área de envio da imagem (Dropzone do DS) */
.banner-drop { min-height: 140px; transition: border-color 0.15s ease, background 0.15s ease; }
.banner-drop:hover, .banner-drop.is-dragging { border-color: var(--brand); background: var(--brand-soft); }
.banner-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.banner-drop--error, .banner-drop--error:hover { border-color: var(--danger); background: var(--danger-soft); }
.banner-drop__icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--brand); border: 1px solid var(--line); }
.banner-drop__icon svg { width: 20px; height: 20px; }
.banner-drop__file { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.banner-drop__file[hidden] { display: none; }
.banner-form__group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.banner-form__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; margin-top: 4px; }
.banner-form__dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 900px) { .banner-form__preview { position: static; max-width: none; } }
.expired__actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
/* cartão centralizado: ícone e link de baixo também no centro */
.auth__card--center .auth__step-icon { margin-left: auto; margin-right: auto; }
.auth__card--center .auth__back { display: block; text-align: center; }

/* ---------- Vídeo do YouTube no post ---------- */
.yt-embed { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin: 10px auto 14px; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.yt-embed iframe, .yt-embed__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed__play { padding: 0; cursor: pointer; background: #000; }
.yt-embed__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; }
.yt-embed__icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(23, 23, 23, 0.85); transition: background 0.15s ease; }
.yt-embed__icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #ffffff; }
.yt-embed__play:hover .yt-embed__icon, .yt-embed__play:focus-visible .yt-embed__icon { background: #ff0000; }
.yt-embed__play:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* Requisitos da senha: apagados até serem atendidos, depois verdes com ✓ */
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-muted); }
.pw-rules li { display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s ease; }
.pw-rules__mark { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-strong); color: transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.pw-rules__mark svg { width: 10px; height: 10px; }
.pw-rules li.is-ok { color: var(--success); font-weight: 600; }
.pw-rules li.is-ok .pw-rules__mark { background: var(--success-strong); border-color: var(--success-strong); color: #ffffff; }

/* Lateral do tópico: Acompanhar e Fechar/Reabrir empilhados */
.topic-facts__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* Painel de emojis: hover mostra qual vai entrar */
.jlp-composer__tools .composer__emoji-panel button { transition: background 0.12s ease, transform 0.12s ease; }
.jlp-composer__tools .composer__emoji-panel button:hover { background: var(--brand-soft); transform: scale(1.15); }
.jlp-composer__tools .composer__emoji-panel button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; background: var(--brand-soft); }

/* Linha de categoria (lista da home e de Categorias): a linha toda é o link */
.jlp-cat { transition: background 0.15s ease; }
.jlp-cat:hover { background: var(--surface-muted); }
.jlp-cat:hover .jlp-cat__name { color: var(--brand); }
.jlp-cat:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.jlp-cat:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.jlp-cat:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* Bloco de código no post: barra com a linguagem e Copiar; Python com cores (highlight.js, no servidor) */
.code-block { margin: 14px 0; border-radius: var(--radius-lg); background: var(--navy); overflow: hidden; }
.code-block__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--navy-line); font-size: 12px; font-weight: 600; color: var(--on-navy-muted); }
.code-block__copy { border: 1px solid var(--navy-line); background: transparent; color: var(--on-navy); font: inherit; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.code-block__copy:hover { background: var(--navy-line); color: var(--surface); }
.code-block__copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.code-block__copy.is-done { color: var(--online); border-color: var(--online); }
.jlp-post__content .code-block pre.jlp-code { margin: 0; border-radius: 0; }
.hljs-keyword, .hljs-literal { color: var(--cyan); }
.hljs-string { color: var(--online); }
.hljs-number { color: var(--warning-line); }
.hljs-comment { color: var(--on-navy-muted); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-title.class_ { color: var(--sky); }
.hljs-built_in, .hljs-meta { color: var(--brand-line); }
.hljs-params { color: var(--code-ink); }
.hljs-subst { color: var(--code-ink); }

/* No editor: o bloco de código colado mostra a linguagem */
.composer__editor pre[data-lang] { position: relative; padding-top: 30px; }
.composer__editor pre[data-lang]::before { position: absolute; top: 8px; left: 16px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--on-navy-muted); }
.composer__editor pre[data-lang="python"]::before { content: "Python"; }
.composer__editor pre[data-lang="code"]::before { content: "Código"; }
/* código mostra exatamente o que se copia (sem ligaduras como -> virando seta) */
.jlp-code, .composer__editor pre { font-variant-ligatures: none; }

/* Admin › Usuário: recusas com motivo; o selo Reincidente leva até elas */
#h-recusas { scroll-margin-top: 80px; }
.admin-list__head:has(.admin-list__lead) { flex-direction: column; align-items: flex-start; gap: 4px; }
.admin-list__lead { margin: 0; font-size: 13px; color: var(--ink-muted); }
.admin-attempt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.admin-attempt__reason { font-size: 14px; font-weight: 600; color: var(--ink); }
a.admin-user__repeat { text-decoration: none; }
a.admin-user__repeat:hover { text-decoration: underline; }