/*!
 * IntroCDC — style.css (Redesign Dark Purple 2025)
 * Autor: GPT-5 Thinking p/ Brunão (e.e)
 * Filosofia:
 * - Modo escuro por padrão (roxo como cor de marca)
 * - Design Tokens (CSS Vars) + componentes coesos pro fórum
 */

/* =========================================================
   0) DESIGN TOKENS
   ========================================================= */
:root{
  /* Marca (roxo) */
  --brand-50:#faf5ff; --brand-100:#f3e8ff; --brand-200:#e9d5ff; --brand-300:#d8b4fe;
  --brand-400:#c084fc; --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce;
  --brand-800:#6b21a8; --brand-900:#581c87; --brand:var(--brand-500);

  /* Plano escuro */
  --bg:#0b0f14; --surface:#0f1520; --surface-2:#121a26; --surface-3:#162231;

  /* Tipos */
  --text:#e5e7eb; --text-2:#f3f4f6; --muted:#9aa3b2;

  /* Estados */
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444; --info:#60a5fa;

  /* UI */
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --ring:rgba(168,85,247,.35);
  --border:1px solid rgba(255,255,255,.08);

  /* Sombras */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 20px 40px rgba(0,0,0,.55);

  /* Layout */
  --container-w:1200px;

  /* Espaços */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* Altura do header + tamanho do degradê roxo do topo */
  --nav-h: 64px;
  --nav-fade: 120px;
}

/* =========================================================
   1) RESET / TIPOGRAFIA / ACESSIBILIDADE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; height:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100%;
  color:var(--text); background:var(--bg);
  font-family:Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{ color:var(--text-2); font-weight:800; letter-spacing:.2px; margin:0 0 8px; }
p{ color:var(--text); line-height:1.65; margin:0 0 10px; }
small,.text-muted{ color:var(--muted)!important; }
a{ color:var(--brand-300); text-decoration:none; }
a:hover{ color:var(--brand-200); text-decoration:underline; }
:where(a,button,[role="button"],input,select,textarea,.card):focus{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* Visually hidden (para labels acessíveis) */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   2) LAYOUT BASE
   ========================================================= */
.container{ width:min(var(--container-w), calc(100% - 32px)); margin-inline:auto; }
.section{ padding:48px 0; }
.hidden{ display:none!important; }
.only-desktop{ display:block; } .only-mobile{ display:none; }
@media (max-width:900px){ .only-desktop{display:none;} .only-mobile{display:block;} }
.mt-2{margin-top:var(--space-2);} .mt-4{margin-top:var(--space-4);} .mt-6{margin-top:var(--space-6);} .mt-8{margin-top:var(--space-8);}
.mb-2{margin-bottom:var(--space-2);} .mb-4{margin-bottom:var(--space-4);} .mb-6{margin-bottom:var(--space-6);} .mb-8{margin-bottom:var(--space-8);}
.p-2{padding:var(--space-2);} .p-4{padding:var(--space-4);} .p-6{padding:var(--space-6);} .p-8{padding:var(--space-8);}
.round{ border-radius:var(--radius-md);} .shadow{ box-shadow:var(--shadow-md); }

/* =========================================================
   3) NAVBAR
   ========================================================= */
.nav{
  position:fixed;          /* <- sempre fixo no topo */
  top:0; left:0; right:0;
  z-index:1100;
  backdrop-filter:blur(10px);
  background:rgba(12,16,23,.82);
  border-bottom:var(--border);
  box-shadow:var(--shadow-sm);
}
.nav .row{ display:flex; align-items:center; gap:12px; min-height:64px; }
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand img{ height:50px; width:auto; border-radius:6px; }
.nav-brand strong{ color:var(--text-2); font-weight:900; letter-spacing:.3px; }
.nav-menu{ display:flex; align-items:center; gap:8px; margin-left:18px; }
.nav-menu a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; color:var(--text);
  transition:background .15s ease;
}
.nav-menu a:hover{ background:var(--surface-3); text-decoration:none; }
.nav-menu .is-active{ background:var(--brand-700); color:#f5e8ff; }
.nav-cta{ display:flex; gap:10px; margin-left:auto; }
.btn{
  appearance:none; border:0; cursor:pointer;
  font-weight:900; padding:10px 16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .04s ease, background .2s ease, color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 4px 10px rgba(168,85,247,.35); }
.btn-brand:hover{ background:var(--brand-400); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); }
.nav-burger{
  margin-left:auto; display:none; border:0; background:transparent;
  padding:10px; border-radius:var(--radius-sm); color:var(--text);
}
.nav-burger svg{ width:24px; height:24px; }
@media (max-width:900px){
  .nav-burger{ display:inline-flex; }
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    background:rgba(12,16,23,.95); border-bottom:var(--border);
    flex-direction:column; gap:6px; padding:12px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:.15s ease;
  }
  .nav-menu.is-open{ transform:translateY(0); opacity:1; pointer-events:all; }
  .nav-cta{ display:flex; gap:8px; margin-left:auto; }
}

header.nav .user-chip .name a,
header.nav .user-chip .name a:visited { color: #fff; }
header.nav .user-chip .name a:hover,
header.nav .user-chip .name a:focus-visible { color: #fff; text-decoration: underline; }

/* Legado mínimo */
#navbar{ all:unset; display:block; }
nav ul,nav li{ list-style:none; margin:0; padding:0; }

/* ===== NAV: Busca compacta (lado direito, sem quebrar) ===== */
.nav-cta{ display:flex; gap:10px; margin-left:auto; align-items:center; flex-wrap:nowrap; }

.nav-search{ display:flex; align-items:center; gap:8px; position:relative; }

.nav-search__btn{
  height:38px; padding:8px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
}

.nav-search__form{ display:flex; align-items:center; }

.nav-search__input{
  height:38px;
  border-radius:12px;
  background:#0d131d; color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  width:0; padding:0;
  opacity:0; border-width:0;
  transition: width .18s ease, padding .18s ease, opacity .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav-search__input::placeholder{ color:#98a3b5; }

.nav-search[data-state="open"] .nav-search__input{
  width:min(44vw, 340px);
  padding:8px 12px;
  opacity:1; border-width:1px;
}
.nav-search[data-state="open"] .nav-search__input:focus{
  border-color:var(--brand-400);
  box-shadow:0 0 0 4px var(--ring);
}

/* Mobile: mantém .nav-cta visível e dá mais largura ao input aberto */
@media (max-width:900px){
  .nav-cta{ display:flex; gap:8px; margin-left:auto; }
  .nav-search[data-state="open"] .nav-search__input{
    width:min(78vw, 520px);
  }
  .nav-search__btn .only-desktop{ display:none; }
}

/* Em telas menores, deixa a busca ocupar linha com o botão */
@media (max-width:900px){
  .nav-search{
    margin-left:0;
    flex:1 1 auto; justify-content:flex-end; gap:6px;
  }
  .nav-search__form{
    width:0;
  }
  .nav-search[data-state="open"] .nav-search__form{
    width: min(70vw, 520px);
  }
  /* Mostra só ícone no mobile pra ficar compacto */
  .nav-search__btn .only-desktop{ display:none; }
}

/* =========================================================
   4) HERO (decor de fundo)
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(168,85,247,.25), transparent 60%),
    radial-gradient(800px 400px at 90% -10%, rgba(126,34,206,.25), transparent 60%),
    var(--bg);
  padding:48px 0 36px; border-bottom:var(--border);
}
.hero .title{ font-size:clamp(28px,5vw,46px); font-weight:900; margin:0 0 12px; }
.hero .subtitle{ font-size:clamp(15px,2.2vw,18px); color:#c5d0dc; margin:0; }
.hero .cta{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* Compat com tua estrutura antiga */
.dad{ height:220px; position:relative; overflow:hidden; }
.dad>.son-1{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.2)); }
.son-text{ display:flex; align-items:center; justify-content:center; height:220px; }

/* =========================================================
   5) GRID / CARDS
   ========================================================= */
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .grid.cols-4{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-md);
  transition:transform .08s ease, box-shadow .2s ease, background .25s;
}
.card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.card > header:not(.topic-hero){ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.card-title{ font-weight:900; }
.card-sub{ color:var(--muted); }

/* =========================================================
   6) TABELAS
   ========================================================= */
.table{
  width:100%; border-collapse:collapse;
  background:var(--surface); border:var(--border); border-radius:var(--radius-md); overflow:hidden;
}
.table thead th{
  text-align:left; font-weight:800; color:#f5e8ff;
  background:linear-gradient(to right, var(--brand-800), var(--brand-700)); border:0!important;
}
.table th,.table td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text); }
.table tbody tr{ transition:background .12s ease; }
.table tbody tr:hover{ background:rgba(168,85,247,.08); }

/* =========================================================
   7) FORMULÁRIOS
   ========================================================= */
label{ color:var(--text-2); font-weight:700; }
input,select,textarea{
  width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#0d131d; color:var(--text); padding:12px 14px; outline:none;
}
input::placeholder,textarea::placeholder{ color:#98a3b5; }
input:focus,select:focus,textarea:focus{ border-color:var(--brand-400); box-shadow:0 0 0 4px var(--ring); }

/* =========================================================
   8) BADGES / PEQUENOS
   ========================================================= */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:var(--surface-2); color:var(--text); font-weight:800; font-size:.86rem;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-300); }

/* =========================================================
   9) FOOTER (inclui sticky)
   ========================================================= */
html,body{ height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
body{ padding-top: var(--nav-h); }
.footer{ background:#0e131b; color:#cfd3dc; margin-top:auto; border-top:1px solid rgba(255,255,255,.06); }
.footer .container{ padding:26px 0; }
.footer a{ color:#f5e8ff; text-decoration:none; }
.footer p{ margin:0; }

/* Redes sociais */
.footer-social{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center;
  list-style:none; margin:0; padding:0;
}
.footer-social li{ margin:0; padding:0; }
.social-link{
  --size:38px; width:var(--size); height:var(--size); border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:var(--surface-2); color:var(--text-2); text-decoration:none; font-weight:900; letter-spacing:.3px;
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.social-link .abbr{ font-size:12px; }
.social-link:active{ transform:translateY(1px); }
.social-link:hover{
  border-color:transparent;
  background:linear-gradient(135deg, var(--brand-700), var(--brand-600));
  box-shadow:0 8px 22px rgba(168,85,247,.25);
  color:#fff;
}
.social-link.youtube:hover{   background:linear-gradient(135deg,#7e22ce,#ef4444); }
.social-link.instagram:hover{ background:
  radial-gradient(20px 20px at 70% 30%, #fef08a 0, transparent 60%),
  radial-gradient(26px 26px at 30% 70%, #fb7185 0, transparent 60%),
  linear-gradient(135deg,#7e22ce,#c084fc); }
.social-link.x:hover{         background:linear-gradient(135deg,#7e22ce,#111827); }
.social-link.facebook:hover{  background:linear-gradient(135deg,#7e22ce,#3b82f6); }
.social-link.linkedin:hover{  background:linear-gradient(135deg,#7e22ce,#0ea5e9); }
.social-link.github:hover{    background:linear-gradient(135deg,#7e22ce,#6b7280); }

/* =========================================================
   10) BACK TO TOP / TOOLTIP
   ========================================================= */
.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:1000;
  width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); cursor:pointer; opacity:0; transform:translateY(8px); transition:.15s ease;
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; pointer-events:none; }
.tooltip{ position:relative; }
.tooltip:hover::after{
  content:attr(data-title);
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 8px);
  background:#0d131d; color:#eaf7fa; font-size:12px; padding:6px 8px; border-radius:8px;
  border:1px solid rgba(255,255,255,.08); white-space:nowrap;
}

/* =========================================================
   11) COMPONENTES DO FÓRUM
   ========================================================= */
.forum-nav{
  display:flex; gap:8px; padding:10px; border:var(--border); background:var(--surface-2); border-radius:var(--radius-md);
}
.forum-nav a{ padding:8px 12px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:800; }
.forum-nav a:hover{ background:var(--surface-3); }
.forum-nav a.is-active{ background:var(--brand-700); color:#f5e8ff; }

.thread-list{ display:grid; gap:12px; }
.thread-card{
  background:var(--surface); border:var(--border); border-radius:var(--radius-md);
  padding:14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  transition:background .12s ease, transform .04s ease; box-shadow:var(--shadow-sm);
}
.thread-card:hover{ background:var(--surface-2); transform:translateY(-1px); }
.thread-card .avatar{ width:44px; height:44px; border-radius:10px; object-fit:cover; background:#0d131d; }
.thread-card .title{ font-weight:900; color:var(--text-2); }
.thread-card .meta{ color:var(--muted); font-size:13px; }

.post{
  background:var(--surface); border:var(--border); border-radius:var(--radius-md);
  padding:14px; display:grid; grid-template-columns:64px 1fr; gap:14px; box-shadow:var(--shadow-sm);
}
.post .author{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.post .author .avatar{ width:56px; height:56px; border-radius:14px; background:#0d131d; object-fit:cover; }
.post .author .name{ font-weight:900; font-size:13px; color:var(--text-2); text-align:center; }
.post .content{ color:var(--text); line-height:1.7; }
.post .meta{ display:flex; gap:10px; color:var(--muted); font-size:12px; margin-top:6px; }
.role-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:900; font-size:11px; }
.role-admin{ background:rgba(239,68,68,.16); color:#fecaca; }
.role-mod{ background:rgba(96,165,250,.16); color:#cfe3ff; }
.role-member{ background:rgba(34,197,94,.16); color:#d3f8df; }
.post-actions{ display:flex; gap:8px; margin-top:6px; }
.post-actions .btn{ padding:8px 12px; border-radius:10px; font-weight:800; }
.post-actions .btn-like{ background:rgba(34,197,94,.16); color:#aff5c2; }
.post-actions .btn-like:hover{ background:rgba(34,197,94,.22); }
.post-actions .btn-reply{ background:var(--brand); color:#fff; }
.post-actions .btn-reply:hover{ background:var(--brand-400); }
.editor{ background:var(--surface-2); border:var(--border); border-radius:var(--radius-md); padding:12px; display:grid; gap:10px; }
.editor .toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
.editor .toolbar .btn{ padding:8px 12px; border-radius:10px; }
.editor textarea{ min-height:140px; }
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; }
.pagination a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; color:var(--text); background:var(--surface-2); border:var(--border);
}
.pagination a:hover{ background:var(--surface-3); }
.pagination a.is-active{ background:var(--brand-700); color:#f5e8ff; border-color:transparent; }

/* =========================================================
   12) LEGADO / UTIL
   ========================================================= */
.son-span,.son-text,.dad,footer{ font-family:Inter, Roboto, system-ui, -apple-system, sans-serif; }
.dad a,.dad a:hover{ color:#f5e8ff; text-decoration:none; }
@keyframes floatUp{ from{ transform:translateY(6px); opacity:.0; } to{ transform:translateY(0); opacity:1; } }
.fade-in{ animation:floatUp .25s ease both; }
@media print{
  .nav,.footer,.back-to-top{ display:none!important; }
  a{ color:#000; text-decoration:underline; }
}
[hidden]{ display:none!important; }

/* Grid compat simples (footer atual) */
.row{ display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
[class^="col-"],[class*=" col-"]{ padding-left:8px; padding-right:8px; }
.col-md-3{ flex:0 0 25%; max-width:25%; }
.col-md-6{ flex:0 0 50%; max-width:50%; }
@media (max-width:900px){ .col-md-3,.col-md-6{ flex-basis:100%; max-width:100%; } }

/* =========================================================
   13) LOGIN MODAL (prefixo intro-)
   ========================================================= */
.vstack.gap{ display:grid; gap:12px; }
.form label{ display:grid; gap:6px; font-weight:800; color:var(--text-2); }
.form .checkbox{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.form .actions{ display:flex; gap:10px; margin-top:6px; }
.password-field{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.tiny{ padding:6px 10px!important; border-radius:8px!important; font-size:12px; }
.intro-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:1000; }
.intro-modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1001; }
.intro-modal-card{
  width:min(440px, calc(100% - 32px)); background:var(--surface); border:var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:16px; animation:floatUp .2s ease both;
}
.intro-modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.intro-modal-header h3{ margin:0; font-weight:900; }
.intro-modal-close{
  background:transparent; border:0; color:var(--text); font-size:24px;
  width:36px; height:36px; border-radius:var(--radius-sm); cursor:pointer;
}
.intro-modal-close:hover{ background:var(--surface-3); }
.alert{ padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:var(--surface-2); }
.alert.danger{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12); color:#ffd5d5; }

/* Chip do usuário logado */
.user-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface-2); border:var(--border); border-radius:999px;
  padding:6px 8px; box-shadow:var(--shadow-sm);
}
.user-chip .avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:#0d131d; }
.user-chip .name{ font-weight:900; color:var(--text-2); }
.user-chip .inline{ display:inline; }

/* =========================================================
   14) PÁGINA: MEMBROS
   ========================================================= */
.members-group + .members-group{ margin-top:28px; }
.members-title{
  margin:0 0 10px; font-size:12px; letter-spacing:1.2px; font-weight:900; color:#f5e8ff;
  border-left:3px solid var(--brand-600); padding-left:10px; text-transform:uppercase;
}
.members-grid{ display:grid; gap:12px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .members-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){  .members-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){  .members-grid{ grid-template-columns:1fr; } }
.member-card{ text-align:center; padding-top:20px; padding-bottom:16px; }
.member-avatar{
  width:72px; height:72px; border-radius:16px; object-fit:cover; display:block; margin:4px auto 10px;
  background:#0d131d; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-sm);
}
.member-name{ font-weight:900; color:var(--text-2); }
.member-role{ justify-content:center; margin:6px auto; }
.member-desc{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.5; }

/* =========================================================
   15) PÁGINA: PERFIL DO USUÁRIO
   ========================================================= */
.profile-banner{
  position:relative; overflow:hidden;
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(600px 320px at 85% -10%, rgba(124,58,237,.18), transparent 60%),
    var(--surface);
  border:var(--border);
}
.profile-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; filter:saturate(1.1); }
.profile-banner-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55)); }
.profile-header{
  position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:end; padding:20px;
}
.profile-avatar{
  width:96px; height:96px; border-radius:22px; object-fit:cover; background:#0d131d; border:2px solid rgba(255,255,255,.18); box-shadow:var(--shadow-md);
}
.profile-id{ display:grid; gap:6px; align-content:center; }
.profile-name{ font-size:clamp(20px,3.2vw,28px); font-weight:900; color:var(--text-2); }
.profile-stats{ display:grid; grid-auto-flow:column; gap:12px; align-items:end; }
.stat{
  min-width:110px; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; text-align:center; box-shadow:var(--shadow-sm);
}
.stat .num{ font-weight:900; font-size:20px; color:var(--text-2); }
.stat .lbl{ font-size:12px; color:var(--muted); letter-spacing:.3px; text-transform:uppercase; }
@media (max-width:900px){
  .profile-header{ grid-template-columns:auto 1fr; align-items:center; }
  .profile-stats{ grid-column:1 / -1; justify-content:space-between; }
  .stat{ min-width:0; width:100%; }
}
.profile-longdesc{ margin-top:8px; line-height:1.75; color:var(--text); }
.last-mentions .empty{ font-size:.95rem; padding:8px 0; }

/* =========================================================
   16) PÁGINA: HOME (mensagens, stats, off-topic, anos/meses)
   ========================================================= */
/* Split hero (Welcome + Notice) */
.split-hero .card{
  position:relative; border:var(--border);
  background:
    radial-gradient(820px 320px at 10% -20%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(600px 220px at 110% -20%, rgba(124,58,237,.12), transparent 60%),
    var(--surface);
}
.split-header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.split-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand-700), var(--brand-500)); box-shadow:0 0 0 4px rgba(168,85,247,.18); }
.split-text{ color:var(--text); line-height:1.75; }
.welcome-card .title,.notice-card .title{ margin:0; }

/* Player / Stats */
.audio-player{ width:100%; background:var(--surface-2); border:var(--border); border-radius:var(--radius-md); }
.stat-card{ text-align:center; }
.stat-card .stat-num{ font-weight:900; font-size:22px; color:var(--text-2); }
.stat-card .stat-lbl{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); }

.video-player{
  width: 100%;
  background: var(--surface-2);
  border: var(--border);
  border-radius: var(--radius-md);
  display: block;
  overflow: hidden;          /* garante o corte nos cantos arredondados */
  aspect-ratio: 16 / 9;      /* mantém 16:9 responsivo */
  object-fit: cover;         /* preenche sem deformar (usa o poster até carregar) */
}

/* Deixa os controles “transparentes” pra cor de fundo aparecer (WebKit) */
.video-player::-webkit-media-controls-enclosure{
  background: transparent;
  border-radius: inherit;
}

/* Acessibilidade: anel de foco bonitinho */
.video-player:focus-visible{
  outline: 2px solid var(--focus-ring, #8b5cf6);
  outline-offset: 2px;
}

/* Off-topic */
.list-plain{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.offtopic-list{ margin-top:6px; }
.offtopic-item{
  display:block; padding:10px 12px; border-radius:12px;
  background:var(--surface-2); border:var(--border); text-decoration:none; color:var(--text);
  transition:background .15s ease, transform .05s ease;
}
.offtopic-item:hover{ background:var(--surface-3); transform:translateY(-1px); }
.offtopic-title{ font-weight:900; color:var(--text-2); }
.offtopic-meta{ font-size:12px; }

/* Ano (wrapper + card) */
.year-wrap{ margin-top:34px; padding-top:12px; position:relative; }
.year-wrap::before{
  content:""; position:absolute; left:-8px; top:0; bottom:-6px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(168,85,247,.0), rgba(168,85,247,.45), rgba(168,85,247,.0));
}
.year-card{
  display:grid; gap:6px; margin-bottom:10px;
  background:radial-gradient(500px 220px at 100% -50%, rgba(168,85,247,.15), transparent 60%), var(--surface);
}
.year-card-top{ display:flex; align-items:center; gap:10px; }
.year-chip{
  padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px;
  background:linear-gradient(135deg, var(--brand-700), var(--brand-600)); color:#fff;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-sm);
}
.year-name{ margin:0; font-size:clamp(16px,2.6vw,20px); font-weight:900; color:var(--text-2); }
.year-meta{ color:var(--muted); font-size:13px; display:flex; gap:8px; }

/* ===== Meses (apenas existentes) ===== */
.month-grid{ display:grid; gap:12px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .month-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){  .month-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){  .month-grid{ grid-template-columns:1fr; } }

/* ===== Month card (com correção do link esticado) ===== */
.month-card{
  position: relative;               /* ancora o link absoluto ao card */
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface); border: var(--border); box-shadow: var(--shadow-md);
  transition: transform .08s ease, box-shadow .2s ease, background .25s;
  color: inherit; text-decoration: none;
}
.month-card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }

/* link que cobre o card inteiro */
.month-card .stretched-link{
  position: absolute; inset: 0; z-index: 1;
  display: block; border-radius: inherit; outline: none;
}
.month-card:focus-within{ outline: 3px solid var(--ring); outline-offset: 2px; }

/* conteúdo acima do link esticado */
.month-card .month-media,
.month-card .month-body{ position: relative; z-index: 2; }

/* links internos clicáveis por cima */
.month-title a,
.month-highlight .topic-title,
.month-highlight .topic-link{ position: relative; z-index: 3; }


/* ===== Media / overlay / chip ===== */
.month-media{
  position: relative; height: 170px; overflow: hidden;
  background: linear-gradient(180deg, #0f1520 0%, #101726 100%);
}
.month-media.no-img::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(420px 220px at 85% -15%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(180deg, #141b2a 0%, #101726 100%);
}
.month-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); }

.month-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 65%, rgba(0,0,0,.6) 100%),
    radial-gradient(420px 220px at 85% -15%, rgba(168,85,247,.22), transparent 60%);
}

.month-chip{
  position:absolute; right:10px; top:10px;
  padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px;
  background:linear-gradient(135deg, var(--brand-700), var(--brand-600)); color:#fff;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-sm);
}

/* ===== Corpo do card ===== */
.month-body{ padding:12px 12px 14px; display:grid; gap:6px; }
.month-title{
  font-weight:900; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== Destaque do mês (topic-link bonito) ===== */
.month-highlight{
  font-size:.95rem;
  display: grid;
  gap: 6px;
  align-items: start;
}
/* clamp p/ não quebrar layout */
.month-highlight a,
.month-highlight span{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.month-highlight a{ color:var(--brand-300); text-decoration:none; }
.month-highlight a:hover{ color:var(--brand-200); text-decoration:underline; }










/* chip “Destaque:” */
.month-highlight .text-muted{
  font-size:11px; letter-spacing:.3px; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  width:fit-content;
}

/* cartão do tópico */
.month-highlight .topic-link{
  position: relative;
  display: block;
  padding: 10px 12px 10px 20px;      /* espaço pro detalhe à esquerda */
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  color: var(--text);
  outline: none;
}
.month-highlight .topic-link:hover{
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.10));
  border-color: rgba(168,85,247,.28);
  box-shadow: 0 8px 22px rgba(168,85,247,.18);
  transform: translateY(-1px);
}
.month-highlight .topic-link:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* filetinho roxo à esquerda do cartão */
.month-highlight .topic-link::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:4px; height:70%; border-radius:6px;
  background:linear-gradient(180deg, var(--brand-600), var(--brand-400));
  opacity:.9;
}

/* título + meta */
.month-highlight .topic-title,
.month-highlight .t{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; line-height:1.25;
  font-weight:900; color:var(--text-2); margin:0 0 4px;
}
.month-highlight .topic-meta,
.month-highlight .meta{
  font-size:12px; color:var(--muted); letter-spacing:.2px;
}

/* ===== Forum: header do mês (hero) ===== */
.forum-month-hero{ position:relative; }
.forum-month-hero__media{ position:absolute; inset:0; overflow:hidden; }
.forum-month-hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(1.05); }
.forum-month-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55)); }
.forum-month-hero__content{ position:relative; z-index:1; padding:16px; }

/* ===== Tag list ===== */
.taglist{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  padding:4px 8px; border-radius:999px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-size:12px; font-weight:800;
}

/* ===== Topic page ===== */
.topic-card{ overflow: hidden; }
.topic-head{ display:grid; gap:10px; }
.topic-title{ margin:0; font-size: clamp(20px,3vw,32px); font-weight: 900; color: var(--text-2); }
.topic-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color: var(--muted); }
.topic-meta .sep{ opacity:.6; }

.topic-tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: var(--surface-2); color: var(--text); text-decoration:none; font-weight:800; font-size:.86rem;
}
.tag-chip:hover{ background: var(--surface-3); }

.topic-actions{ display:flex; gap:8px; margin-top: 2px; }
.topic-sep{ border:0; height:1px; background: rgba(255,255,255,.08); margin: 10px 0; }
.topic-content{ line-height:1.8; color: var(--text); }

/* Tags editor (chips) */
.tags-editor{
  display:flex; flex-wrap:wrap; gap:6px; padding:8px; border: var(--border);
  border-radius: 12px; background: var(--surface-2);
}
.tags-editor .chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-weight:800; font-size:.86rem;
}
.tags-editor .chip .x{ background: transparent; border:0; color: var(--text); font-size:14px; cursor:pointer; }
.tags-editor .tags-input{
  border:0; background: transparent; color: var(--text); outline: none; min-width: 120px;
}

/* ===== Topic page ===== */
.topic-card{ overflow: hidden; }
.topic-head{ display:grid; gap:10px; }
.topic-title{ margin:0; font-size: clamp(20px,3vw,28px); font-weight: 900; color: var(--text-2); }
.topic-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color: var(--muted); }
.topic-meta .sep{ opacity:.6; }
.topic-tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: var(--surface-2); color: var(--text); text-decoration:none; font-weight:800; font-size:.86rem;
}
.tag-chip:hover{ background: var(--surface-3); }
.topic-actions{ display:flex; gap:8px; margin-top: 2px; }
.topic-sep{ border:0; height:1px; background: rgba(255,255,255,.08); margin: 10px 0; }
.topic-content{ line-height:1.8; color: var(--text); }

/* ===== WYS Editor ===== */
.wys-editor{ border: var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.wys-toolbar{
  display:flex; flex-wrap:wrap; gap:6px; padding:8px; border-bottom: 1px solid rgba(255,255,255,.06);
  background: var(--surface-3);
}
.wys-toolbar .sep{ width:1px; height:24px; background: rgba(255,255,255,.12); align-self:center; }
.wys-btn{
  border:1px solid rgba(255,255,255,.14); background: transparent; color: var(--text);
  padding:6px 10px; border-radius: 10px; font-weight: 800; cursor: pointer;
}
.wys-btn:hover{ background: rgba(255,255,255,.08); }
.wys-btn.ghost{ opacity:.9; }
.wys-btn.file{ position: relative; overflow: hidden; }
.wys-upload{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.wys-area{
  min-height: 240px; padding: 12px; outline: none;
  background: #0d131d;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.wys-source{
  width: 100%; padding:12px; border:0; outline: none;
  background: #0d131d; color: var(--text);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* ===== Hero visual igual ao perfil (já existente), só garantindo proporção ===== */
.forum-month-hero__media{ position: relative; height: 220px; overflow: hidden; border-radius: var(--radius-md); }
.forum-month-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:.9; filter: saturate(1.05) contrast(1.03); }
.forum-month-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45) 60%, rgba(0,0,0,.6)); }
.forum-month-hero__glow{
  position:absolute; inset:-20% -10% 0 -10%;
  background: radial-gradient(800px 300px at 10% -30%, rgba(168,85,247,.16), transparent 60%),
              radial-gradient(600px 220px at 110% -30%, rgba(124,58,237,.12), transparent 60%);
}
.forum-month-hero__content{ padding: 14px 0 0; }

/* ===== TÓPICO (view) ===== */
.topic-hero{ display:grid; gap:8px; margin-bottom:6px; }
.topic-hero-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.topic-type-badge{
  padding: 6px 12px;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 28px); /* levemente maior que o título */
  line-height: 1;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 6px 20px rgba(168,85,247,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.topic-title{
  margin: 0;
  font-size: clamp(22px, 2.8vw, 26px);
  font-weight: 900;
  color: var(--text-2);
}
.vis-badge{
  padding: 4px 8px; border-radius:999px;
  font-size: 11px; font-weight:900; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.10);
}
.vis-private{  background:rgba(239,68,68,.15);  color:#fecaca; }
.vis-unlisted{ background:rgba(250,204,21,.16); color:#fde68a; }

.topic-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid rgba(255,255,255,.12);
  color:var(--text); text-decoration:none; font-weight:800; font-size:.86rem;
}
.tag-badge::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand-600), var(--brand-400));
  box-shadow:0 0 0 3px rgba(168,85,247,.18);
}
/* tags menores na view */
.tag-badge--sm{ padding:5px 8px; font-size:12px; }

.topic-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:13px; }
.topic-meta .sep{ opacity:.6; }
.topic-crumb{ color:var(--brand-300); text-decoration:none; }
.topic-crumb:hover{ color:var(--brand-200); text-decoration:underline; }

.topic-content{ margin-top:8px; color:var(--text); line-height:1.8; }
.topic-content pre{ background:#0d131d; border:1px solid rgba(255,255,255,.08); padding:12px; border-radius:12px; overflow:auto; }

/* ===== Editor ===== */
.topic-editor__head{ margin-bottom:6px; }
.topic-editor__title{ margin:0; font-weight:900; }

.tags-editor{
  display:grid; gap:8px; padding:10px; border-radius:12px;
  background:var(--surface-2); border:var(--border);
}
.tags-editor--compact .chip{ padding:5px 8px; font-size:12px; }
.tags-editor__chips{ display:flex; gap:6px; flex-wrap:wrap; }
.tags-editor input[type="text"]{ background:#0e1420; border-color:rgba(255,255,255,.12); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800; color:var(--text);
}
.chip--sm{ padding:5px 8px; font-size:12px; }
.chip-dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--brand-600), var(--brand-400)); }
.chip-x{ appearance:none; border:0; background:transparent; color:var(--muted); font-size:16px; cursor:pointer; line-height:1; }
.chip-x:hover{ color:#fff; }

.wys-toolbar{ display:flex; flex-wrap:wrap; gap:6px; padding:8px; border-radius:12px 12px 0 0; background:var(--surface-2); border:var(--border); border-bottom:0; }
.wys-toolbar button{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background:#0e1420; color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:800;
}
.wys-toolbar .sep{ width:1px; background:rgba(255,255,255,.08); margin:0 4px; }

.wys-area{ border:var(--border); border-radius:0 0 12px 12px; overflow:hidden; }
.wys-content,.wys-source{ min-height:280px; padding:12px; width:100%; outline:none; }
.wys-content{ background:#0d131d; color:var(--text); }
.wys-source{
  display:none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:#0b111c; color:#e6e6e6; border:0; resize:vertical;
}
.topic-headline .grid>label input,
.topic-headline .grid>label select{ margin-top:4px; }

    /* View: topo mais “colado” (tipo + título) e tags menores logo abaixo */
    .topic-hero{ display:grid; gap:8px; }
    .topic-hero-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
    .topic-type-badge{
      font-size:12px; letter-spacing:.3px; text-transform:uppercase; font-weight:900;
      padding:4px 8px; border-radius:999px;
      background:linear-gradient(135deg, var(--brand-700), var(--brand-600));
      color:#fff; border:1px solid rgba(255,255,255,.10);
    }
    .topic-title{ margin:0; line-height:1.1; }
    .vis-badge{
      font-size:11px; letter-spacing:.3px; text-transform:uppercase; font-weight:900;
      padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04); color:#ffdede;
    }
    .vis-private{ color:#ffdede; }
    .vis-unlisted{ color:#e6e6ff; }
    .topic-tags{ display:flex; flex-wrap:wrap; gap:6px; }
    .tag-badge{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
      background:var(--surface-2); border:1px solid rgba(255,255,255,.12); color:var(--text);
      text-decoration:none; font-weight:800;
    }
    .tag-badge--sm{ font-size:11px; padding:4px 8px; }
    .topic-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
    .topic-crumb{ color:var(--brand-300); text-decoration:none; }
    .topic-crumb:hover{ color:var(--brand-200); text-decoration:underline; }
    .topic-content{ margin-top:10px; line-height:1.8; }

/* Editor: texto padrão sem bold */
.wys-content{ font-weight: 400; }

/* Quando for bold, só se tiver <b> ou <strong> */
.wys-content b,
.wys-content strong{ font-weight: 700; }

/* Editor compacto e bonitinho (usa tokens do style.css global) */
      .topic-editor__title{ margin:0 0 6px; font-weight:900; }
      .tags-editor{ display:grid; gap:8px; background:var(--surface-2); border:var(--border); border-radius:12px; padding:10px; }
      .tags-editor--compact .chip{ font-size:12px; padding:4px 8px; }
      .tags-editor__chips{ display:flex; flex-wrap:wrap; gap:6px; }
      .chip{ display:inline-flex; align-items:center; gap:6px; font-weight:800; border-radius:999px; border:1px solid rgba(255,255,255,.12); padding:6px 10px; background:rgba(255,255,255,.04); }
      .chip--sm{ font-size:12px; padding:4px 8px; }
      .chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-400); }
      .chip-x{ background:transparent; border:0; color:var(--text); font-weight:900; cursor:pointer; }

      .field .field-label{ display:block; font-weight:800; color:var(--text-2); margin: 6px 0 6px; }

      .wys-toolbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--surface-2); border:var(--border); border-radius:12px; padding:8px; }
      .wys-toolbar .sep{ width:1px; height:22px; background:rgba(255,255,255,.10); margin:0 2px; }
      .wys-toolbar button{ padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#0d131d; color:var(--text); cursor:pointer; }
      .wys-toolbar button:hover{ background:var(--surface-3); }

      .wys-area{ border:var(--border); border-radius:12px; background:var(--surface); }
      .wys-content{ min-height:260px; padding:12px; outline:none; font-weight:400; } /* sem bold por padrão */
      .wys-content b, .wys-content strong{ font-weight:700; }                      /* bold só via <b>/<strong> */
      .wys-source{ display:none; width:100%; min-height:260px; padding:12px; background:#0d131d; color:var(--text); border:0; border-radius:12px; }

/* Toolbar / Inserir menu */
      .insert-wrap{ position:relative; display:inline-block; }
      .btn-insert{
        border:1px solid rgba(255,255,255,.14); background: transparent; color: var(--text);
        padding:6px 10px; border-radius: 10px; font-weight: 800; cursor: pointer;
      }
      .btn-insert:hover{ background: rgba(255,255,255,.08); }
      .insert-menu{
        position:absolute; top:110%; left:0; z-index:20; min-width:220px;
        background:var(--surface-2); border:1px solid rgba(255,255,255,.12);
        border-radius:12px; box-shadow: var(--shadow-lg); padding:6px;
        display:grid; gap:4px;
      }
      .insert-menu button{
        text-align:left; width:100%;
        border:1px solid transparent; background:transparent; color:var(--text);
        padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:800;
      }
      .insert-menu button:hover{ background:var(--surface-3); border-color:rgba(255,255,255,.06); }
      .insert-menu .menu-sep{ height:1px; background:rgba(255,255,255,.08); margin:4px 0; }
      .insert-menu .menu-empty{ color:var(--muted); padding:6px 8px; font-size:12px; }

      /* Editor compacto */
      .topic-editor__title{ margin:0 0 6px; font-weight:900; }
      .tags-editor{ display:grid; gap:8px; background:var(--surface-2); border:var(--border); border-radius:12px; padding:10px; }
      .tags-editor--compact .chip{ font-size:12px; padding:4px 8px; }
      .tags-editor__chips{ display:flex; flex-wrap:wrap; gap:6px; }
      .chip{ display:inline-flex; align-items:center; gap:6px; font-weight:800; border-radius:999px; border:1px solid rgba(255,255,255,.12); padding:6px 10px; background:rgba(255,255,255,.04); }
      .chip--sm{ font-size:12px; padding:4px 8px; }
      .chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-400); }
      .chip-x{ background:transparent; border:0; color:var(--text); font-weight:900; cursor:pointer; }

      .wys-toolbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--surface-2); border:var(--border); border-radius:12px; padding:8px; }
      .wys-toolbar .sep{ width:1px; height:22px; background:rgba(255,255,255,.10); margin:0 2px; }
      .wys-toolbar button{ padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#0d131d; color:var(--text); cursor:pointer; }
      .wys-toolbar button:hover{ background:var(--surface-3); }
      .wys-area{ border:var(--border); border-radius:12px; background:var(--surface); }
      .wys-content{ min-height:280px; padding:12px; outline:none; }
      .wys-source{ display:none; width:100%; min-height:280px; padding:12px; background:#0d131d; color:var(--text); border:0; border-radius:12px; }

      /* Embeds básicos */
      .embed{ margin:10px 0; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
/* wrapper já ocupa 100% da largura do conteúdo */
.embed{
  margin:10px 0;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* iframe 100% de largura com proporção 16:9 */
.embed iframe{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;   /* 👈 mantém 16:9 e cresce/encolhe com o container */
  border:0;
}

.embed{ position:relative; }
.embed::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 = 9/16 */
.embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

.topic-content iframe[src*="youtube.com/embed"]{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  display:block;
}


/* ==== FIX: alinhar o badge do tipo com o título ==== */
.topic-hero--stack .topic-hero-line{
  align-items: center !important; /* em vez de baseline */
}

/* garante que os chips tenham altura justa e centralizem o texto */
.topic-type-badge,
.vis-badge{
  display: inline-flex;
  align-items: center;
  line-height: 1; /* sem espaço extra vertical */
}

/* (opcional) micro-ajuste se ainda parecer 1px abaixo em algum SO/font */
.topic-hero--stack .topic-type-badge{
  transform: translateY(3px);
}



      /* ===== Ajustes visuais (pode mover para style.css se quiser) ===== */
      .topic-title--xl{ font-size: clamp(28px, 3.6vw, 48px); line-height:1.15; margin:4px 0 6px; font-weight:900; }
      .topic-type-badge--lg{ font-size: 13px; padding: 6px 12px; border-radius: 12px; letter-spacing:.04em; font-weight:900; }
      .topic-hero .topic-tags{ margin-top: 8px; }

      /* Autocomplete de tags */
      .tags-editor{ position:relative; }
      .tags-suggest{ margin-top:6px; border:1px solid rgba(255,255,255,.12); background:var(--surface-2); border-radius:10px; overflow:hidden; }
      .tags-suggest .tag-sug{ display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; color:var(--text); border:0; cursor:pointer; }
      .tags-suggest .tag-sug:hover, .tags-suggest .tag-sug.is-active{ background:var(--surface-3); }

      /* Editor (mantém seus estilos) */
      .topic-editor__title{ margin:0 0 6px; font-weight:900; }
      .tags-editor--compact .chip{ font-size:12px; padding:4px 8px; }
      .tags-editor__chips{ display:flex; flex-wrap:wrap; gap:6px; }
      .chip{ display:inline-flex; align-items:center; gap:6px; font-weight:800; border-radius:999px; border:1px solid rgba(255,255,255,.12); padding:6px 10px; background:rgba(255,255,255,.04); }
      .chip--sm{ font-size:12px; padding:4px 8px; }
      .chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-400); }
      .chip-x{ background:transparent; border:0; color:var(--text); font-weight:900; cursor:pointer; }
      .wys-toolbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--surface-2); border:var(--border); border-radius:12px; padding:8px; }
      .wys-toolbar .sep{ width:1px; height:22px; background:rgba(255,255,255,.10); margin:0 2px; }
      .wys-toolbar button{ padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#0d131d; color:var(--text); cursor:pointer; }
      .wys-toolbar button:hover{ background:var(--surface-3); }
      .wys-area{ border:var(--border); border-radius:12px; background:var(--surface); }
      .wys-content{ min-height:260px; padding:12px; outline:none; }
      .wys-source{ display:none; width:100%; min-height:260px; padding:12px; background:#0d131d; color:var(--text); border:0; border-radius:12px; }

/* TÍTULO bem grande */
.topic-title--xl{
  font-size: clamp(32px, 0vw, 32px);
  line-height: 1.0;
  margin: 0px 0 0px;
  font-weight: 1000;
  letter-spacing: 0em;
}

/* BADGE do tipo maior */
.topic-type-badge--lg{
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 14px;
  font-weight: 900;
}

/* ===== Topic hero: [TIPO] TÍTULO | (direita) TAGS + META ===== */
.topic-hero--stack{
  display: grid;
  grid-template-columns: 1fr minmax(300px, 40%);
  grid-template-areas:
    "title tags"
    "title meta";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
}

/* Coluna esquerda: tipo + título na mesma linha */
.topic-hero--stack .topic-hero-line{
  grid-area: title;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;           /* evita quebra feia do título */
}

/* Coluna direita (topo): TAGS (podem quebrar em várias linhas) */
.topic-hero--stack .topic-tags{
  grid-area: tags;
  justify-self: end;      /* encosta à direita */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

/* Coluna direita (embaixo): META (ano/mês, publicado, visus, editar) */
.topic-hero--stack .topic-meta{
  grid-area: meta;
  justify-self: end;      /* encosta à direita */
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Evita que pedaços do meta quebrem no meio */
.topic-meta .meta-item{ white-space: nowrap; }

/* Responsivo: empilha em telas menores */
@media (max-width: 760px){
  .topic-hero--stack{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "tags"
      "meta";
  }
  .topic-hero--stack .topic-tags,
  .topic-hero--stack .topic-meta{
    justify-self: start;
    text-align: left;
  }
}



/* Fix: manter [TIPO] + TÍTULO na MESMA linha mesmo com muitas tags */
.topic-hero--stack .topic-hero-line{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: nowrap;      /* <- não quebra a linha do flex */
  min-width: 0;
}
.topic-hero--stack .topic-type-badge{
  flex: 0 0 auto;         /* o badge não encolhe */
}
.topic-hero--stack .topic-title{
  flex: 1 1 auto;         /* ocupa o restante */
  min-width: 0;           /* permite encolher sem estourar */
  overflow-wrap: anywhere;/* quebra dentro de palavras enormes se precisar */
}

/* ============== Topic hero em duas colunas ============== */
.topic-hero--two{
  display:grid;
  grid-template-columns: 1fr auto; /* esquerda cresce, direita compacta */
  gap:10px;
  align-items:start;
}
.topic-hero__left{ min-width:0; }
.topic-hero__title-line{
  display:flex; align-items:baseline; gap:12px;
  flex-wrap:nowrap; min-width:0;
}
.topic-hero__title-line .topic-title{
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere;
}

.topic-hero__right{
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-end; text-align:right;
}
.topic-hero__right .topic-tags{ justify-content:flex-end; }
.topic-hero__right .topic-meta{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}

/* Mobile: empilha tudo bonitinho */
@media (max-width: 780px){
  .topic-hero--two{ grid-template-columns:1fr; }
  .topic-hero__right{ align-items:flex-start; text-align:left; }
  .topic-hero__right .topic-tags{ justify-content:flex-start; }
  .topic-hero__title-line{ flex-wrap:wrap; }
}


/* Topic editor: grid do cabeçalho do form e espaçamentos */
.topic-editor .topic-headline { display:grid; gap:12px; }
@media (min-width: 860px){
  .topic-editor .topic-headline { grid-template-columns: 1fr 2fr 1fr; }
}
.topic-editor .date-inline{
  display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center;
}

/* Sempre mostrar as tags atuais (chips) */
.tags-editor--compact .tags-editor__chips{
  display: flex !important;
  gap: 6px;
  flex-wrap: wrap;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Se existir alguma regra escondendo fora do foco, neutraliza: */
.tags-editor--compact:not(:focus-within) .tags-editor__chips{
  display: flex !important;
}

/* força chips visíveis no editor */
#tagsEditor .tags-editor__chips{ display:flex!important; flex-wrap:wrap; gap:6px; }

/* ===== Destaque (mês): título + tipo lado a lado ===== */
.month-highlight .topic-title-row{
  display:flex;
  align-items:center;   /* alinha o badge com o título */
  gap:8px;
  min-width:0;
}
.month-highlight .topic-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Badge de tipo mais compacto para cards do mês */
.topic-type-badge--sm{
  display:inline-flex;
  align-items:center;
  line-height:1;
  font-size:11px;
  padding:4px 8px;
  border-radius:10px;
}








/* === REAJUSTE: Destaque do mês (um pouco maior) === */
.month-highlight .topic-link{
  padding: 10px 12px 10px 18px;
  border-radius: 12px;
}
.month-highlight .topic-link::before{
  left: 8px;
  width: 4px;
  height: 65%;
}

.month-highlight .topic-title-row{
  gap: 8px;
  align-items: center;
}

.month-highlight .topic-type-badge--sm{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  line-height: 1;
}

.month-highlight .topic-title{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  margin: 0;
}

.month-highlight .topic-meta{
  font-size: 12.5px;
  margin-top: 3px;
}

/* Drive embed responsivo (sem precisar do wrapper) */
.topic-content iframe[src*="drive.google.com/file/"],
iframe[src*="drive.google.com/file/"]{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  border:0;
}

/* ===== Spoiler (compat IPB + versão nativa) ===== */
.spoiler,
.ipsSpoiler{
  background:var(--surface-2);
  border:var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* Cabeçalho */
.spoiler__header,
.ipsSpoiler_header{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  color:var(--text-2);
  font-weight:900;
  border:0;
  cursor:pointer;
  text-align:left;
}
.spoiler__header:hover,
.ipsSpoiler_header:hover{ background:var(--surface-3); }

/* Título */
.spoiler__title,
.ipsSpoiler_header span{ flex:1 1 auto; }

/* Caret (versão nativa) */
.spoiler__caret{
  width:20px; height:20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  display:grid; place-items:center;
  transition:transform .15s ease;
}
.spoiler__caret::before{
  content:"";
  width:8px; height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  opacity:.85;
}

/* Conteúdo */
.spoiler__content,
.ipsSpoiler_contents{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--surface);
}

/* Estado aberto/fechado */
.spoiler.is-open .spoiler__caret{ transform:rotate(90deg); }
.ipsSpoiler.is-open .ipsSpoiler_header{ background:var(--surface-3); }

/* Pequenos ajustes de imagens dentro do spoiler */
.spoiler__content img,
.ipsSpoiler_contents img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

/* (opcional) visual igual ao resto, caso ainda não tenha colado meu CSS anterior */
.ipsSpoiler,
.spoiler{
  background:var(--surface-2);
  border:var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ipsSpoiler_header,
.spoiler__header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; font-weight:900; color:var(--text-2);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  cursor:pointer;
}
.ipsSpoiler_contents,
.spoiler__content{ padding:12px; border-top:1px solid rgba(255,255,255,.08); background:var(--surface); }

/* ===== Editor: embeds compactos (YouTube, Drive etc.) ===== */
/* Afeta só o preview do editor (.wys-content), não muda a view final */
.wys-content .embed{
  max-width: 460px;
  margin: 8px auto;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
}
.wys-content .embed iframe{
  display:block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}

/* Garantia específica pro Google Drive, com e sem wrapper .embed--drive */
.wys-content .embed--drive iframe,
.wys-content iframe[src*="drive.google.com"]{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}

/* No editor o iframe não “rouba” o clique/seleção de texto */
.wys-content iframe{ pointer-events: none; }

/* ===== Spoiler (IPB-like) ===== */
.ipsSpoiler{
  margin:10px 0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:var(--surface-2);
}
.ipsSpoiler_header{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; cursor:pointer; user-select:none;
  font-weight:900; color:var(--text-2);
}
.ipsSpoiler_header a{ 
  display:inline-flex; width:18px; height:18px; border-radius:4px;
  background:var(--surface-3); text-decoration:none;
}
.ipsSpoiler_contents{
  display:none; padding:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ipsSpoiler.is-open .ipsSpoiler_contents{ display:block !important; }
.ipsSpoiler.is-open .ipsSpoiler_header{ border-bottom:1px solid rgba(255,255,255,.08); }


/* ===== HOTFIX: editor - neutraliza o wrapper legado e deixa 16:9 funcionar ===== */
.wys-content .embed{ 
  /* deixa ocupar a largura toda do editor */
  max-width: 100% !important;
  margin: 8px 0 !important;
  position: relative; /* ok */
}

/* mata o truque do ::before no editor */
.wys-content .embed::before{
  content: none !important;
  padding-top: 0 !important;
}

/* o iframe não pode ficar absolute aqui */
.wys-content .embed iframe{
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  border: 0 !important;
}

/* Drive sem wrapper: também 16:9 no editor */
.wys-content iframe[src*="drive.google.com"]{
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  border: 0 !important;
}

/* (opcional) se quiser “miniatura” no editor, troca por max-width: 640px; */
/* Editor: desliga o truque do ::before e absolute */
.wys-content .embed{ max-width:100% !important; margin:8px 0 !important; position:relative; }
.wys-content .embed::before{ content:none !important; padding-top:0 !important; }
.wys-content .embed iframe{
  position:static !important; inset:auto !important;
  display:block !important; width:100% !important; height:auto !important;
  aspect-ratio:16/9 !important; border:0 !important;
}
/* Drive sem wrapper também 16:9 */
.wys-content iframe[src*="drive.google.com"]{
  position:static !important; display:block !important;
  width:100% !important; height:auto !important; aspect-ratio:16/9 !important; border:0 !important;
}




/* ===== Pastebin integrado ===== */
:root{
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.paste-card{ padding: 16px; }
.paste-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap: wrap;
}
.paste-brand{ display:flex; align-items:center; gap:10px; }
.paste-chip{
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font: 12px/1 var(--mono);
  color: #f5e8ff;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  border: 1px solid rgba(255,255,255,.12);
}
.paste-actions{ display:flex; gap:8px; margin-left:auto; }

.paste-form{ margin-top: 12px; }
.paste-editor{
  width: 100%;
  min-height: 60vh;
  background: transparent;
  color: var(--text);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px;
  font: 14.5px/1.55 var(--mono);
  caret-color: var(--brand-400);
}
.paste-editor:focus{
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px var(--ring);
  outline: none;
}

.paste-view{
  width: 100%;
  white-space: pre-wrap;
  overflow: auto;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface-2);
  font: 14.5px/1.55 var(--mono);
  color: var(--text);
}

/* Toast minimalista */
.paste-toast{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 20px; z-index: 2000;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(20,20,20,.75);
  color: #fff; border: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.paste-toast.show{ opacity: 1; transform: translateX(-50%) translateY(-2px); }

/* fechado por padrão */
.spoiler__content,
.ipsSpoiler_contents { display:none; }

/* abre quando o wrapper ganhar .is-open */
.spoiler.is-open .spoiler__content,
.ipsSpoiler.is-open .ipsSpoiler_contents { display:block !important; }

.mention{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  background:var(--surface-2); border:1px solid rgba(255,255,255,.12);
  color:var(--text); text-decoration:none; font-weight:800; line-height:1.2;
}
.mention:hover{ background:var(--surface-3); text-decoration:none; }

.mention--user .mention__avatar{
  width:16px; height:16px; border-radius:50%; object-fit:cover; background:#0d131d;
}
.mention--topic .mention__hash{
  font-weight:900; opacity:.9;
}
.mention--missing{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:8px; background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25); color:#fecaca; font-weight:800;
}

/* ====== Search page ====== */
.search-view{ overflow:hidden; }
.search-hero{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.search-h1{ margin:0; font-size:clamp(22px,3vw,28px); font-weight:900; color:var(--text-2); }
.search-sub{ margin:2px 0 0; color:var(--muted); }

.search-active{ display:flex; flex-wrap:wrap; gap:6px; }

.search-form{ display:grid; gap:10px; }
.search-bar{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.search-filters{
  display:grid; gap:10px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1000px){ .search-filters{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){  .search-filters{ grid-template-columns: 1fr; } }

.sf-col{ display:grid; gap:6px; align-content:start; }
.sf-col--tags{ grid-column: span 2; }
@media (max-width:1000px){ .sf-col--tags{ grid-column:auto; } }

.sf-label{ font-weight:900; color:var(--text-2); }
.sf-check{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--text); }
.sf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tags-mode{ display:flex; gap:14px; align-items:center; margin-top:6px; }

.search-results{ display:grid; gap:10px; }
.result-empty{ color:var(--muted); padding:6px 0; }

.result-card{
  position:relative;
  display:block; text-decoration:none; color:inherit;
  padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.10);
  background:var(--surface-2);
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.result-card:hover{
  background:linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.10));
  border-color:rgba(168,85,247,.28);
  box-shadow:0 8px 22px rgba(168,85,247,.18);
  transform:translateY(-1px);
}

.result-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.result-title{ margin:0; font-weight:900; color:var(--text-2); font-size:clamp(18px,2.4vw,22px); }
.result-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.result-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; color:var(--muted); font-size:13px; }
.result-meta .sep{ opacity:.6; }
.result-snippet{ margin:8px 0 0; color:var(--text); line-height:1.65; }

/* destaque do <mark> */
mark{
  background:linear-gradient(90deg, rgba(168,85,247,.35), rgba(168,85,247,.18));
  color:#fff; padding:0 2px; border-radius:4px;
}

/* tags editor (reaproveita padrões) */
.tags-editor{ position:relative; }
.tags-suggest{
  margin-top:6px; border:1px solid rgba(255,255,255,.12); background:var(--surface-2);
  border-radius:10px; overflow:hidden;
}
.tags-suggest .tag-sug{
  display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; color:var(--text);
  border:0; cursor:pointer; font-weight:800;
}
.tags-suggest .tag-sug:hover, .tags-suggest .tag-sug.is-active{ background:var(--surface-3); }

/* =========================================================
   Search — Compact mode (search-view--compact)
   ========================================================= */
.search-view--compact{ padding:14px; }
.search-view--compact .search-hero{ margin-bottom:6px; }
.search-view--compact .search-h1{ font-size:clamp(20px,2.4vw,24px); }
.search-view--compact .search-sub{ margin-top:2px; }

/* Barra de busca vira 3 colunas: input | botão | ordenar */
.search-view--compact .search-bar{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:8px;
}
.search-view--compact .search-bar input[type="text"],
.search-view--compact .search-order,
.search-view--compact .search-form .btn{
  height:40px;
}
.search-view--compact .search-form .btn{ padding:8px 12px; border-radius:12px; }

/* Filtros mais densos */
.search-view--compact .search-filters{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
@media (max-width:1000px){
  .search-view--compact .search-filters{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .search-view--compact .search-filters{ grid-template-columns:1fr; }
}
.search-view--compact .sf-col{ gap:4px; }
.search-view--compact .sf-label{ font-size:12px; }
.search-view--compact .sf-check{ font-size:13px; gap:6px; }

/* Inputs/Select/Tags mais baixos */
.search-view--compact input[type="text"],
.search-view--compact select,
.search-view--compact textarea{
  padding:8px 10px; border-radius:10px;
}
.search-view--compact .tags-editor{ padding:6px; }
.search-view--compact .tags-editor .chip{ padding:4px 8px; font-size:12px; }
.search-view--compact .tags-mode{ margin-top:2px; gap:12px; }

/* Radios mais discretos */
.search-view--compact .sf-check input[type="radio"]{
  appearance:none; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--brand-400); background:transparent; position:relative;
}
.search-view--compact .sf-check input[type="radio"]:checked{
  background:var(--brand-600); box-shadow:inset 0 0 0 3px var(--surface-2);
}

/* Chips ativos e badges um tiquinho menores */
.search-view--compact .search-active .chip{ padding:4px 8px; font-size:12px; }

/* Resultados mais densos (altura ↓ e snippet com 2 linhas) */
.search-view--compact .result-card{ padding:12px; }
.search-view--compact .result-head{ gap:8px; }
.search-view--compact .result-title{ font-size:clamp(16px,2.2vw,20px); }
.search-view--compact .result-tags{ margin-top:6px; gap:6px; }
.search-view--compact .tag-badge,
.search-view--compact .tag-badge--sm{ padding:4px 8px; font-size:12px; }
.search-view--compact .result-meta{ margin-top:4px; font-size:12px; gap:6px; }
.search-view--compact .result-snippet{
  margin-top:6px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Paginação mais compacta */
.search-view--compact .pagination{ gap:4px; margin-top:12px; }
.search-view--compact .pagination a{ width:34px; height:34px; border-radius:10px; }

/* Ajuste fino do botão “Buscar” no desktop (fica colado ao input) */
@media (min-width:641px){
  .search-view--compact .search-form .btn{ margin-left:0; }
}


/* ===== Search ULTRA Compact ===== */
.search-view--ultra{ padding:14px; }
.search-view--ultra .search-hero{ margin-bottom:8px; }
.search-view--ultra .search-h1{ font-size:clamp(20px,2.6vw,24px); }
.search-view--ultra .search-sub{ margin:0; }

/* Toolbar: tudo numa linha (quebra graciosamente) */
.search-toolbar{
  display:grid;
  grid-template-columns: 1.4fr 1fr 120px 110px 150px auto;
  gap:8px; align-items:center;
}
@media (max-width:1080px){
  .search-toolbar{
    grid-template-columns: 1fr 1fr 120px 110px 150px auto;
  }
}
@media (max-width:840px){
  .search-toolbar{
    grid-template-columns: 1fr 1fr;
  }
}

.search-toolbar .stb input[type="text"],
.search-toolbar .stb select,
.search-toolbar .stb .btn{
  height:40px; border-radius:10px;
}
.search-toolbar .st-tags .tags-editor{ padding:6px; }
.search-toolbar .tags-editor--toolbar .chip{ padding:4px 8px; font-size:12px; }

/* Linha 2: switches mini + modo de tags */
.search-mini{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px; margin-top:6px;
}
.search-mini .mini-group{ display:flex; gap:8px; align-items:center; }

/* Pills (checkbox) */
.mini-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:var(--border);
  padding:6px 10px; border-radius:999px; font-weight:800;
}
.mini-toggle input{ appearance:none; width:14px; height:14px; border:2px solid var(--brand-400); border-radius:50%; }
.mini-toggle input:checked{ background:var(--brand-600); box-shadow:inset 0 0 0 3px var(--surface-2); }

/* Pills (radio) */
.mini-radio{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:var(--border);
  padding:6px 10px; border-radius:999px; font-weight:800;
}
.mini-radio input{ appearance:none; width:14px; height:14px; border:2px solid var(--brand-400); border-radius:50%; }
.mini-radio input:checked{ background:var(--brand-600); box-shadow:inset 0 0 0 3px var(--surface-2); }
.mini-radio.is-disabled{ opacity:.6; pointer-events:none; }

/* Resultados mais densos */
.result-card--compact{ padding:12px; }
.result-card--compact .result-title{ font-size:clamp(16px,2.2vw,20px); }
.result-card--compact .result-meta{ margin-top:4px; font-size:12px; gap:6px; }

/* Snippet em 2 linhas (clamp) */
.result-snippet--2l{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.55; margin-top:6px;
}

/* Chips ativos menores */
.search-view--ultra .search-active .chip{ padding:4px 8px; font-size:12px; }


/* Lista */
.results-list{
  display:grid;
  gap:14px;
}

/* Cartão único do resultado */
.search-item{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

/* Cabeçalho */
.search-item__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.search-item__title{
  font-size:1.06rem;
  line-height:1.25;
  margin:0;
}
.search-item__title a{
  color: var(--text);
  text-decoration:none;
}
.search-item__title a:hover{ text-decoration:underline; }

/* Tags */
.search-item__tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:6px 0 2px;
}

/* Meta */
.search-item__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  color: var(--text-muted); font-size:.875rem;
  margin-top:4px;
}
.search-item__meta .sep{ opacity:.5; }

/* Corpo (clamp pra não estourar; ainda permite o embed processar) */
.search-item__body{
  margin-top:10px;
  overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:4; /* ~4 linhas */
}

/* Mídias dentro do corpo ajustadas ao cartão */
.search-item__body iframe,
.search-item__body video,
.search-item__body img{
  max-width:100%; border-radius:12px;
}


/* ===== Admin (layout) ===== */
.admin-layout{ display:grid; grid-template-columns: 240px 1fr; gap:16px; }
@media (max-width:980px){ .admin-layout{ grid-template-columns: 1fr; } }
.admin-aside{ background:var(--surface-2); border:var(--border); border-radius:var(--radius-md); padding:12px; position:sticky; top: calc(var(--nav-h) + 12px); }
.admin-aside h3{ margin:0 0 8px; font-weight:900; }
.admin-nav{ display:grid; gap:6px; }
.admin-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none;
  border:1px solid rgba(255,255,255,.08); background:var(--surface-3);
}
.admin-link:hover{ background:rgba(255,255,255,.06); }
.admin-link.is-active{ background:linear-gradient(135deg, var(--brand-800), var(--brand-700)); color:#fff; border-color:transparent; }
.admin-main{ display:grid; gap:12px; }
.kpi-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .kpi-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:600px){ .kpi-grid{ grid-template-columns: 1fr; } }
.kpi{ text-align:center; padding:16px; background:var(--surface-2); border:var(--border); border-radius:14px; }
.kpi .num{ font-size:28px; font-weight:900; color:var(--text-2); }
.kpi .lbl{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.form-row{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.table td .actions{ display:flex; gap:6px; flex-wrap:wrap; }
.badge-soft{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-weight:800; font-size:12px; }

.table td .code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
.table td small.text-muted { opacity:.7; }

.mention-type{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  opacity:.75;
  margin-right:6px;
  white-space:nowrap;
}

/* --- FIX overflow/ellipsis na lista de menções --- */
.mention-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  overflow:hidden;               /* previne atravessar o container */
}

.mention-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;                 /* ocupa o espaço disponível */
  min-width:0;                   /* necessário p/ ellipsis funcionar em flex */
}

.mention-type{
  flex:0 0 auto;                 /* não encolhe */
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  opacity:.75;
  white-space:nowrap;
  margin-right:6px;
}

.mention-title{
  flex:1 1 auto;                 /* pode encolher */
  min-width:0;                   /* importante p/ Safari/Chrome */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;        /* "..." quando não couber */
}

.mention-meta{
  flex:0 0 auto;                 /* fixa a largura da data */
  white-space:nowrap;            /* não quebra linha */
  margin-left:8px;
}

.tags-suggest .tag-sug{
  display:flex; justify-content:space-between; align-items:center;
  width:100%;
}
.tags-suggest .tag-sug__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tags-suggest .tag-sug__count{ font-size:12px; opacity:0.7; margin-left:8px; }

.files-panel{position:fixed;inset:0;z-index:9999}
.files-panel .fp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.files-panel .fp-modal{position:absolute;inset:5% 8%;background:#111;color:#eee;border-radius:12px;display:flex;flex-direction:column}
.fp-head{display:flex;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #222}
.fp-head .fp-search{flex:1;min-width:200px;background:#0b0b0b;border:1px solid #2a2a2a;border-radius:8px;color:#eee;padding:8px}
.fp-close{background:#222;border:0;color:#eee;border-radius:8px;padding:8px 12px;cursor:pointer}
.fp-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:12px;overflow:auto}
.fp-item{display:flex;flex-direction:column;gap:6px;background:#0b0b0b;border:1px solid #202020;border-radius:12px;padding:8px;text-align:left;cursor:pointer}
.fp-item .fp-thumb{height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#080808}
.fp-item .fp-thumb img{max-width:100%;max-height:100%}
.fp-item .fp-file{font-weight:700}
.fp-meta{display:flex;justify-content:space-between;gap:8px}
.fp-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-empty{opacity:.6}

/* === Imagens fluídas + cantos arredondados (tópico, comentários, editor) === */
.topic-content img,
.post .content img,
.wys-content img{
  display:block;          /* tira o espaço de elemento inline */
  max-width:100%;         /* não ultrapassa o card */
  height:auto;            /* mantém proporção */
  border-radius:var(--radius-lg);  /* cantos no padrão do tema */
}

/* Se vierem com width/height no HTML, força a respeitar o container */
.topic-content img[width], .topic-content img[height],
.post .content img[width], .post .content img[height],
.wys-content img[width], .wys-content img[height]{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

/* Imagem linkada: mantém block e o raio bonitinho */
.topic-content a > img,
.post .content a > img,
.wys-content a > img{
  display:block;
  border-radius:var(--radius-lg);
}

/* (opcional) figure padrão */
.topic-content figure,
.post .content figure{ margin:10px 0; }

/* ===== Quebra de palavras longas (editor e view) ===== */
.topic-content,
.wys-content {
  overflow-wrap: anywhere;   /* quebra strings gigantes e URLs */
  word-break: break-word;    /* fallback */
  hyphens: auto;             /* hifeniza quando der (precisa do lang na página) */
}

/* Links gigantes (URLs) não estouram */
.topic-content a,
.wys-content a {
  word-break: break-all;
}

/* Mídia não sai do bloco */
.topic-content img,
.topic-content video,
.topic-content iframe,
.wys-content img,
.wys-content video,
.wys-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tabelas largas ficam roláveis dentro do bloco */
.topic-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Evita estouro em itens de flex/grid (títulos e cia.) */
.topic-hero-line > *,
.grid > * {
  min-width: 0;
}

/* Corpo do editor (contenteditable) */
.wys-content{
  min-height: 240px;
  padding: 12px;
  outline: none;
  background: #0d131d;
  color: var(--text);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.thread-card .preview{
  margin-top: 4px;
  color: #6b7280; /* cinza 500  */
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Permite que o bloco de texto encolha dentro do flex (sem isso o texto “vaza”) */
.thread-list .thread-card > div{
  flex: 1 1 auto;
  min-width: 0; /* ESSENCIAL pro ellipsis funcionar em flex */
}

/* Título continua normal; se quiser ellipsis também, aplica igual ao preview */
.thread-card .title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview: uma linha + reticências */
.thread-card .preview{
  margin-top: 4px;
  color: #9ca3af; /* cinzinha no dark */
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (opcional) se quiser 2 linhas com clamp em vez de 1 linha:
.thread-card .preview{
  margin-top: 4px;
  color:#9ca3af;
  font-size:.92rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
*/

.taglist .tag {
  text-decoration: none;
  color: inherit;
}
.taglist .tag:hover {
  text-decoration: underline; /* ou mantém sem sublinhado, tu que manda */
}

.thread-card { cursor: default; }
.thread-card .topic-title,
.thread-card .tag { cursor: pointer; }

.thread-card .meta a { color: var(--muted); text-decoration: underline; }
.thread-card .meta a:hover { text-decoration: none; }

<style>
.user-card {
  position: fixed; z-index: 9999; width: 360px; max-width: calc(100vw - 20px);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.2);
  overflow: hidden; opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.user-card.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.user-card__banner { position: relative; height: 88px; overflow: hidden; background: #f3f4f6; }
.user-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.user-card__avatar {
  position: absolute; left: 12px; bottom: -30px; width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid #fff; background: #fff; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.user-card__avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }

.user-card__body { padding: 44px 12px 12px 12px; }
.user-card__name { display:flex; gap:8px; align-items:center; margin-bottom: 6px; }
.user-card__display { font-weight: 700; font-size: 16px; line-height:1.2; }
.user-card__uname { color:#6b7280; font-size: 13px; }

.user-card__role { margin-left: auto; font-size:12px; padding:2px 8px; border-radius: 999px; background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe; }

.user-card__desc { color:#374151; font-size: 13px; margin: 6px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.user-card__stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.user-card__stat { background:#f9fafb; border:1px solid #f3f4f6; border-radius:10px; padding:8px; text-align:center; }
.user-card__stat b { display:block; font-size: 15px; }
.user-card__stat small { display:block; color:#6b7280; font-size:11px; }

.user-card__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.user-card__btn { font-size: 12px; padding:6px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; }
.user-card__btn--brand { background:#7c3aed; color:#fff; border-color:#7c3aed; }
@media (max-width: 520px) { .user-card{ width: 92vw; } }
</style>


/* Hover card do usuário */
.user-card{
  position:absolute; z-index:9999;
  width:min(360px, calc(100vw - 20px));
  top:0; left:0;
  background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .12s ease;
  /* por padrão: ACIMA do @ */
  transform: translate(-50%, calc(-100% - 8px));
}
.user-card.is-visible{ opacity:1; pointer-events:auto; }
.user-card.pos-below{ transform: translate(-50%, 8px); }

.user-card__banner{ height:80px; background:#f4f4f4; }
.user-card__banner img{ width:100%; height:100%; object-fit:cover; display:block; }

.user-card__avatar{ position:absolute; top:48px; left:16px; width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid #fff; background:#fff; }
.user-card__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.user-card__body{ padding:16px 16px 14px 88px; }
.user-card__name{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; }
.user-card__display{ font-weight:600; }
.user-card__uname{ font-size:12px; color:#666; }
.user-card__role{ font-size:11px; color:#444; background:#f3f4f6; padding:2px 8px; border-radius:999px; align-self:flex-start; }
.user-card__desc{ font-size:13px; color:#444; margin:6px 0 10px; }
.user-card__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.user-card__stat{ text-align:center; }
.user-card__stat b{ display:block; font-size:13px; }
.user-card__stat small{ color:#777; font-size:11px; }

.err-progress{position:relative;height:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin:8px 0 4px}
.err-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand-700),var(--brand-500));transition:width .25s ease}
.err-progress.done{opacity:.35;transition:opacity .35s ease}

/* ===== Toggle bonito (Título/Conteúdo) — estilo “segmented” ===== */
.search-mini{ margin-top:10px; }
.seg{ display:inline-flex; border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; background:var(--surface-2); }
.seg__btn{ position:relative; }
.seg__btn input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.seg__btn span{
  display:block; padding:8px 12px; font-weight:800; font-size:12px;
  color:var(--text); background:transparent; border-right:1px solid rgba(255,255,255,.08);
}
.seg__btn:last-child span{ border-right:none; }
.seg__btn input:checked + span{
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));
  color:#fff;
}
.seg__btn:hover span{ background:rgba(255,255,255,.06); }

#errProgCard { transition: opacity .18s ease, transform .18s ease; }


.hc-card{
  position:absolute; z-index:1000; min-width:260px; max-width:320px;
  background:#111; color:#ddd; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.5);
  padding:12px; opacity:0; visibility:hidden;
  transform:translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  pointer-events:none;
}
.hc-card[data-state="visible"]{
  opacity:1; visibility:visible; transform:translateY(0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s;
  pointer-events:auto;
}
.hc-inner{display:flex; flex-direction:column; gap:8px;}
.hc-row{display:flex; align-items:center; gap:10px;}
.hc-avatar{width:48px; height:48px; border-radius:50%; object-fit:cover;}
.hc-name{line-height:1.1; cursor:pointer;}
.hc-username{opacity:.6; font-size:.9em;}
.hc-card[data-loading="1"] .hc-extra{display:none;}

.video-player{ width:100%; background:var(--surface-2); border:var(--border); border-radius:var(--radius-md); }

/* Força IG do rodapé sem cor inline e sem sublinhado, mesmo se algum JS tentar */
.footer .social-link.instagram{
  color: var(--text-2) !important;
  text-decoration: none !important;
}
.footer .social-link.instagram:hover{
  color: #fff !important;
  text-decoration: none !important;
}

/* (opcional) vale pra todos os ícones sociais do rodapé */
.footer .social-link{ text-decoration: none !important; }
.footer .social-link:hover{ text-decoration: none !important; }