/* Mapeamento das nossas variáveis locais (--c-*) para os tokens
       do design system (--cod-*). Mantém o restante do CSS inalterado
       e garante alinhamento com a marca (cores, superfícies, fonte). */
    :root {
      --c-bg:        var(--cod-bg-app);          /* #0D0D0D */
      --c-sidebar:   var(--cod-bg-canvas);       /* #000000 */
      --c-content:   var(--cod-surface-1);       /* #171717 */
      --c-content-2: var(--cod-surface-2);       /* #262626 */
      --c-hover:     var(--cod-surface-3);       /* #404040 */
      --c-hover-2:   var(--cod-border-strong);   /* #525252 */
      --c-border:    var(--cod-border-default);  /* rgba(255,255,255,.10) */
      --c-border-2:  var(--cod-border-strong);   /* #525252 */
      --c-text:      var(--cod-text);            /* #FFFFFF */
      --c-text-2:    var(--cod-text-muted);      /* #A3A3A3 */
      --c-text-3:    var(--cod-text-disabled);   /* #737373 */
      --c-on-accent: var(--cod-text-on-accent);  /* #000000 — texto sobre verde */
      --c-accent:    var(--cod-accent);          /* oklch verde COD3RS */
      --c-accent-2:  oklch(60% .20 141.24);      /* tom escuro pra gradientes */
      --c-danger:    var(--cod-danger);          /* #EF4444 */
      --c-danger-soft: rgba(239, 68, 68, .12);   /* fundo de chip/ícone danger */
      --c-danger-hover: #dc2626;                 /* hover de botão danger */
      --c-on-danger: #ffffff;                    /* texto sobre danger */
      --c-warning:   #fbbf24;                    /* amber-400 — admin/lock */
      --c-warning-soft: rgba(251, 191, 36, .14); /* fundo de chip warning */
      --c-success:   var(--cod-success);         /* #10B981 — sucesso (toasts) */
      --c-success-strong: #16a34a;               /* sucesso forte (estado "copiado") */
      --c-like:      #f43f5e;                    /* coração curtido */
      --c-info:      #6a7fff;                    /* azul informacional (menções, reações, notif) */
      --c-info-soft: rgba(106, 127, 255, .14);
      --c-info-line: rgba(106, 127, 255, .5);
    }

    html, body {
      height: 100%;
      font-family: var(--cod-font-body);
      background: var(--cod-bg-app);
      color: var(--cod-text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Scrollbar padronizada em todo o app: cinza escuro neutro (~#404040)
       em vez do verde-neon ou cinza padrão do sistema. Mesma estética do
       feed da comunidade. Aplica a TODOS os elementos que rolam — cards,
       modais, listas, sidebars. Regras específicas mais antigas (sidebar-nav,
       all-jobs, feed-widgets) usam o mesmo padrão e continuam funcionando. */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--cod-surface-3) transparent;
    }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: var(--cod-surface-3);
      border-radius: var(--cod-radius-full);
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--c-border-2); }
    *::-webkit-scrollbar-corner { background: transparent; }

    /* Hero titles mais leves (peso 300/400), menos "marketing-bold". */
    .welcome-title,
    .event-featured-title,
    .lb-name,
    .ph-title,
    .eh-title,
    .feed-header .fh-title,
    .lb-header h1 {
      font-weight: var(--cod-fw-light) !important;
      letter-spacing: -.02em !important;
    }
    /* Anel de carreira: pulse verde quando há mudança recente (badge "🚀 Entrou na X") */
    .career-fresh {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: var(--cod-radius-full);
      background: var(--cod-accent-soft); color: var(--cod-accent);
      animation: career-pulse 2.2s ease-in-out infinite;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes shimmer {
      0%   { background-position: -800px 0; }
      100% { background-position:  800px 0; }
    }
    @keyframes floatIn {
      from { opacity: 0; transform: translateY(6px) scale(.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes career-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(68, 214, 44, 0); }
      50%      { box-shadow: 0 0 0 4px rgba(68, 214, 44, .22); }
    }
    .page-enter { animation: fadeInUp .24s cubic-bezier(.22,1,.36,1) both; }
    .card-enter { animation: floatIn .22s cubic-bezier(.22,1,.36,1) both; }

    /* Skeleton/shimmer — usado em todas as telas que carregam dados */
    .skel {
      display: inline-block;
      background: linear-gradient(90deg, var(--cod-surface-1) 0%, var(--cod-surface-3) 50%, var(--cod-surface-1) 100%);
      background-size: 800px 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: var(--cod-radius-sm);
      color: transparent;
      user-select: none;
    }
    .skel-line   { height: 10px; border-radius: var(--cod-radius-md); display: block; }
    .skel-h      { height: 18px; border-radius: var(--cod-radius-md); display: block; }
    .skel-text   { height: 14px; border-radius: 4px; display: inline-block; }
    .skel-avatar { width: 36px; height: 36px; border-radius: var(--cod-radius-full); }
    .skel-avatar-lg { width: 48px; height: 48px; border-radius: var(--cod-radius-full); }
    .skel-pill   { height: 22px; border-radius: var(--cod-radius-full); display: inline-block; }
    .skel-img    { width: 100%; aspect-ratio: 16/7; border-radius: var(--cod-radius-lg); }
    .skel-card   {
      background: var(--cod-surface-1); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg); padding: 18px;
    }
    /* Alias legado pra não quebrar `.skeleton` antigo */
    .skeleton {
      background: linear-gradient(90deg, var(--cod-surface-1) 0%, var(--cod-surface-3) 50%, var(--cod-surface-1) 100%);
      background-size: 800px 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: var(--cod-radius-md);
    }

    /* `.hidden` (Tailwind) precisa ganhar das classes de display que vêm
       depois neste <style> inline (.chat-shell { display: flex }, etc).
       Sem !important as views ficam empilhadas porque flex > none. */
    .hidden { display: none !important; }

    /* ── Login da comunidade ──────────────────────────────────────────────
       Paleta = design system COD3RS (verde mono + neutros do --cod-*).
       Sem azul/rosa: a brand é green-on-black. */
    .comm-login {
      position: fixed; inset: 0;
      z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      background: var(--cod-bg-app);   /* #0D0D0D */
      isolation: isolate;
      overflow: auto;
    }
    .comm-login[hidden] { display: none !important; }
    /* Quando o login está visível, esconde TUDO o resto. */
    body:has(.comm-login:not([hidden])) > :not(.comm-login):not(script) {
      visibility: hidden;
    }
    /* Boot loading: aplicado SÓ pra anônimo (script inline no top do body
       detecta ausência de token e adiciona a classe). Esconde a UI até
       showCommunityLogin() exibir o modal — evita flicker de itens da
       comunidade pra deslogados. Pra autenticado, a classe nunca é
       adicionada e o app shell aparece direto com shimmers por seção. */
    body.boot-loading > :not(.comm-login):not(script) {
      visibility: hidden;
    }
    /* Gradiente animado de fundo: orbs em tons da brand (verde COD3RS). */
    .comm-login-bg {
      position: absolute; inset: 0; z-index: -1;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 28%, var(--cod-accent-strong), transparent 55%),
        radial-gradient(circle at 82% 72%, var(--cod-accent-soft),   transparent 55%),
        var(--cod-bg-app);
    }
    .comm-login-bg::before, .comm-login-bg::after {
      content: ''; position: absolute;
      width: 520px; height: 520px; border-radius: 50%;
      filter: blur(80px);
      opacity: 0.55;
      animation: comm-login-float 18s ease-in-out infinite alternate;
    }
    .comm-login-bg::before {
      top: -120px; left: -120px;
      background: radial-gradient(circle, var(--cod-accent-strong), transparent 70%);
    }
    .comm-login-bg::after {
      bottom: -160px; right: -160px;
      background: radial-gradient(circle, var(--cod-accent-soft), transparent 70%);
      animation-delay: -6s;
    }
    @keyframes comm-login-float {
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(30px, 40px) scale(1.05); }
      100% { transform: translate(-20px, 20px) scale(0.95); }
    }
    .comm-login-card {
      position: relative;
      width: 100%; max-width: 420px;
      padding: 36px 32px 28px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--cod-surface-1) 85%, transparent);
      border: 1px solid var(--cod-border-default);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px var(--cod-border-subtle) inset;
      animation: comm-login-in .35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes comm-login-in {
      from { transform: translateY(14px) scale(.985); opacity: 0; }
      to   { transform: translateY(0)    scale(1);    opacity: 1; }
    }
    .comm-login-brand { text-align: center; margin-bottom: 26px; }
    .comm-login-logo {
      display: inline-flex; align-items: center;
      margin-bottom: 22px;
      height: 24px;
    }
    .comm-login-logo img {
      display: block;
      width: 160px; height: 20px;
      object-fit: contain;
    }
    .comm-login-title {
      font-size: 24px; font-weight: var(--cod-fw-bold); line-height: 1.2;
      color: var(--cod-text); margin: 0 0 8px;
      letter-spacing: -0.01em;
    }
    .comm-login-subtitle {
      font-size: 14px; color: var(--cod-text-muted); line-height: 1.5; margin: 0;
      max-width: 320px; margin-left: auto; margin-right: auto;
    }
    .comm-login-form {
      display: flex; flex-direction: column; gap: 14px;
    }
    .comm-login-field { display: flex; flex-direction: column; gap: 6px; }
    .comm-login-label {
      font-size: 12px; font-weight: var(--cod-fw-semi);
      color: var(--cod-text-secondary); letter-spacing: 0.02em;
    }
    .comm-login-field input {
      height: 44px; padding: 0 14px;
      border-radius: var(--cod-radius-lg);
      border: 1px solid var(--cod-border-default);
      background: var(--cod-bg-canvas);
      color: var(--cod-text); font-size: 14.5px;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .comm-login-field input::placeholder { color: var(--cod-text-disabled); }
    .comm-login-field input:hover {
      border-color: var(--cod-border-strong);
    }
    .comm-login-field input:focus {
      border-color: var(--cod-accent);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .comm-login-error {
      padding: 10px 12px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--cod-danger) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--cod-danger) 30%, transparent);
      color: color-mix(in srgb, var(--cod-danger) 80%, white 20%);
      font-size: 13.5px;
      animation: comm-login-shake .35s ease;
    }
    @keyframes comm-login-shake {
      10%, 90% { transform: translateX(-1px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60% { transform: translateX(4px); }
    }
    .comm-login-submit {
      margin-top: 6px;
      height: 46px;
      border-radius: var(--cod-radius-lg);
      border: 0;
      background: var(--cod-accent);
      color: var(--cod-text-on-accent);
      font-size: 14.5px; font-weight: var(--cod-fw-bold);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px;
      transition: background .15s ease, transform .05s ease, opacity .15s ease;
      box-shadow: 0 4px 16px var(--cod-accent-strong);
    }
    .comm-login-submit:hover  { background: var(--cod-accent-hover); }
    .comm-login-submit:active { transform: translateY(1px); }
    .comm-login-submit:disabled {
      opacity: 0.6; cursor: not-allowed; filter: none;
    }
    .comm-login-submit-spinner {
      animation: comm-login-spin 0.9s linear infinite;
    }
    @keyframes comm-login-spin {
      to { transform: rotate(360deg); }
    }
    .comm-login-help {
      margin-top: 22px;
      text-align: center;
      font-size: 13px; color: #8a8d94;
    }
    .comm-login-help a {
      color: #c5cad1; text-decoration: none;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
      transition: color .15s ease, border-color .15s ease;
    }
    .comm-login-help a:hover {
      color: #f3f4f6; border-color: rgba(255, 255, 255, 0.4);
    }
    .comm-login-forgot-row {
      display: flex; justify-content: flex-end;
      margin-top: -2px;
    }
    .comm-login-forgot-link, .comm-login-back-link {
      background: none; border: 0; padding: 0;
      font: inherit;
      color: #c5cad1;
      font-size: 12.5px; cursor: pointer;
      text-decoration: none;
      border-bottom: 1px dashed rgba(255,255,255,0.2);
      transition: color .15s ease, border-color .15s ease;
    }
    .comm-login-forgot-link:hover, .comm-login-back-link:hover {
      color: #f3f4f6; border-color: rgba(255,255,255,0.4);
    }
    .comm-login-success {
      padding: 10px 12px; border-radius: 8px;
      background: var(--cod-accent-soft);
      border: 1px solid color-mix(in srgb, var(--cod-accent) 35%, transparent);
      color: var(--cod-accent);
      font-size: 13.5px; line-height: 1.5;
    }

    /* ── Top bar ──────────────────────────────────────── */
    /* Layout via grid: tracks laterais `minmax(min-content, 1fr)` garantem que
       em telas com folga as duas laterais ficam iguais → nav central exatamente
       no centro do viewport (matematicamente equivalente ao `left:50%` antigo).
       Quando actions é maior que 1fr, a track direita expande pra acomodar e a
       nav desliza pra esquerda sem nunca sobrepor o search. */
    .topbar {
      position: relative;
      height: 72px; flex-shrink: 0;
      display: grid;
      grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
      align-items: center;
      column-gap: 16px;
      padding: 0 24px;
      background: var(--c-sidebar);
      border-bottom: 1px solid var(--c-border);
    }
    .topbar-left {
      grid-column: 1;
      display: flex; align-items: center; gap: 16px;
      min-width: 0;
    }
    .topbar-logo {
      flex-shrink: 0;
      display: inline-flex; align-items: center;
      height: 24px;
      transition: opacity .14s;
    }
    .topbar-logo:hover { opacity: .85; }
    .topbar-logo img {
      display: block;
      width: 200px; height: 24px;
      object-fit: contain;
    }
    .topbar-nav {
      grid-column: 2;
      display: flex; gap: 4px; align-items: center;
    }

    .topbar-nav a {
      padding: 8px 18px; border-radius: var(--cod-radius-full);
      font-size: 15px; font-weight: var(--cod-fw-semi); color: var(--c-text-2);
      transition: background .14s ease, color .14s ease;
    }
    .topbar-nav a:hover { background: var(--c-hover); color: var(--c-text); }
    .topbar-nav a.active { background: var(--c-content-2); color: var(--c-text); }
    /* Badge "vagas novas desde a última visita" no item Vagas — FLUTUANTE
       (absolute) pra NÃO aumentar a largura do botão. Anel da cor da topbar
       (--c-sidebar) faz parecer destacado sobre o pill. */
    .topbar-nav a { position: relative; }
    .topnav-badge {
      position: absolute; top: -5px; right: -5px;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: var(--cod-radius-full);
      font-size: 11px; font-weight: var(--cod-fw-bold); line-height: 1;
      background: var(--c-accent); color: var(--c-on-accent);
      box-shadow: 0 0 0 2px var(--c-sidebar);
      pointer-events: none;
    }
    .topnav-badge[hidden] { display: none; }

    /* Boot shimmer SÓ no topbar-avatar enquanto <html class="boot"> existir.
       Antes os links da topnav (Home/Eventos/Membros/Leaderboard) também
       viravam shimmer, mas eles são labels estáticos — não dependem de
       dado nenhum, e com cache o resto da tela renderiza instantâneo. O
       shimmer dos links virava a única coisa que piscava no reload.
       Avatar fica em shimmer porque a foto é dado real (cache hit pinta
       imagem; sem cache, shimmer até updateTopbarAvatar()). */
    html.boot #topbar-avatar {
      color: transparent !important;
      background:
        linear-gradient(90deg, var(--cod-surface-1) 0%, var(--cod-surface-3) 50%, var(--cod-surface-1) 100%) !important;
      background-size: 800px 100% !important;
      animation: shimmer 1.4s ease-in-out infinite;
      pointer-events: none;
    }
    html.boot #topbar-avatar > * { visibility: hidden; }

    .topbar-actions {
      grid-column: 3;
      justify-self: end;
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }
    .topbar-search {
      display: flex; align-items: center; gap: 10px;
      height: 36px; padding: 0 18px; min-width: 220px;
      border-radius: var(--cod-radius-full);
      background: var(--c-content-2); color: var(--c-text-2);
      font-size: 14.5px; cursor: pointer;
      transition: background .14s;
    }
    .topbar-search:hover { background: var(--c-hover); }
    .topbar-icon-btn {
      position: relative;
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2); background: transparent;
      transition: background .14s, color .14s;
    }
    .topbar-icon-btn:hover { background: var(--c-hover); color: var(--c-text); }
    .topbar-icon-btn.active { background: var(--c-content-2); color: var(--c-accent); }
    .topbar-icon-btn .topbar-dot {
      position: absolute; top: 6px; right: 6px;
      min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: var(--cod-radius-full);
      background: var(--c-accent); color: var(--c-on-accent);
      font-size: 9px; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .topbar-avatar {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
      color: var(--c-on-accent); font-size: 13px; font-weight: var(--cod-fw-bold);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-left: 4px;
      cursor: pointer;
      overflow: hidden;
      background-size: cover; background-position: center;
    }
    .user-menu {
      position: fixed; top: 64px; right: 16px; z-index: 60;
      min-width: 200px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      box-shadow: 0 12px 30px rgba(0,0,0,.4);
      padding: 4px;
      display: flex; flex-direction: column;
      opacity: 0; transform: translateY(-6px);
      transition: opacity .14s ease, transform .14s ease;
    }
    .user-menu.open { opacity: 1; transform: translateY(0); }
    .user-menu-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: var(--cod-radius-md);
      background: transparent; border: 0;
      color: var(--c-text); font-size: 14px; font-weight: 500;
      cursor: pointer; text-align: left;
      transition: background .14s;
    }
    .user-menu-item:hover { background: var(--c-hover); }
    .user-menu-item svg { color: var(--c-text-3); flex-shrink: 0; }

    /* Tela de conta bloqueada (desativada / sem acesso) — boot, sem app shell. */
    .blocked-overlay {
      position: fixed; inset: 0; z-index: 200;
      display: flex; align-items: center; justify-content: center;
      background: var(--c-bg); padding: 24px;
    }
    .blocked-card {
      max-width: 420px; width: 100%; text-align: center; box-sizing: border-box;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 16px; padding: 36px 32px;
    }
    .blocked-icon {
      width: 56px; height: 56px; margin: 0 auto 18px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: var(--c-danger-soft); color: var(--c-danger);
    }
    .blocked-card h1 { font-size: 21px; color: var(--c-text); margin: 0 0 10px; font-weight: 700; }
    .blocked-card p { font-size: 14.5px; color: var(--c-text-2); line-height: 1.6; margin: 0 0 8px; }
    .blocked-card .blocked-sub { font-size: 12.5px; color: var(--c-text-3); margin-top: 14px; }
    #user-menu-logout { color: var(--c-danger); }
    #user-menu-logout svg { color: var(--c-danger); }

    /* ── Sidebar esquerda ─────────────────────────────── */
    aside.left-sidebar {
      width: 256px; flex-shrink: 0;
      background: var(--c-sidebar);
      border-right: 1px solid var(--c-border);
      display: flex; flex-direction: column;
      overflow: hidden;
      transition: width .2s ease, opacity .15s ease;
    }
    /* Recolhida (desktop): some por inteiro pra dar espaço ao conteúdo (ex: o
       iframe do board). O botão de toggle vive na topbar, sempre acessível. O
       drawer mobile (<=900px) tem seu próprio transform e ignora este estado. */
    aside.left-sidebar.collapsed {
      width: 0;
      border-right-color: transparent;
      opacity: 0;
      pointer-events: none;
    }

    /* Botão de recolher a sidebar (desktop). Espelha o slot do hamburger, que
       é mobile-only — aqui é o inverso (some no mobile, onde existe o drawer). */
    .topbar-collapse {
      display: inline-flex; flex-shrink: 0;
      width: 38px; height: 38px; border-radius: var(--cod-radius-lg);
      align-items: center; justify-content: center;
      color: var(--c-text-2); background: transparent; cursor: pointer;
      transition: background .14s, color .14s;
    }
    .topbar-collapse:hover { background: var(--c-hover); color: var(--c-text); }
    /* Destacado quando o menu está recolhido — sinaliza estado fechado + convida
       a reabrir. aria-expanded="false" é setado por applySidebarCollapsed. */
    .topbar-collapse[aria-expanded="false"] {
      background: var(--cod-accent-soft);
      color: var(--cod-accent);
    }
    .topbar-collapse[aria-expanded="false"]:hover {
      background: var(--cod-accent-soft);
      color: var(--cod-accent);
    }
    /* Scrollbar neutra no nav da sidebar — mesmo tratamento do feed (cinza
       escuro discreto). Antes era verde-accent, mas chamava muita atenção
       num elemento secundário. */
    #sidebar-nav {
      scrollbar-width: thin;
      scrollbar-color: var(--cod-surface-3) transparent;
    }
    #sidebar-nav::-webkit-scrollbar { width: 8px; }
    #sidebar-nav::-webkit-scrollbar-track { background: transparent; }
    #sidebar-nav::-webkit-scrollbar-thumb {
      background: var(--cod-surface-3);
      border-radius: var(--cod-radius-full);
      border: 2px solid var(--c-sidebar);
    }
    #sidebar-nav::-webkit-scrollbar-thumb:hover {
      background: var(--c-border-2);
    }
    .sidebar-section-label {
      padding: 14px 24px 6px;
      font-size: 14px; font-weight: var(--cod-fw-semi);
      color: var(--c-text-2);
    }

    .sidebar-link {
      display: flex; align-items: center; gap: 10px;
      margin: 0 12px; padding: 7px 12px; border-radius: 8px;
      font-size: 15px; font-weight: 500;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .sidebar-link:hover { background: var(--c-hover); color: var(--c-text); }
    .sidebar-link.active {
      background: var(--cod-bg-canvas);
      color: var(--c-accent);
      font-weight: var(--cod-fw-semi);
    }

    /* Nav das seções principais dentro do drawer: só no mobile (≤900px), onde
       a .topbar-nav some. No desktop essas seções vivem na topbar. */
    .drawer-mobile-nav { display: none; }
    .drawer-mobile-nav .topnav-badge {
      margin-left: auto;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
      font-size: 11px; font-weight: var(--cod-fw-semi); line-height: 1;
      background: var(--c-accent); color: var(--cod-text-on-accent, #fff);
    }

    .sg-toggle {
      display: flex; width: 100%; align-items: center; justify-content: space-between;
      gap: 6px; padding: 6px 24px;
      font-size: 14px; font-weight: var(--cod-fw-semi); line-height: 1.25;
      color: var(--c-text); background: transparent;
      border: 0; cursor: pointer;
      transition: background .14s, color .14s;
    }
    .sg-toggle:hover { background: var(--c-hover); }
    .sg-toggle .sg-chev {
      width: 14px; height: 14px; flex-shrink: 0;
      transition: transform .18s ease;
      opacity: .55;
    }
    .sg-group[data-collapsed="true"] .sg-toggle .sg-chev { transform: rotate(-90deg); }
    .sg-group[data-collapsed="true"] .sg-list { display: none; }
    .sg-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; }

    .sg-item {
      display: flex; align-items: center; gap: 8px;
      margin: 0 12px; padding: 6px 12px; border-radius: 8px;
      font-size: 14px; font-weight: var(--cod-fw-semi);
      color: var(--c-text-2);
      transition: background .14s, color .14s;
      cursor: pointer; min-height: 32px;
    }
    .sg-item:hover { background: var(--c-hover); color: var(--c-text); }
    .sg-item.active {
      background: var(--c-content-2) !important;
      color: var(--c-text) !important;
    }
    .sg-item .sg-emoji {
      width: 18px; height: 18px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px; line-height: 1;
    }
    .sg-item .sg-name {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sg-item .sg-unread {
      flex-shrink: 0;
      min-width: 26px; padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px; font-weight: var(--cod-fw-bold); line-height: 11px;
      text-align: center;
      background: var(--c-accent);
      color: var(--c-on-accent);
    }
    .sg-item .sg-lock {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-3);
    }
    .sg-item-locked { opacity: .55; }
    .sg-item-locked .sg-lock { color: var(--c-warning); opacity: .85; }
    .sg-item .sg-unread[hidden] { display: none; }
    /* Badge de não-lidas no widget "Canais salvos" do feed (mesma cara do sg-unread). */
    .saved-channel-badge {
      flex-shrink: 0;
      min-width: 22px; padding: 2px 6px;
      border-radius: 999px;
      font-size: 11px; font-weight: var(--cod-fw-bold); line-height: 13px;
      text-align: center;
      background: var(--c-accent); color: var(--c-on-accent);
    }
    .saved-channel-badge[hidden] { display: none; }


    /* ── Members view ─────────────────────────────────── */
    .chip {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: var(--cod-radius-md);
      font-size: 13.5px; font-weight: 500;
      background: var(--c-content-2); color: var(--c-text-2);
    }
    .chip.role { background: var(--cod-accent-soft); color: var(--cod-accent); }

    /* Filtros de membros (grafo de carreira) */
    #members-filters { display: flex; flex-direction: column; gap: 10px; }
    .mf-row-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .mf-search {
      display: flex; align-items: center; gap: 8px;
      flex: 1; max-width: 360px;
      padding: 8px 12px; border-radius: 8px;
      background: var(--c-content-2); color: var(--c-text-3);
    }
    .mf-search input {
      flex: 1; background: transparent; color: var(--c-text);
      border: 0; outline: 0; font: inherit; font-size: 14px;
    }
    .mf-search input::placeholder { color: var(--c-text-3); }
    /* Spinner inline (substitui o ícone de lupa enquanto a busca está em voo) */
    .mf-search.mf-search-loading > svg { display: none; }
    .mf-search.mf-search-loading::before {
      content: ''; width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid var(--c-text-3); border-top-color: transparent;
      animation: spin .7s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .mf-view { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--c-content-2); }
    .mf-view-btn {
      padding: 6px 10px; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text-3);
      border: 0; cursor: pointer;
      transition: background .14s, color .14s;
    }
    .mf-view-btn.active { background: var(--c-content); color: var(--c-text); }
    .mf-view-btn:hover { color: var(--c-text); }

    /* Visualização em lista (1 coluna, layout 1-row horizontal —
       _memberCardHtml renderiza estrutura diferente quando isList=true,
       com avatar+nome+metadados+chip numa linha só, 64px de conteúdo). */
    #members-grid.members-list-view .member-card {
      padding: 12px 16px;
    }
    .mf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .mf-label {
      font-size: 12px; font-weight: var(--cod-fw-semi); color: var(--cod-text-muted);
      text-transform: uppercase; letter-spacing: .06em; margin-right: 6px;
    }
    .mf-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: var(--cod-radius-full);
      border: 1px solid var(--cod-border-default);
      background: transparent; color: var(--cod-text-muted);
      font-size: 13px; font-weight: 500;
      transition: background .14s, color .14s, border-color .14s;
    }
    .mf-chip:hover { color: var(--cod-text); }
    .mf-chip.active {
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border-color: var(--cod-accent);
    }
    .mf-chip .mf-chip-c {
      font-size: 11.5px; font-weight: var(--cod-fw-semi); opacity: .75;
    }
    .mf-chip.active .mf-chip-c { opacity: 1; }

    .member-card {
      background: var(--c-content); border: 1px solid var(--c-border); border-radius: var(--cod-radius-lg);
      padding: 20px;
      transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .member-card:hover {
      border-color: var(--c-border-2);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,0,0,.2);
    }
    .member-card.inactive { opacity: .55; }
    /* Gap vertical entre cards de membros. A virtualização posiciona rows em
       passos fixos (rowHeight); pra criar respiro entre cards sem quebrar o
       cálculo, a row inclui o gap como padding-bottom (rowHeight = conteúdo+gap)
       e o card preenche 100% do espaço restante. Ver MEMBER_CARD_HEIGHT_GRID. */
    #members-grid .vlist-row-grid { padding-bottom: 16px; }
    #members-grid .vlist-row:not(.vlist-row-grid) { padding-bottom: 12px; }
    /* Chip de nível na grid de membros. Cor por nível injetada dinamicamente
       em <style id="gam-level-colors"> (regras .lvl-1, .lvl-2, …) — quando
       admin troca cor, basta reescrever o stylesheet (não re-renderiza cards). */
    .member-level-chip {
      display: inline-flex; align-items: center;
      padding: 2px 9px; border-radius: 999px;
      font-size: 11px; font-weight: 600; line-height: 1.4;
      max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      /* Fallback neutro antes do stylesheet de cores carregar */
      background: #94a3b8; color: #000;
      flex-shrink: 0;
    }
    /* Chip de nível sobrepondo levemente a base da foto no card de membro. */
    .member-chip-overlap {
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: -6px; position: relative; z-index: 1;
    }
    /* Badge elite: substitui o chip de nível pra membros marcados como elite. */
    .member-elite-badge {
      width: 32px; height: 32px;
      display: inline-block; flex-shrink: 0;
      object-fit: contain;
      filter: drop-shadow(0 0 6px rgba(252,211,77,.35));
    }
    /* Versão inline (post-card, chat, trending). Mesma img, tamanho reduzido
       pra encaixar junto ao nome do autor. align-self: center pra alinhar com
       baseline do texto no .post-card-author / .msg-head. */
    .elite-badge-inline {
      width: 18px; height: 18px;
      display: inline-block; align-self: center; flex-shrink: 0;
      object-fit: contain;
      margin-left: 6px;
      filter: drop-shadow(0 0 4px rgba(252,211,77,.3));
      vertical-align: middle;
    }
    /* Versão modal (perfil — bem maior, ao lado do nome no header do modal). */
    .elite-badge-modal {
      width: 24px; height: 24px;
      display: inline-block; vertical-align: middle;
      object-fit: contain;
      margin-left: 8px;
      filter: drop-shadow(0 0 6px rgba(252,211,77,.4));
    }
    .status-dot {
      width: 8px; height: 8px; border-radius: var(--cod-radius-full); flex-shrink: 0;
    }
    .status-dot.on  { background: var(--c-accent); box-shadow: 0 0 0 2px oklch(76.9% .2358 141.24 / .2); }
    .status-dot.off { background: #545861; }

    /* ── Chat ─────────────────────────────────────────── */
    .chat-shell {
      display: flex; flex-direction: column; height: 100%;
      background: var(--c-content);
    }
    .chat-header {
      display: flex; align-items: center; gap: 8px;
      height: 64px; padding: 0 24px;
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      flex-shrink: 0;
    }
    .chat-header .chat-emoji {
      font-size: 19px; line-height: 1;
      width: 20px; display: inline-flex; justify-content: center;
    }
    .chat-header .chat-title {
      font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      letter-spacing: -.005em;
    }
    .chat-header-actions {
      margin-left: auto; display: flex; align-items: center; gap: 4px;
    }
    .chat-header-actions .icon-btn {
      width: 36px; height: 36px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .chat-header-actions .icon-btn:hover { background: var(--c-hover); color: var(--c-text); }

    /* ── Barra de links/pastas do canal (abaixo do nome) ───────────────────── */
    .clinks-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 24px; min-height: 30px;
      /* Divisória de cima no padrão das demais (--c-border). margin-top:-1px
         sobrepõe a border-bottom do header → uma única linha (sem dobrar). */
      margin-top: -1px;
      border-top: 1px solid var(--c-border);
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      overflow-x: auto; flex-shrink: 0;
      scrollbar-width: thin;
    }
    .clinks-bar::-webkit-scrollbar { height: 4px; }
    .clink-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px; border-radius: var(--cod-radius-full, 999px);
      background: var(--c-content-2); border: 1px solid var(--c-border-2);
      color: var(--c-text); font-size: 12.5px; font-weight: 500;
      white-space: nowrap; cursor: pointer; text-decoration: none;
      transition: background .14s, border-color .14s;
    }
    .clink-chip:hover { background: var(--c-hover); border-color: var(--c-accent-line, var(--c-border-2)); }
    .clink-chip svg { flex-shrink: 0; color: var(--c-text-3); }
    .clink-chip .clink-menu {
      display: inline-flex; margin: -2px -6px -2px 0; padding: 2px 4px;
      border-radius: 6px; color: var(--c-text-3); background: transparent;
    }
    .clink-chip .clink-menu:hover { background: var(--c-content); color: var(--c-text); }
    .clink-add {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
      background: transparent; border: 1px dashed var(--c-border-2);
      color: var(--c-text-2); cursor: pointer; transition: background .14s, color .14s, border-color .14s;
    }
    .clink-add:hover { background: var(--c-hover); color: var(--cod-accent, #44D62C); border-color: var(--cod-accent, #44D62C); }
    .clinks-empty { color: var(--c-text-3); font-size: 12.5px; }
    /* Dropdown da pasta */
    .clink-dropdown {
      position: fixed; z-index: 70; min-width: 220px; max-width: 320px;
      max-height: 60vh; overflow-y: auto;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
      padding: 6px; opacity: 0; transform: translateY(-6px);
      transition: opacity .14s ease, transform .14s ease;
    }
    .clink-dropdown.open { opacity: 1; transform: translateY(0); }
    .clink-dd-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 7px; color: var(--c-text);
      font-size: 13px; text-decoration: none; cursor: pointer;
    }
    .clink-dd-row:hover { background: var(--c-hover); }
    .clink-dd-row .clink-menu { margin-left: auto; color: var(--c-text-3); padding: 2px 4px; border-radius: 6px; }
    .clink-dd-row .clink-menu:hover { background: var(--c-content-2); color: var(--c-text); }
    .clink-dd-add {
      display: flex; align-items: center; gap: 8px; width: 100%;
      padding: 8px 10px; border-radius: 7px; margin-top: 4px;
      border-top: 1px solid var(--c-border); color: var(--cod-accent, #44D62C);
      font-size: 12.5px; font-weight: 600; background: transparent; cursor: pointer;
    }
    .clink-dd-add:hover { background: var(--c-hover); }
    .clink-dd-empty { padding: 10px; color: var(--c-text-3); font-size: 12.5px; }
    /* Toggle Link/Pasta no modal */
    .cl-type-toggle { display: flex; gap: 6px; }
    .cl-type-toggle button {
      flex: 1; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
      background: var(--c-content-2); border: 1px solid var(--c-border-2); color: var(--c-text-2); cursor: pointer;
    }
    .cl-type-toggle button.active { background: var(--cod-accent-soft, rgba(68,214,44,.12)); border-color: var(--cod-accent, #44D62C); color: var(--cod-accent, #44D62C); }

    .chat-messages {
      flex: 1; overflow-y: auto;
      padding: 8px 0;
      background: var(--c-content);
    }
    .chat-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; gap: 8px; color: var(--c-text-3); font-size: 14.5px;
    }
    .chat-empty .chat-empty-emoji { font-size: 29px; opacity: .8; }

    .msg-row {
      position: relative;
      margin: 0 8px;
      padding: 10px 16px;
      border-radius: var(--cod-radius-md);
      transition: background-color .12s ease;
      /* SEM animation base aqui: a entrada de msg nova é o .cj-enter (A1,
         via animateNewEntry — só no item novo). Uma animation base neste
         seletor re-roda quando o .cj-enter é removido no animationend
         (troca de animation-name reinicia do frame 0) → a msg recém-chegada
         "pisca" (aparece, some e re-anima). Mesma armadilha documentada no
         .flash-highlight abaixo. */
    }
    .msg-row:hover { background: var(--c-content-2); }
    .msg-row .msg-inner {
      display: flex; gap: 12px;
    }
    .msg-avatar {
      width: 36px; height: 36px; flex-shrink: 0;
      border-radius: var(--cod-radius-full); display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      margin-top: 2px;
    }
    .msg-body { min-width: 0; flex: 1; }
    .msg-head {
      display: flex; align-items: center; gap: 6px; margin-bottom: 1px;
    }
    .msg-author {
      /* font-weight 700 (faux-bold sintetizado pelo browser) em vez de
         var(--cod-fw-semi)=500: Nexa só vem em peso 400, e 500 fica
         visualmente indistinguível de regular. 700 dá negrito visível.
         A escolha de não usar var(--cod-fw-bold) (também=500) é intencional —
         os strokes em 15px ficam OK no faux-bold (não no texto pequeno). */
      font-size: 15px; font-weight: 700; color: var(--c-text);
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .msg-time {
      font-size: 14px; color: var(--c-text-3); font-weight: 500; cursor: default;
      font-variant-numeric: tabular-nums;
    }
    /* Tag "(editada)" — discreta, ao lado do horário. */
    .msg-edited {
      font-size: 12px; color: var(--c-text-3); font-style: italic; cursor: default;
    }
    /* Estados otimistas de envio de DM. */
    .msg-row.dm-pending { opacity: .65; }
    .dm-msg-sending { font-size: 12px; color: var(--c-text-3); font-style: italic; }
    .dm-msg-failed {
      font-size: 12px; color: var(--c-danger, #f87171); font-weight: 600;
      background: transparent; border: 0; padding: 0; cursor: pointer;
    }
    .dm-msg-failed:hover { text-decoration: underline; }
    /* Banner do composer de DM em modo edição. */
    .dm-edit-banner {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 10px; margin-bottom: 6px;
      background: var(--c-content-2); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-md);
      font-size: 12.5px; color: var(--c-text-2);
    }
    .dm-edit-banner-label { flex: 1; }
    .dm-edit-cancel {
      background: transparent; border: 0; color: var(--c-accent);
      font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
    }
    .dm-edit-cancel:hover { text-decoration: underline; }
    /* Kebab da mensagem — só aparece no hover (autor/admin filtra dentro do menu). */
    .msg-menu-btn {
      margin-left: auto;
      width: 24px; height: 24px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-3); background: transparent; border: 0;
      cursor: pointer; opacity: 0;
      transition: opacity .14s, background .14s, color .14s;
    }
    .msg-row:hover .msg-menu-btn { opacity: 1; }
    .msg-menu-btn:hover { background: var(--c-hover); color: var(--c-text); }
    .msg-content {
      font-size: 15px; color: var(--c-text); line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .msg-content a {
      color: var(--c-accent); text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Menções (@user e #canal) em qualquer corpo de texto renderizado */
    .mention {
      display: inline-block;
      padding: 0 4px; margin: 0 1px;
      border-radius: 4px;
      font-weight: var(--cod-fw-semi);
      text-decoration: none;
      color: var(--c-accent);
      background: rgba(106,127,255,.10);
      transition: background .14s, color .14s;
    }
    .mention:hover {
      background: rgba(106,127,255,.18);
      color: var(--c-accent);
      text-decoration: none;
    }
    .mention-user { cursor: pointer; }
    .mention-channel { cursor: pointer; }

    /* @all e @admins — broadcast. Verde (cor da marca) pra diferenciar da
       menção comum (lilás), sem cursor pointer (não é link). Popover surge
       no hover/focus explicando o efeito (CSS-only, sem JS). */
    .mention-broadcast {
      color: var(--cod-accent);
      background: rgba(68, 214, 44, .14);
      cursor: default;
      position: relative;
    }
    .mention-broadcast:hover {
      background: rgba(68, 214, 44, .22);
      color: var(--cod-accent);
    }
    .mention-broadcast-pop {
      position: absolute;
      left: 50%; bottom: calc(100% + 6px);
      transform: translateX(-50%);
      background: var(--cod-surface-2);
      color: var(--cod-text);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      padding: 6px 10px;
      font-size: 12px; font-weight: var(--cod-fw-semi);
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(0,0,0,.35);
      opacity: 0; pointer-events: none;
      transition: opacity .14s ease;
      z-index: 50;
    }
    .mention-broadcast:hover .mention-broadcast-pop,
    .mention-broadcast:focus-visible .mention-broadcast-pop {
      opacity: 1;
    }

    /* Picker de menções (popup ancorado ao input) */
    .mention-picker {
      position: fixed; z-index: 70;
      min-width: 220px; max-width: 320px;
      max-height: 260px; overflow-y: auto;
      background: var(--c-content); color: var(--c-text);
      border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      padding: 4px;
    }
    .mention-picker-empty {
      padding: 10px 12px; color: var(--c-text-3); font-size: 13px;
    }
    .mention-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 8px; border-radius: var(--cod-radius-md);
      cursor: pointer;
      font-size: 14px;
    }
    .mention-item:hover, .mention-item.active {
      background: var(--c-hover);
    }
    .mention-item-avatar {
      width: 24px; height: 24px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent); flex-shrink: 0;
    }
    .mention-item-emoji {
      width: 24px; flex-shrink: 0; text-align: center; font-size: 16px; line-height: 1;
    }
    .mention-item-main {
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mention-item-sub {
      color: var(--c-text-3); font-size: 12px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* Popover "quem curtiu" (hover no botão de like). position: fixed —
       coordenadas vêm do getBoundingClientRect do botão (JS). */
    .like-pop {
      position: fixed; z-index: 80;
      min-width: 180px; max-width: 260px;
      max-height: 280px; overflow-y: auto;
      background: var(--c-content); color: var(--c-text);
      border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      box-shadow: 0 12px 30px rgba(0,0,0,.4);
      padding: 8px;
    }
    .like-pop-title {
      font-size: 12px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em;
      padding: 2px 4px 6px;
    }
    .like-pop-row {
      display: flex; align-items: center; gap: 8px;
      padding: 4px; border-radius: var(--cod-radius-md);
    }
    .like-pop-av {
      width: 24px; height: 24px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      overflow: hidden;
      font-size: 11px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent); flex-shrink: 0;
    }
    .like-pop-av img { width: 100%; height: 100%; object-fit: cover; }
    .like-pop-name {
      flex: 1; min-width: 0; font-size: 13.5px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .like-pop-more {
      font-size: 12px; color: var(--c-text-3); padding: 6px 4px 2px;
    }

    .msg-reactions {
      margin-top: 6px;
      display: flex; flex-wrap: wrap; gap: 4px;
      transition: opacity .14s ease;
    }
    .msg-row .msg-reactions:not(.has-items) { opacity: 0; }
    .msg-row:hover .msg-reactions { opacity: 1; }

    /* Otimista: mensagem em voo aparece com opacity baixa pra dar feedback
       de "ainda não persistiu". Quando o POST volta, a classe sai e ela
       fade-in pra opaca (transição suave evita o "piscar"). _failed marca
       em vermelho. */
    .msg-row { transition: opacity 220ms ease; }
    .msg-row.msg-pending { opacity: 0.6; }
    .msg-row.msg-pending .msg-time { font-style: italic; }
    .msg-row.msg-failed  .msg-time { color: var(--c-danger); font-weight: 500; }
    .msg-row.msg-failed  .msg-content { color: var(--c-danger); }

    /* Anexos em mensagens de chat (grid compacto) */
    .msg-attachments {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 6px;
    }
    .msg-attachment {
      display: block; max-width: 320px; max-height: 240px;
      border-radius: 8px; overflow: hidden;
      background: var(--c-bg);
    }
    .msg-attachment img, .msg-attachment video { display: block; max-width: 100%; max-height: 240px; }

    /* Áudio player customizado (estilo Slack) */
    .audio-player {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 8px 14px 8px 8px;
      background: var(--c-content-2);
      border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-full);
      max-width: 420px;
      min-width: 240px;
      user-select: none;
    }
    .audio-player.compact { padding: 6px 10px 6px 6px; gap: 8px; min-width: 200px; max-width: 320px; }
    .audio-play-btn {
      flex-shrink: 0;
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      background: var(--c-accent); color: var(--c-on-accent);
      border: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: filter .14s, transform .12s;
    }
    .audio-player.compact .audio-play-btn { width: 28px; height: 28px; }
    .audio-play-btn:hover { filter: brightness(1.08); }
    .audio-play-btn:active { transform: scale(0.95); }
    .audio-bars {
      flex: 1; height: 28px;
      display: flex; align-items: center; gap: 2px;
      cursor: pointer;
      min-width: 0;
    }
    .audio-player.compact .audio-bars { height: 22px; }
    .audio-bar {
      flex: 1 1 0; min-width: 2px;
      background: var(--c-text-3);
      border-radius: 2px;
      transition: background .12s;
      opacity: 0.55;
    }
    .audio-bar.played { background: var(--c-accent); opacity: 1; }
    .audio-time {
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      font-size: 12.5px; color: var(--c-text-2);
      min-width: 38px; text-align: right;
    }

    /* Estado "gravando" (Slack-like): barras animadas + timer + actions */
    .audio-rec-card {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 24px;
      box-shadow: 0 6px 18px rgba(0,0,0,.3);
    }
    .audio-rec-bars {
      display: flex; align-items: center; gap: 2px;
      height: 22px;
    }
    .audio-rec-bars span {
      width: 3px; height: 20px; border-radius: 2px;
      background: var(--c-accent);
      transform: scaleY(0.15);
      transform-origin: center;
      transition: transform 80ms linear;
      animation: audio-rec-pulse 1.2s ease-in-out infinite;
    }
    /* Quando o meter live tomar conta via transform inline, a animação fica
       sobrescrita pelo style atribuído via JS. */
    @keyframes audio-rec-pulse {
      0%, 100% { transform: scaleY(0.2); }
      50%      { transform: scaleY(1); }
    }
    .audio-rec-time { font-size: 13px; color: var(--c-text); font-variant-numeric: tabular-nums; }
    .audio-rec-close, .audio-rec-send {
      width: 28px; height: 28px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; border: 0;
    }
    .audio-rec-close {
      background: var(--c-content-2); color: var(--c-text-3);
    }
    .audio-rec-close:hover { background: var(--c-hover); color: var(--c-text); }
    .audio-rec-send {
      background: var(--c-accent); color: var(--c-on-accent);
    }
    .audio-rec-send:hover { filter: brightness(1.08); }
    .react-add {
      display: inline-flex; align-items: center; justify-content: center;
      height: 26px; min-width: 36px; padding: 0 6px;
      border-radius: var(--cod-radius-full); border: 1px solid var(--c-border-2);
      background: transparent; color: var(--c-text-2);
      cursor: pointer; transition: background .14s, color .14s;
      position: relative;
    }
    .react-add:hover { background: var(--c-hover); color: var(--c-text); }
    .react-add svg { width: 14px; height: 14px; }
    /* Botão "Salvar" da mensagem — usa o mesmo shape do react-add, só muda
       a cor quando ativo (filled em accent) pra dar feedback de "salvo". */
    .react-add.msg-bookmark.active {
      color: var(--c-accent);
      border-color: var(--c-accent);
    }

    .react-chip {
      position: relative;
      display: inline-flex; align-items: center; gap: 4px;
      height: 26px; padding: 0 9px;
      border-radius: var(--cod-radius-full); border: 1px solid var(--c-border-2);
      background: var(--c-content-2, transparent); color: var(--c-text-2);
      font-size: 12.5px; font-weight: var(--cod-fw-semi);
      cursor: pointer; transition: background .14s, color .14s, border-color .14s;
    }
    .react-chip:hover { background: var(--c-hover); color: var(--c-text); }
    .react-chip.byMe {
      background: var(--c-info-soft);
      border-color: var(--c-info-line);
      color: var(--c-text);
    }
    .react-chip .emoji { font-size: 14px; line-height: 1; }
    .react-chip .count { font-variant-numeric: tabular-nums; }

    /* Tooltip do chip de reação: mostra quem reagiu com aquele emoji.
       Aparece em hover/focus (sem fade pra evitar flicker), posicionado
       acima do chip via CSS puro — sem JS. Visível só pelo seletor
       :hover/focus-within pra ser dismissível por mouse-out natural. */
    .react-chip-tooltip {
      position: absolute;
      bottom: calc(100% + 6px); left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
      opacity: 0; visibility: hidden;
      transition: opacity .12s ease .15s;  /* 150ms delay evita flash em rollover rápido */
      z-index: 50;
      background: var(--c-content);
      border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-md);
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      padding: 8px 10px;
      min-width: 140px; max-width: 240px;
      font-size: 12px; font-weight: 500;
      color: var(--c-text);
      white-space: normal;
      text-align: left;
    }
    .react-chip:hover .react-chip-tooltip,
    .react-chip:focus-visible .react-chip-tooltip {
      opacity: 1; visibility: visible;
    }
    .react-chip-tooltip .tt-emoji { font-size: 16px; line-height: 1; margin-right: 4px; }
    .react-chip-tooltip .tt-head {
      font-size: 11px; color: var(--c-text-3, var(--c-text-2));
      text-transform: uppercase; letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .react-chip-tooltip .tt-name { display: block; line-height: 1.45; }
    .react-chip-tooltip .tt-more { color: var(--c-text-2); font-weight: 500; margin-top: 2px; }

    .react-picker {
      position: absolute; bottom: calc(100% + 6px); left: 0;
      display: flex; gap: 2px; padding: 4px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.18);
      z-index: 40; white-space: nowrap;
    }
    .react-picker button {
      width: 30px; height: 30px; border-radius: var(--cod-radius-md);
      font-size: 18px; line-height: 1; cursor: pointer;
      background: transparent; border: 0;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .14s, transform .12s;
    }
    .react-picker button:hover { background: var(--c-hover); transform: scale(1.15); }

    .post-card-actions .pca-btn.active {
      background: var(--c-info-soft); color: var(--c-accent);
    }
    .post-card-actions .pca-btn.active svg { fill: currentColor; }

    .share-modal { max-width: 460px; }
    .share-modal .pm-body { gap: 10px; padding: 16px 20px 20px; }
    .share-modal .share-row {
      display: flex; gap: 8px; align-items: center;
    }
    .share-modal .share-url {
      flex: 1; min-width: 0;
      padding: 10px 14px;
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      color: var(--cod-text); font-size: var(--cod-fs-sm);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      text-overflow: ellipsis;
      outline: 0;
    }
    .share-modal .share-url:focus {
      border-color: var(--cod-accent);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .share-modal .share-copy {
      padding: 9px 16px; border-radius: 8px;
      background: var(--c-accent); color: var(--c-on-accent);
      font-weight: var(--cod-fw-bold); font-size: 13.5px;
      cursor: pointer; transition: filter .14s;
      white-space: nowrap;
      border: 0;
    }
    .share-modal .share-copy:hover { filter: brightness(1.08); }
    .share-modal .share-copy.copied { background: var(--c-success-strong); color: var(--c-text); }
    .share-modal .share-hint {
      font-size: 13px; color: var(--c-text-3); margin-top: 2px;
    }
    /* Glow via ::after pra NÃO mexer na propriedade `animation` do card
       (que já roda floatIn no entrar). Sobrescrever `animation` aqui faria
       o floatIn re-rodar quando a classe é removida → "pisca" no fim. */
    .post-card.flash-highlight,
    .msg-row.flash-highlight {
      position: relative;
    }
    .post-card.flash-highlight::after,
    .msg-row.flash-highlight::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px var(--c-accent, #6a7fff);
      animation: flashFade 1.6s ease-out forwards;
    }
    @keyframes flashFade {
      0%, 30% { opacity: 1; }
      100%    { opacity: 0; }
    }

    /* Separador de data + Novo */
    .day-sep {
      position: relative;
      height: 22px;
      margin: 18px 24px 6px;
      --sep-color: var(--c-border-2);
    }
    .day-sep::before {
      content: '';
      position: absolute; left: 0; right: 0; top: 50%;
      border-top: 1px solid var(--sep-color);
      z-index: 0;
    }
    .day-sep.novo { --sep-color: var(--c-danger); }
    .day-sep .day-sep-label {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1; background: var(--c-content);
      padding: 0 14px;
      font-size: 11px; font-weight: var(--cod-fw-bold); color: var(--c-text-3);
      text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap;
    }
    .day-sep .novo-pill {
      position: absolute; right: 0; top: 50%;
      transform: translateY(-50%);
      z-index: 1; background: var(--c-content);
      padding: 0 12px 0 10px;
      font-size: 11px; font-weight: var(--cod-fw-bold); color: var(--c-danger);
      text-transform: uppercase; letter-spacing: .04em;
    }
    /* Quando estiver hover sobre uma msg, manter o fundo do dia-sep coerente */
    .day-sep .day-sep-label, .day-sep .novo-pill {
      transition: background-color .12s ease;
    }

    /* ── Composer ─────────────────────────────────────── */
    .chat-composer {
      flex-shrink: 0;
      padding: 12px 24px 18px;
      background: var(--c-content);
    }
    .chat-composer .composer-shell {
      background: var(--c-content-2);
      border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      transition: border-color .14s ease, box-shadow .14s ease;
    }
    .chat-composer .composer-shell:focus-within {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 3px oklch(76.9% .2358 141.24 / .15);
    }
    .chat-composer textarea {
      width: 100%; resize: none; border: 0; outline: 0; background: transparent;
      font-family: inherit; font-size: 15px; line-height: 1.45;
      color: var(--c-text);
      padding: 14px 16px; max-height: 200px; min-height: 24px;
    }
    .chat-composer textarea::placeholder { color: var(--c-text-3); }
    .composer-toolbar {
      display: flex; align-items: center; gap: 2px;
      padding: 4px 8px 8px 10px;
    }
    .composer-tool {
      width: 32px; height: 32px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
      position: relative;
    }
    .composer-tool:hover { background: var(--c-hover); color: var(--c-text); }
    .composer-tool.recording {
      color: var(--c-danger);
      animation: composer-pulse 1.4s ease-in-out infinite;
    }
    @keyframes composer-pulse {
      0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
    }

    /* Preview de anexos no composer */
    .composer-attachments {
      display: flex; gap: 8px; flex-wrap: wrap;
      padding: 8px 12px;
      background: var(--c-content-2);
      border-radius: var(--cod-radius-lg) 10px 0 0;
      border: 1px solid var(--c-border-2);
      border-bottom: 0;
    }
    .composer-att-item {
      position: relative;
      width: 88px; height: 88px; border-radius: 8px; overflow: hidden;
      background: var(--c-bg); border: 1px solid var(--c-border);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .composer-att-item img, .composer-att-item video {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .composer-att-item.uploading::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.7));
      backdrop-filter: blur(2px);
    }
    .composer-att-item.uploading::after {
      content: ''; position: absolute;
      top: 50%; left: 50%;
      width: 28px; height: 28px;
      margin: -14px 0 0 -14px;
      border-radius: var(--cod-radius-full);
      border: 3px solid rgba(255,255,255,.25);
      border-top-color: var(--c-accent);
      animation: spinner 0.9s linear infinite;
    }
    .composer-att-item.uploading > * { opacity: 0.4; }
    @keyframes spinner { to { transform: rotate(360deg); } }
    .composer-att-remove {
      position: absolute; top: 4px; right: 4px;
      width: 22px; height: 22px; border-radius: var(--cod-radius-full);
      background: rgba(0,0,0,.6); color: var(--c-text); border: 0;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .composer-att-audio {
      position: relative;
      width: 100%; padding: 4px 32px 4px 4px;
    }
    .composer-att-audio .composer-att-remove {
      top: 50%; transform: translateY(-50%);
      right: 6px;
    }

    /* Emoji picker (composer) */
    .composer-emoji-picker {
      /* Acima do .pm-overlay (z:60): o picker é appended no body e é aberto
         de dentro do modal de publicação (pm-emoji-btn). Em z:50 abria ATRÁS
         do overlay — daí "o emoji não funciona nas publicações, só no chat". */
      position: fixed; z-index: 70;
      width: 280px; max-height: 240px; overflow-y: auto;
      padding: 8px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.4);
      display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    }
    .composer-emoji-picker button {
      width: 30px; height: 30px; border-radius: var(--cod-radius-md);
      font-size: 18px; line-height: 1;
      background: transparent; border: 0; cursor: pointer;
      transition: background .14s, transform .12s;
    }
    .composer-emoji-picker button:hover { background: var(--c-hover); transform: scale(1.18); }

    /* Indicador de gravação de áudio */
    .audio-recording-bar {
      position: absolute; left: 0; right: 0; bottom: 100%;
      margin-bottom: 8px;
      padding: 8px 12px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: var(--c-text-2);
      box-shadow: 0 10px 24px rgba(0,0,0,.3);
    }
    .audio-recording-bar .ar-dot {
      width: 10px; height: 10px; border-radius: var(--cod-radius-full);
      background: var(--c-danger);
      animation: composer-pulse 1.2s ease-in-out infinite;
    }
    .audio-recording-bar .ar-time { font-variant-numeric: tabular-nums; }
    .audio-recording-bar .ar-actions { margin-left: auto; display: inline-flex; gap: 6px; }
    .audio-recording-bar button {
      padding: 4px 10px; border-radius: var(--cod-radius-md);
      font-size: 12.5px; font-weight: var(--cod-fw-semi);
      background: var(--c-content-2); color: var(--c-text);
      border: 1px solid var(--c-border-2); cursor: pointer;
    }
    .audio-recording-bar button.danger { color: var(--c-danger); border-color: rgba(239,68,68,.3); }
    .audio-recording-bar button.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
    .composer-send {
      margin-left: auto; flex-shrink: 0;
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--c-accent); color: var(--c-on-accent);
      transition: opacity .14s ease;
    }
    .composer-send:disabled { opacity: .35; cursor: not-allowed; }
    .composer-send:not(:disabled):hover { opacity: .9; }

    .composer-meta {
      margin-top: 6px; font-size: 13px; color: var(--c-text-3);
      display: flex; align-items: center; gap: 6px;
    }
    .composer-name-link {
      color: var(--c-accent); font-weight: var(--cod-fw-semi); cursor: pointer;
      background: none; border: 0; padding: 0; font-size: 13px;
    }

    /* ── Sidebar direita (Detalhes) ───────────────────── */
    .right-sidebar {
      width: 320px; flex-shrink: 0;
      background: var(--cod-bg-app);
      border-left: 1px solid var(--cod-border-subtle);
      display: flex; flex-direction: column;
      overflow-y: auto;
      padding: var(--cod-space-4);
      gap: var(--cod-space-4);
      /* Efeito "sendo engolida pela lateral": clip-path fecha progressivamente
         do lado esquerdo até zerar à direita — a sidebar parece ser absorvida
         pela borda direita em vez de voar pra fora. margin-right negativo
         reclama o espaço no layout em sincronia, fazendo o main crescer. */
      clip-path: inset(0 0 0 0);
      transition: clip-path .34s cubic-bezier(.4, 0, .2, 1),
                  margin-right .34s cubic-bezier(.4, 0, .2, 1);
    }
    .right-sidebar.hidden {
      /* Override do `.hidden { display: none !important }` global da linha 115
         pra permitir a animação. Mais específico (.right-sidebar.hidden) +
         !important ganha do `.hidden` simples com !important. */
      display: flex !important;
      clip-path: inset(0 0 0 100%);
      margin-right: -321px; /* 320px width + 1px border-left */
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .right-sidebar {
        transition: margin-right .15s ease, clip-path .15s ease;
      }
    }
    #rsb-chat {
      background: var(--cod-surface-1);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg);
      /* Scroll interno do card pras listas Online/Offline. Antes era
         overflow:hidden e o conteúdo (que pode ter centenas de membros
         offline = 5860px+) ficava CLIPADO pelo flex-shrink do parent
         (.right-sidebar) — sidebar não percebia overflow nem oferecia
         scroll. min-height:0 + flex:1 1 auto deixa o card ocupar a altura
         disponível e scrollar internamente. */
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
    }
    .rsb-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px 10px;
    }
    .rsb-title { font-size: 19px; font-weight: var(--cod-fw-bold); color: var(--c-text); }
    .rsb-count {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--c-text-2); font-size: 14px; font-weight: var(--cod-fw-semi);
    }
    .rsb-group {
      padding: 6px 0 12px;
    }
    .rsb-group-label {
      padding: 6px 20px; font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); text-transform: uppercase; letter-spacing: .06em;
      display: flex; align-items: center; gap: 8px;
    }
    .presence-dot {
      width: 8px; height: 8px; border-radius: var(--cod-radius-full);
      flex-shrink: 0;
    }
    .presence-dot.online {
      background: var(--c-success);
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: presencePulse 1.8s ease-out infinite;
    }
    .presence-dot.offline { background: var(--c-text-3); opacity: 0.55; }
    @keyframes presencePulse {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
      70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .rsb-item {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 20px;
      transition: background .14s ease;
      cursor: pointer;
    }
    .rsb-item:hover { background: var(--c-content-2); }
    /* Skeleton row: sem cursor pointer e sem hover bg — não é clicável. */
    .rsb-item-skel,
    .rsb-item-skel:hover { background: transparent; cursor: default; }
    .rsb-remove-btn {
      margin-left: auto;
      width: 22px; height: 22px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--c-content-2); color: var(--c-text-3);
      border: 0; cursor: pointer;
      /* Sempre visível pra admin descobrir a ação. Antes era opacity:0 com
         reveal no hover — admin não notava o botão. Hover dá feedback de
         "estado perigoso" (vermelho) pra evitar clique acidental. */
      opacity: .65; transition: opacity .14s, background .14s, color .14s;
    }
    .rsb-item:hover .rsb-remove-btn { opacity: 1; }
    .rsb-remove-btn:hover { background: var(--c-danger-soft); color: var(--c-danger); opacity: 1; }
    .rsb-add-member-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      margin: 0 18px 8px;
      padding: 10px 14px;
      width: calc(100% - 36px);
      background: color-mix(in oklch, var(--c-accent) 18%, transparent);
      color: var(--c-accent);
      border: 1px dashed color-mix(in oklch, var(--c-accent) 40%, transparent);
      border-radius: 8px;
      font-size: 13px; font-weight: var(--cod-fw-semi);
      cursor: pointer;
      transition: background .14s;
    }
    .rsb-add-member-btn:hover { background: color-mix(in oklch, var(--c-accent) 28%, transparent); }
    .rsb-avatar {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      flex-shrink: 0;
      overflow: hidden;
    }
    .rsb-avatar img {
      width: 100%; height: 100%; object-fit: cover;
      border-radius: inherit;
    }
    .rsb-name {
      flex: 1; min-width: 0;
      font-size: 15px; font-weight: 500; color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rsb-badge {
      font-size: 10.5px; font-weight: var(--cod-fw-bold);
      padding: 3px 8px; border-radius: var(--cod-radius-full);
      background: var(--c-content-2); color: var(--c-text-2);
      flex-shrink: 0;
    }
    .rsb-badge .ico {
      width: 10px; height: 10px; margin-right: 4px; display: inline-block; vertical-align: -1px;
    }

    /* ── Feed view (Home agregado) ────────────────────── */
    .feed-shell {
      display: flex; flex-direction: column; height: 100%;
      background: var(--c-bg);
      min-width: 0;
    }
    .feed-header {
      display: flex; align-items: center; gap: 8px;
      height: 72px; padding: 0 24px;
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      flex-shrink: 0;
    }
    .feed-header .fh-title {
      font-size: 19px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .feed-header .fh-sub {
      margin-left: 10px; font-size: 13px; color: var(--c-text-3);
      font-variant-numeric: tabular-nums;
    }
    .feed-header-actions {
      margin-left: auto; display: flex; align-items: center; gap: 8px;
    }
    .fha-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .fha-icon:hover { background: var(--c-hover); color: var(--c-text); }
    .fha-sort {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      font-size: 14.5px; font-weight: 500; color: var(--c-text);
      transition: background .14s;
    }
    .fha-sort:hover { background: var(--c-hover); }

    .feed-body { flex: 1; overflow-y: auto; padding: 24px; }
    .feed-layout {
      display: flex;
      gap: 28px;
      align-items: flex-start;
      width: 100%;
      max-width: 1140px;
      margin-inline: auto;
    }
    .feed-inner {
      flex: 1 1 0;
      min-width: 0;
      max-width: 720px;
    }
    /* Quando não há widgets (ex.: bookmarks, minhas publicações), o feed-inner
       centraliza dentro do feed-layout (senão fica encostado à esquerda). */
    #view-bookmarks .feed-inner,
    #view-my-posts .feed-inner { margin-inline: auto; }
    .feed-widgets {
      flex: 0 0 320px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 0;
      /* Em telas pequenas a coluna toda fica maior que a viewport. Limita à
         altura visível e a própria coluna rola — cada bloco mantém altura
         natural (sem scroll interno). Container de scroll separado do feed.
         Offset: 64px topbar + 16px de margem inferior = 80px de reserva,
         mais 40px de respiro pra não colar nos extremos = 120px. Bumpado
         de 200 → 120 pra mostrar mais widgets antes de scrollar (cabia
         ~3 cards, agora ~4-5). */
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      /* SEM overscroll-behavior: contain. Em telas altas o conteúdo do painel
         cabe inteiro (sem scroll interno) e o `contain` engolia o wheel sobre o
         painel, sem encadear pro feed-body → parecia "travado" no 2º monitor.
         Sem o contain: tela baixa rola o painel internamente; tela alta encadeia
         pro feed (comportamento esperado). */
      min-height: 0;
    }
    /* Compensação visual: a sidebar esquerda fixa empurra o ponto visual de
       "centro" do viewport pra direita. Em telas largas adicionamos padding-left
       extra pra o feed parecer centrado contra o viewport. */
    @media (min-width: 1280px) { .feed-body { padding-left: 64px;  padding-right: 32px; } }
    @media (min-width: 1500px) { .feed-body { padding-left: 120px; padding-right: 48px; } }
    @media (min-width: 1800px) { .feed-body { padding-left: 192px; padding-right: 64px; } }
    @media (max-width: 980px) {
      .feed-layout { flex-direction: column; align-items: stretch; }
      .feed-widgets {
        flex: 1 1 auto; position: static;
        /* No layout em coluna empilhada (mobile/tablet estreito), os widgets
           sobem junto com o feed e devem fluir natural — sem max-height nem
           scroll interno (senão dá scroll dentro de scroll). */
        max-height: none; overflow: visible;
      }
    }

    /* Card de boas-vindas pinado */
    .welcome-card {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; overflow: hidden;
      margin-bottom: 22px;
    }
    .welcome-banner {
      position: relative;
      aspect-ratio: 1920 / 540;
      background: var(--c-on-accent);
      border-bottom: 1px solid var(--c-border);
      overflow: hidden;
    }
    .welcome-banner img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .welcome-content { padding: 22px 26px; color: var(--c-text); }
    /* Header clicável (h2 + chevron) — toggle do minimize. Sem decoração de
       botão pra parecer apenas o título; cursor: pointer e hover sutil. */
    .welcome-header {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      background: none; border: 0; padding: 0; margin: 0 0 12px;
      color: inherit; text-align: left; cursor: pointer;
      font: inherit;
    }
    .welcome-header:hover .welcome-chevron { color: var(--c-text); }
    .welcome-title {
      font-size: 23px; font-weight: var(--cod-fw-bold); letter-spacing: -.01em;
      margin: 0; flex: 1;
    }
    .welcome-chevron {
      color: var(--c-text-2);
      transition: transform .18s ease, color .18s ease;
      flex-shrink: 0;
    }
    /* Default = expandido (chevron up). Minimizado = chevron down (rota
       180°) + só o texto das regras some. Banner continua visível pra
       preservar identidade visual mesmo quando colapsado. */
    .welcome-card.minimized .welcome-chevron { transform: rotate(180deg); }
    .welcome-card.minimized .welcome-text { display: none; }
    .welcome-card.minimized .welcome-header { margin-bottom: 0; }
    .welcome-text {
      font-size: 15.5px; color: var(--c-text); line-height: 1.6;
      white-space: pre-wrap;
    }
    .welcome-text strong { color: var(--c-text); font-weight: var(--cod-fw-semi); }

    /* Shimmer overlay do welcome-card. Visível enquanto a article tem
       data-skel="true"; renderFeedList() remove o atributo no fim do load
       pra revelar o conteúdo real (banner + regras). Mantém o mesmo
       aspect-ratio do banner real (1920/540) e a tipografia visual do
       welcome-content (padding 22px 26px). */
    .welcome-card[data-skel] > .welcome-banner,
    .welcome-card[data-skel] > .welcome-content { display: none; }
    .welcome-skel { display: none; }
    .welcome-card[data-skel] .welcome-skel { display: block; }
    .welcome-skel-banner {
      display: block;
      width: 100%;
      aspect-ratio: 1920 / 540;
      border-radius: 0;
    }
    .welcome-skel-body {
      padding: 22px 26px;
      display: flex; flex-direction: column; gap: 10px;
    }

    /* Widget de canais salvos no feed (rsb-feed-block #feed-saved-channels). */
    .saved-channel-row {
      width: 100%; display: flex; align-items: center; gap: 10px;
      padding: 10px 18px; background: transparent; border: 0; text-align: left;
      color: var(--cod-text); cursor: pointer;
      transition: background var(--cod-trans-fast);
    }
    .saved-channel-row:hover { background: var(--cod-surface-2); }
    .saved-channel-row + .saved-channel-row { border-top: 1px solid var(--cod-border-default); }
    .saved-channel-row svg { color: var(--cod-text-muted); flex-shrink: 0; }
    .saved-channel-emoji {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--cod-surface-2); border-radius: 6px;
      font-size: 16px; flex-shrink: 0;
    }
    .saved-channel-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .saved-channel-name {
      font-size: 13.5px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .saved-channel-group {
      font-size: 11.5px; color: var(--cod-text-muted); margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Botão "salvar canal" no chat header — quando marcado vira verde-brand. */
    #chat-bookmark-btn.is-saved { color: var(--cod-accent); }
    #chat-bookmark-btn.is-saved svg { fill: var(--cod-accent); stroke: var(--cod-accent); }

    /* Sub-info "Publicado em <canal>" no card de post */
    .post-card-channel {
      font-size: 13px; color: var(--c-text-3);
      margin-top: 2px;
    }
    .post-card-channel a { color: var(--c-text-2); }
    .post-card-channel a:hover { color: var(--c-accent); }

    /* ── Right sidebar widgets (Feed) — cards independentes ──────
       Cada bloco tem altura natural (sem scroll interno). Quando a soma
       passa da viewport, quem rola é o próprio .feed-widgets — separando
       o scroll da sidebar do scroll do feed. */
    .rsb-feed-block {
      background: var(--cod-surface-1);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg);
      padding: 8px 0 12px;
      overflow: hidden;        /* mantém o clip dos cantos arredondados */
      display: flex; flex-direction: column;
      flex: 0 0 auto;          /* altura natural, não encolhe */
    }
    .rsb-feed-head {
      display: flex; align-items: center; gap: 8px;
      padding: 16px 18px 10px;
      font-size: 16px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      letter-spacing: -.005em;
      flex: 0 0 auto;
    }
    .rsb-feed-head svg { color: var(--cod-text-muted); }
    #feed-events,
    #feed-trending {
      flex: 0 0 auto;
      min-height: 0;
    }

    /* Eventos futuros */
    .event-row {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 20px;
      transition: background .14s ease;
      cursor: pointer;
    }
    .event-row:hover { background: var(--c-content-2); }
    .event-date {
      width: 38px; flex-shrink: 0; text-align: center;
      background: var(--c-content-2); border-radius: 8px;
      padding: 4px 0; line-height: 1.1;
    }
    .event-date .em {
      display: block; font-size: 9.5px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); text-transform: uppercase;
      letter-spacing: .04em;
    }
    .event-date .ed {
      display: block; font-size: 16px; font-weight: var(--cod-fw-bold);
      color: var(--c-text);
    }
    .event-meta { min-width: 0; flex: 1; }
    .event-time {
      font-size: 11.5px; color: var(--c-text-3); margin-bottom: 2px;
    }
    .event-title {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      line-height: 1.35;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    /* Canal/turma do evento — diferencia aulas paralelas (mesmo título/horário
       em turmas distintas). Some quando o evento não tem canal (agenda geral). */
    .event-channel {
      font-size: 11px; color: var(--c-text-3); margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Primeiro evento da lista: destacado como "próxima aula". Borda accent
       à esquerda + fundo levemente tingido + caixa de data com cor accent.
       Linha countdown ("Sua próxima aula começa em…") aparece abaixo do título. */
    .event-row.is-next {
      background: var(--cod-accent-soft);
      border-left: 3px solid var(--cod-accent);
      padding-left: 17px; /* 20px - 3px de borda — alinhamento com as outras */
    }
    .event-row.is-next:hover {
      background: var(--cod-accent-strong);
    }
    .event-row.is-next .event-date {
      background: var(--cod-accent-strong);
    }
    /* Texto da caixa de data usa as cores do tema (claro no dark mode) —
       o destaque vem do tint verde no fundo, não do texto. */
    .event-row.is-next .event-date .em {
      color: var(--c-text-2);
    }
    .event-row.is-next .event-date .ed {
      color: var(--c-text);
    }
    .event-countdown {
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: var(--cod-fw-semi);
      color: var(--cod-accent);
      letter-spacing: -.002em;
    }
    .event-countdown::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: var(--cod-radius-full);
      background: var(--cod-accent);
    }
    /* Iminente / acontecendo agora: mantém o verde (cor da marca) e só liga
       o pulse pra chamar atenção. Versão antiga usava vermelho — decisão de
       produto: nunca vermelho em event countdown, sempre identidade verde. */
    .event-countdown.is-urgent::before {
      animation: event-pulse 1.4s ease-in-out infinite;
    }
    @keyframes event-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .55; transform: scale(1.35); }
    }

    /* Publicações em alta */
    .trending-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 20px;
      transition: background .14s ease;
      cursor: pointer;
    }
    .trending-row:hover { background: var(--c-content-2); }
    .trending-avatar {
      width: 28px; height: 28px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      flex-shrink: 0;
    }
    .trending-meta { min-width: 0; flex: 1; }
    .trending-author {
      font-size: 13.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .trending-snippet {
      margin-top: 1px; font-size: 13px; color: var(--c-text-2);
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }

    /* ── Posts view ──────────────────────────────────── */
    .post-shell {
      display: flex; flex-direction: column; height: 100%;
      background: var(--c-bg);
      min-width: 0;
    }
    .post-header {
      display: flex; align-items: center; gap: 8px;
      height: 72px; padding: 0 24px;
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      flex-shrink: 0;
    }
    .post-header .ph-emoji {
      font-size: 19px; line-height: 1;
      width: 20px; display: inline-flex; justify-content: center;
    }
    .post-header .ph-title {
      font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      letter-spacing: -.005em;
    }
    .post-header-actions {
      margin-left: auto; display: flex; align-items: center; gap: 12px;
    }
    /* Convites (admin) — link copyable + status pills + datetime input. */
    .inv-link-box {
      display: flex; gap: 8px; align-items: center;
      padding: 4px 4px 4px 14px;
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-full);
      transition: border-color var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    .inv-link-box:focus-within {
      border-color: var(--cod-accent);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .inv-link-box input {
      flex: 1; background: transparent; border: 0; outline: none;
      color: var(--cod-text); font-size: var(--cod-fs-sm);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    #inv-expires-at {
      padding: 10px 14px;
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      color: var(--cod-text);
      font-size: var(--cod-fs-sm);
      color-scheme: dark;
      transition: border-color var(--cod-trans-fast), background var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    #inv-expires-at:focus {
      border-color: var(--cod-accent);
      background: var(--cod-glass-bg-hover);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
      outline: none;
    }
    #inv-expires-at:disabled { opacity: .4; cursor: not-allowed; }
    .inv-status-pill {
      display: inline-block;
      padding: 2px 8px;
      font-size: 11px; font-weight: var(--cod-fw-bold); letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: var(--cod-radius-full);
    }
    .inv-status-pending { background: color-mix(in oklch, var(--c-accent) 18%, transparent); color: var(--c-accent); }
    .inv-status-used    { background: var(--c-content-2); color: var(--c-text-3); }
    .inv-status-expired { background: var(--c-danger-soft); color: var(--c-danger); }
    .inv-role-admin  { color: var(--c-warning); font-weight: var(--cod-fw-bold); }
    .inv-role-member { color: var(--c-text-2); }
    .inv-token-cell {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px; color: var(--c-text-2);
    }
    .inv-uses-link {
      padding: 0; border: 0; background: transparent;
      color: var(--c-accent); cursor: pointer;
      font-size: 13.5px; font-weight: 500;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .inv-uses-link:hover { filter: brightness(1.15); }

    /* Modal genérico (substitui window.confirm/alert). Container centralizado,
       sem header tradicional — usa ícone (opcional), título e mensagem
       diretamente. Suporta variante .modal-danger pra confirmações destrutivas
       (faixa accent vermelha no topo, glow no ícone, divisor antes do footer). */
    .modal-generic {
      position: relative;
      max-width: 440px; width: 100%;
      padding: 32px 28px 0;
      background: var(--c-content);
      border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-xl);
      box-shadow: var(--cod-shadow-lg);
      text-align: center;
      overflow: hidden;
      animation: modal-pop .22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Faixa de acento no topo — verde por default, vermelha em destrutivos */
    .modal-generic::before {
      content: ''; position: absolute; left: 0; right: 0; top: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--cod-accent) 50%, transparent 100%);
      opacity: .85;
    }
    .modal-generic.modal-danger::before {
      background: linear-gradient(90deg, transparent 0%, var(--c-danger) 50%, transparent 100%);
    }
    .modal-generic.modal-warning::before {
      background: linear-gradient(90deg, transparent 0%, var(--c-warning) 50%, transparent 100%);
    }
    @keyframes modal-pop {
      from { transform: translateY(12px) scale(.96); opacity: 0; }
      to   { transform: translateY(0)    scale(1);   opacity: 1; }
    }
    .modal-close-x {
      position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; color: var(--c-text-3); border: 0;
      cursor: pointer;
      transition: background var(--cod-trans-fast), color var(--cod-trans-fast);
    }
    .modal-close-x:hover { background: var(--c-content-2); color: var(--c-text); }
    .modal-icon {
      width: 64px; height: 64px; margin: 4px auto 18px;
      border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      position: relative;
    }
    /* Anel concêntrico atrás do ícone — discreto, dá peso visual */
    .modal-icon::after {
      content: ''; position: absolute; inset: -8px;
      border-radius: var(--cod-radius-full);
      border: 1px solid currentColor;
      opacity: .18;
    }
    .modal-icon.danger {
      background: var(--c-danger-soft);
      color: var(--c-danger);
      box-shadow: 0 0 0 6px rgba(239, 68, 68, .06);
    }
    .modal-icon.warning {
      background: var(--c-warning-soft);
      color: var(--c-warning);
      box-shadow: 0 0 0 6px rgba(251, 191, 36, .06);
    }
    .modal-icon.info {
      background: var(--c-accent-soft);
      color: var(--c-accent);
      box-shadow: 0 0 0 6px var(--cod-accent-soft);
    }
    .modal-title {
      font-size: 20px; font-weight: var(--cod-fw-bold);
      color: var(--c-text);
      margin: 0 0 10px;
      letter-spacing: -.015em;
      line-height: 1.25;
    }
    /* Sem corpo: aumenta o respiro inferior do título pra não colar no footer */
    .modal-generic:not(:has(#modal-message:not([hidden]))) .modal-title { margin-bottom: 24px; }
    .modal-message {
      font-size: 14.5px; line-height: 1.6;
      color: var(--c-text-2); white-space: pre-line;
      max-width: 360px;
      margin: 0 auto 24px;
    }
    .modal-message[hidden] { display: none; }
    /* Wrapper de actions com fundo levemente mais escuro pra firmar a base do modal */
    .modal-actions {
      display: flex; gap: 10px; justify-content: stretch;
      padding: 16px 28px;
      margin: 0 -28px;
      background: var(--cod-bg-app);
      border-top: 1px solid var(--c-border);
    }
    .modal-btn {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 11px 18px; border-radius: var(--cod-radius-full); border: 1px solid transparent;
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-bold);
      cursor: pointer; white-space: nowrap;
      transition: background var(--cod-trans-base), color var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
    }
    .modal-btn:active:not(:disabled) { transform: scale(.98); }
    .modal-btn:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }
    .modal-btn-cancel {
      background: transparent; color: var(--c-text);
      border-color: var(--cod-border-strong);
    }
    .modal-btn-cancel:hover:not(:disabled) {
      background: var(--c-content-2);
      border-color: var(--cod-border-emphasis);
    }
    .modal-btn-ok {
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border-color: var(--cod-accent);
    }
    .modal-btn-ok:hover:not(:disabled) {
      background: var(--cod-accent-hover);
      border-color: var(--cod-accent-hover);
    }
    .modal-btn-ok.danger {
      background: var(--c-danger); color: var(--c-on-danger);
      border-color: var(--c-danger);
    }
    .modal-btn-ok.danger:hover:not(:disabled) {
      background: var(--c-danger-hover); border-color: var(--c-danger-hover);
    }
    .modal-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* Legacy: alguns lugares ainda usam pm-submit.danger pra confirmar destrutivo. */
    .pm-submit.danger {
      background: var(--c-danger) !important; color: var(--c-text) !important;
    }
    .pm-submit.danger:hover { background: var(--c-danger-hover) !important; }

    /* View "Canal exclusivo" — exibida quando o usuário abre um canal locked
       ao qual não tem acesso. Card alinhado em cima do centro vertical (off-
       center superior) pra ficar na "linha de leitura" natural — centralizado
       100% parecia muito baixo na tela. */
    .locked-shell {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 24px; background: var(--c-bg);
      min-width: 0;
    }
    .locked-card {
      max-width: 520px; width: 100%;
      padding: 40px 36px;
      background: var(--c-content);
      border: 1px solid var(--c-border);
      border-radius: 16px;
      text-align: center;
    }
    .locked-emoji { font-size: 48px; line-height: 1; margin-bottom: 16px; }
    .locked-title {
      font-size: 22px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      margin-bottom: 8px;
    }
    .locked-text {
      font-size: 15px; line-height: 1.5;
      color: var(--c-text-2);
      margin-bottom: 8px;
    }
    .locked-sub {
      font-size: 13px; color: var(--c-text-3);
      margin-bottom: 20px;
    }
    .locked-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 22px;
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border: 1px solid var(--cod-accent);
      border-radius: var(--cod-radius-full);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-bold);
      text-decoration: none;
      transition: background var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
    }
    .locked-btn:hover { background: var(--cod-accent-hover); border-color: var(--cod-accent-hover); }
    .locked-btn:active { transform: scale(.98); }
    .locked-btn:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }

    /* Aba "Vagas": embute o board (/board) num iframe; bloqueio reusa o
       padrão .locked-card. */
    .vagas-shell { display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; background: var(--c-bg); }
    /* iframe do board ocupa todo o painel da aba. */
    .vagas-frame { flex: 1 1 auto; width: 100%; border: 0; min-height: 0; display: block; background: var(--c-bg); }

    /* Banner de canal restrito (chat e posts). Visível pra todos quando ligado. */
    .channel-restricted-banner {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 24px;
      font-size: 13px; font-weight: 500;
      color: var(--c-warning); background: var(--c-warning-soft);
      border-bottom: 1px solid var(--c-border);
      flex-shrink: 0;
    }

    /* Barra de busca do chat — aparece abaixo do header quando ativada. */
    .chat-search-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 24px;
      background: var(--c-sidebar);
      border-bottom: 1px solid var(--c-border);
      flex-shrink: 0;
      color: var(--c-text-3);
    }
    .chat-search-bar input {
      flex: 1; background: transparent; border: 0; outline: none;
      color: var(--c-text); font-size: 14px;
    }
    .chat-search-bar input::placeholder { color: var(--c-text-3); }
    .chat-search-bar button {
      width: 26px; height: 26px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-3); background: transparent; border: 0; cursor: pointer;
      transition: background .14s, color .14s;
    }
    .chat-search-bar button:hover { background: var(--c-hover); color: var(--c-text); }
    .chat-search-results-meta {
      padding: 8px 24px;
      font-size: 12px; color: var(--c-text-3);
      border-bottom: 1px solid var(--c-border);
    }

    /* Modal de busca pra link interno (escolher publicação a referenciar) */
    .li-results {
      margin-top: 14px;
      max-height: 360px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 6px;
    }
    .li-result {
      display: flex; flex-direction: column; gap: 4px;
      padding: 10px 12px;
      background: var(--c-sidebar);
      border: 1px solid var(--c-border);
      border-radius: 8px;
      cursor: pointer;
      transition: background .14s, border-color .14s;
      text-align: left;
    }
    .li-result:hover { background: var(--c-hover); border-color: var(--c-border-2); }
    .li-result-title {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .li-result-sub {
      font-size: 12px; color: var(--c-text-3);
    }
    .li-results-empty {
      padding: 24px; text-align: center;
      color: var(--c-text-3); font-size: 13px;
    }

    /* GIF picker (Giphy). Grid responsivo de previews. Usamos height fixa em
       vez de aspect-ratio pra não depender de suporte/comportamento variante
       em <button> (cada cell era empilhado/sobrescrito em alguns browsers). */
    .gif-results {
      margin-top: 14px;
      max-height: 420px; overflow-y: auto;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    }
    .gif-results-empty {
      grid-column: 1 / -1;
      padding: 24px; text-align: center;
      color: var(--c-text-3); font-size: 13px;
    }
    .gif-result {
      position: relative;
      min-width: 0;
      height: 120px;
      border: 0; padding: 0; background: var(--c-sidebar);
      border-radius: var(--cod-radius-md); overflow: hidden;
      cursor: pointer;
      transition: opacity .14s;
    }
    .gif-result img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .gif-result:hover { opacity: .85; }
    /* Estado loading: dim + spinner centralizado enquanto importa pro S3 */
    .gif-result.loading { pointer-events: none; }
    .gif-result.loading::after {
      content: ''; position: absolute; inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 1;
    }
    .gif-result.loading::before {
      content: ''; position: absolute;
      top: 50%; left: 50%;
      width: 22px; height: 22px;
      margin: -11px 0 0 -11px;
      border: 3px solid rgba(255,255,255,.25);
      border-top-color: var(--c-text);
      border-radius: 50%;
      animation: gif-spin .8s linear infinite;
      z-index: 2;
    }
    @keyframes gif-spin { to { transform: rotate(360deg); } }

    /* Markdown mínimo renderizado em post-card-body e msg-content (heading,
       quote, code, code block). Mantém visual coeso com o design do feed. */
    .post-card-body h2.md-h1, .msg-content h2.md-h1 {
      font-size: 19px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      margin: 8px 0 4px; line-height: 1.3;
    }
    .post-card-body h3.md-h2, .msg-content h3.md-h2 {
      font-size: 16px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      margin: 6px 0 3px; line-height: 1.3;
    }
    .post-card-body blockquote.md-quote,
    .msg-content blockquote.md-quote {
      margin: 6px 0; padding: 4px 10px;
      border-left: 3px solid var(--c-border-2);
      color: var(--c-text-2); font-style: italic;
    }
    .post-card-body code.md-code, .msg-content code.md-code {
      padding: 1px 5px; border-radius: 4px;
      background: var(--c-sidebar); border: 1px solid var(--c-border);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .92em; color: var(--c-text);
    }
    .post-card-body pre.md-codeblock, .msg-content pre.md-codeblock {
      margin: 6px 0; padding: 10px 12px;
      background: var(--c-sidebar); border: 1px solid var(--c-border);
      border-radius: 8px; overflow-x: auto;
    }
    .post-card-body pre.md-codeblock code,
    .msg-content pre.md-codeblock code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px; color: var(--c-text);
      background: transparent; border: 0; padding: 0;
    }

    /* Popover de slash commands (toolbar do modal de publicação). */
    .slash-menu {
      position: fixed; z-index: 80;
      min-width: 200px;
      padding: 4px;
      background: var(--c-content); color: var(--c-text);
      border: 1px solid var(--c-border-2);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .slash-menu button {
      width: 100%; display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border: 0; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text);
      font-size: 13.5px; font-weight: 500; line-height: 1.2;
      text-align: left; cursor: pointer;
      transition: background .12s;
    }
    .slash-menu button:hover { background: var(--c-hover); }
    .slash-menu kbd {
      margin-left: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px; color: var(--c-text-3);
      padding: 1px 5px; border-radius: 4px;
      background: var(--c-sidebar); border: 1px solid var(--c-border);
    }

    /* Pill renderizado quando o post-card encontra um markdown link tipo
       [Texto](#chat/slug) — vira link interno clicável. */
    .internal-link {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 1px 6px;
      background: rgba(99,102,241,.15); color: #818cf8;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 500;
    }
    .internal-link:hover { background: rgba(99,102,241,.25); }
    .internal-link::before { content: "🔗"; font-size: 11px; opacity: .8; }
    .ph-sort {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      font-size: 14.5px; font-weight: 500; color: var(--c-text);
      background: transparent; transition: background .14s;
    }
    .ph-sort:hover { background: var(--c-hover); }
    .ph-members-stack {
      display: inline-flex; align-items: center;
      background: transparent; border-radius: var(--cod-radius-full);
      padding: 4px 10px 4px 4px;
      transition: background .14s;
    }
    .ph-members-stack:hover { background: var(--c-hover); }
    .ph-members-stack .avatar-mini {
      width: 26px; height: 26px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      border: 2px solid var(--c-sidebar);
      margin-left: -8px;
      overflow: hidden;
    }
    .ph-members-stack .avatar-mini:first-child { margin-left: 0; }
    .ph-members-stack .avatar-mini img {
      width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
      display: block;
    }
    .ph-members-stack .ph-members-count {
      font-size: 13px; font-weight: var(--cod-fw-semi); color: var(--c-text-2);
      margin-left: 8px;
    }
    .ph-new-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 22px; border-radius: var(--cod-radius-full);
      background: var(--c-accent); color: var(--c-on-accent);
      font-size: 14.5px; font-weight: var(--cod-fw-bold);
      transition: opacity .14s ease;
    }
    .ph-new-btn:hover { opacity: .9; }
    /* Quando o canal é admin-only e o user não é admin (applyChannelSettings
       seta `disabled`), bota o botão num estado claramente inativo: opacity
       baixa, cursor not-allowed, sem hover. Mesmo padrão pro post-trigger. */
    .ph-new-btn:disabled,
    .ph-new-btn[disabled] {
      opacity: .45; cursor: not-allowed;
    }
    .ph-new-btn:disabled:hover,
    .ph-new-btn[disabled]:hover { opacity: .45; }

    .post-list {
      flex: 1; overflow-y: auto;
      padding: 24px 0;
      background: var(--c-bg);
    }
    .post-list-inner {
      max-width: 720px; margin: 0 auto;
      padding: 0 24px;
    }
    .post-trigger {
      width: 100%;
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px;
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; margin-bottom: 22px;
      transition: box-shadow .14s ease, border-color .14s ease;
      cursor: pointer;
    }
    .post-trigger:hover { border-color: var(--c-border-2); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
    .post-trigger:disabled,
    .post-trigger[disabled] {
      opacity: .55; cursor: not-allowed;
    }
    .post-trigger:disabled:hover,
    .post-trigger[disabled]:hover { border-color: var(--c-border); box-shadow: none; }
    .post-trigger .trigger-avatar {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text); font-size: 11.5px; font-weight: var(--cod-fw-semi);
      flex-shrink: 0;
    }
    .post-trigger .trigger-text {
      flex: 1; text-align: left;
      color: var(--c-text-3); font-size: 15px;
    }
    .post-trigger .trigger-plus {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      background: var(--c-content-2); color: var(--c-text);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* Card de capa + descrição do canal — visível só quando o admin configurou.
       Renderizado pelo applyChannelSettings() acima do post-trigger. Mesma
       largura e moldura dos post-cards pra criar continuidade visual. */
    .channel-cover-card {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; overflow: hidden;
      margin-bottom: 22px;
    }
    .channel-cover-image {
      display: block; width: 100%; height: auto;
      max-height: 280px; object-fit: cover;
      background: var(--c-content-2);
    }
    .channel-cover-description {
      padding: 16px 20px;
      font-size: 14.5px; line-height: 1.55;
      color: var(--c-text-2);
      white-space: pre-wrap; word-wrap: break-word;
    }
    /* Quando há só descrição (sem capa), o padding superior dá mais respiro. */
    .channel-cover-card .channel-cover-image[hidden] + .channel-cover-description {
      padding-top: 20px;
    }
    /* Modal de detalhes do canal — reusa estrutura .pm-overlay/.pm-modal. */
    .cd-upload {
      position: relative;
      display: block;
      width: 100%; aspect-ratio: 3 / 1;
      border: 1px dashed var(--c-border-2); border-radius: var(--cod-radius-lg);
      background: var(--c-content-2);
      overflow: hidden; cursor: pointer;
      color: var(--c-text-3); font-size: 13.5px;
      display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
      transition: border-color .14s, background .14s;
    }
    .cd-upload:hover { border-color: var(--c-accent); }
    .cd-upload.has-image { padding: 0; border-style: solid; }
    .cd-upload-preview {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .cd-upload-remove {
      position: absolute; top: 10px; right: 10px;
      background: rgba(0,0,0,.7); color: var(--c-text);
      width: 30px; height: 30px; border-radius: var(--cod-radius-full);
      border: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cd-upload-remove:hover { background: rgba(0,0,0,.9); }
    .cd-upload input[type="file"] { display: none; }
    .cd-upload-busy {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.6); color: var(--c-text);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
    }
    .cd-description {
      width: 100%; min-height: 120px;
      padding: 12px 14px;
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      color: var(--cod-text); font: inherit; font-size: var(--cod-fs-sm); line-height: 1.5;
      resize: vertical;
      outline: 0;
      transition: border-color var(--cod-trans-fast), background var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    .cd-description:focus {
      border-color: var(--cod-accent);
      background: var(--cod-glass-bg-hover);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .cd-char-count {
      margin-top: 6px; font-size: 12px; color: var(--c-text-3);
      text-align: right;
    }

    /* Modal de membros do canal — reusa pm-overlay/pm-modal. Lista scrollável
       com search-as-you-type, item-por-linha (avatar + nome + headline + badge
       admin). Click no item abre o perfil. */
    .cm-search {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      background: var(--c-content-2);
      border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
      color: var(--c-text-3);
      margin-bottom: 12px;
    }
    .cm-search:focus-within { border-color: var(--c-accent); }
    .cm-search input {
      flex: 1; background: transparent; border: 0; outline: 0;
      color: var(--c-text); font-size: 14.5px; font: inherit;
    }
    .cm-search input::placeholder { color: var(--c-text-3); }
    .cm-list {
      max-height: 50vh; overflow-y: auto;
      margin: 0 -8px;
      padding: 4px 0;
    }
    .cm-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .14s;
    }
    .cm-item:hover { background: var(--c-content-2); }
    .cm-avatar {
      width: 38px; height: 38px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text); font-size: 13.5px; font-weight: var(--cod-fw-semi);
      flex-shrink: 0; overflow: hidden;
    }
    .cm-meta { min-width: 0; flex: 1; }
    .cm-name {
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      display: flex; align-items: center; gap: 6px;
    }
    .cm-headline {
      font-size: 12.5px; color: var(--c-text-3);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .cm-admin-badge {
      font-size: 9.5px; font-weight: var(--cod-fw-bold);
      padding: 2px 6px; border-radius: 4px;
      background: var(--cod-accent-soft); color: var(--cod-accent);
      letter-spacing: .04em; text-transform: uppercase;
    }
    .cm-empty, .cm-loading {
      padding: 24px 12px;
      text-align: center;
      color: var(--c-text-3); font-size: 13.5px;
    }
    .cm-footer-meta {
      flex: 1;
      font-size: 12.5px; color: var(--c-text-3);
    }

    .post-card {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px;
      margin-bottom: 22px; overflow: hidden;
      animation: floatIn .22s ease both;
    }
    .post-card-content {
      padding: 18px 22px;
    }
    /* Post fixado (admin): borda de destaque + tag "Fixado". */
    .post-card.pinned { border-color: var(--c-accent); }
    .post-pinned-tag {
      display: inline-flex; align-items: center; gap: 5px;
      margin-bottom: 12px;
      color: var(--c-accent); font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em;
    }
    .post-pinned-tag svg { display: block; }
    .post-card-head {
      display: flex; align-items: flex-start; gap: 12px;
      margin-bottom: 14px;
    }
    .post-card-avatar {
      width: 40px; height: 40px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text); font-size: 14px; font-weight: var(--cod-fw-semi);
      flex-shrink: 0;
      overflow: hidden;
    }
    /* Avatar com foto (img) cobre o container inteiro mantendo as iniciais
       como fallback até o img carregar. */
    .post-card-avatar img,
    .msg-avatar img,
    .trending-avatar img,
    .comment-avatar img,
    .cm-avatar img,
    .dm-row-avatar img,
    .att-avatar img,
    .pill-avatar img,
    .trigger-avatar img,
    .cc-avatar img,
    .notif-avatar img {
      width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
      display: block;
    }
    .msg-avatar,
    .trending-avatar,
    .comment-avatar,
    .cm-avatar,
    .dm-row-avatar,
    .att-avatar,
    .pill-avatar,
    .trigger-avatar,
    .cc-avatar,
    .notif-avatar {
      overflow: hidden;
    }
    /* Badge "Admin" ao lado do nome em posts/mensagens.
       Estilo discreto: outline accent + texto accent (sem fill chamativo).
       align-self: center sobrescreve o baseline do parent (.post-card-author/
       .msg-head usam align-items: baseline pra alinhar texto+time), garantindo
       que o pill fique centralizado verticalmente com o nome. */
    .admin-badge-inline {
      display: inline-flex; align-items: center;
      align-self: center;
      padding: 0 6px;
      height: 16px;
      margin-left: 6px;
      font-size: 9.5px; font-weight: var(--cod-fw-semi);
      letter-spacing: 0.04em;
      color: var(--cod-accent);
      background: var(--cod-accent-soft);
      border: 1px solid var(--cod-accent-line);
      border-radius: 4px;
      line-height: 1;
      vertical-align: middle;
      white-space: nowrap;
    }
    .post-card-meta { flex: 1; min-width: 0; }
    .post-card-author {
      display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    }
    .post-card-name {
      /* Faux-bold (700) em vez de var(--cod-fw-semi)=500. Ver .msg-author. */
      font-size: 15px; font-weight: 700; color: var(--c-text);
    }
    .post-card-time {
      font-size: 13px; color: var(--c-text-3); font-weight: 500;
    }
    .post-card-sub {
      margin-top: 2px; font-size: 13px; color: var(--c-text-3);
      /* Headline pode ser longa ("Senior X | Y | Z | Remote work specialist").
         Single-line + ellipsis pra não empurrar o card pra baixo. */
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 100%; min-width: 0;
    }
    .post-card-actions {
      display: flex; align-items: center; gap: 4px;
      color: var(--c-text-2); flex-shrink: 0;
    }
    .post-card-actions .pca-btn {
      width: 28px; height: 28px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2); transition: background .14s, color .14s;
    }
    .post-card-actions .pca-btn:hover { background: var(--c-hover); color: var(--c-text); }
    .post-card-actions .pca-share {
      font-size: 14px; font-weight: 500;
      padding: 4px 8px; border-radius: var(--cod-radius-md);
      color: var(--c-text-2); transition: background .14s, color .14s;
    }
    .post-card-actions .pca-share:hover { background: var(--c-hover); color: var(--c-text); }

    /* Popover de "Mais opções" dos cards (renderizado em document.body via JS). */
    .card-menu {
      position: fixed; z-index: 100;
      min-width: 200px;
      padding: 4px;
      background: var(--c-content); color: var(--c-text);
      border: 1px solid var(--c-border-2);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
      opacity: 0; transform: translateY(-4px);
      transition: opacity .12s, transform .12s;
      pointer-events: none;
    }
    .card-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .card-menu button {
      width: 100%;
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      font-size: 13.5px; font-weight: 500; line-height: 1.2;
      color: var(--c-text); background: transparent; border: 0;
      border-radius: var(--cod-radius-md);
      text-align: left; cursor: pointer;
      transition: background .12s;
    }
    .card-menu button:hover { background: var(--c-hover); }
    .card-menu button.danger { color: var(--c-danger); }
    .card-menu button.danger:hover { background: rgba(248,113,113,.1); }
    .card-menu hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; }

    .post-card-title {
      font-size: 21px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      line-height: 1.3; margin-bottom: 8px;
      letter-spacing: -.01em;
    }
    .post-card-body {
      /* Um passo mais claro que --c-text-2 (#A3A3A3), ainda abaixo do título
         branco — de-enfatiza o corpo sem perder legibilidade. */
      font-size: 15.5px; line-height: 1.55;
      color: color-mix(in srgb, var(--c-text-2) 60%, var(--c-text));
      white-space: pre-wrap; word-break: break-word;
    }
    .post-card-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
    .post-card-body.collapsed {
      display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .post-card-seemore {
      display: inline-flex; margin-top: 6px;
      color: var(--c-text-2); font-size: 15px; font-weight: 500;
    }
    .post-card-seemore:hover { color: var(--c-text); }

    .post-card-footer {
      display: flex; align-items: center; gap: 4px;
      padding: 10px 16px;
      border-top: 1px solid var(--c-border);
      color: var(--c-text-2);
    }
    .post-card-footer .pcf-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 10px; border-radius: var(--cod-radius-md);
      color: var(--c-text-2); font-size: 14.5px; font-weight: 500;
      transition: background .14s, color .14s;
    }
    .post-card-footer .pcf-btn:hover { background: var(--c-hover); color: var(--c-text); }
    .post-card-footer .pcf-btn.liked { color: var(--c-like); }
    .post-card-footer .pcf-btn.liked svg { fill: var(--c-like); stroke: var(--c-like); }
    /* WOW: "pop" (spring) do coração ao curtir. A classe é removida/readicionada
       via JS pra reiniciar em cliques repetidos. */
    .post-card-footer .pcf-btn.pcf-pop svg { animation: pcf-like-pop .42s cubic-bezier(.34,1.56,.64,1); }
    @keyframes pcf-like-pop {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.35); }
      55%  { transform: scale(.9); }
      100% { transform: scale(1); }
    }
    /* Burst de corações que sai do botão. Posicionado em coordenadas de tela
       (fixed) pra não ser cortado pelo overflow do card. */
    .pcf-burst { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
    .pcf-burst span {
      position: absolute; left: 0; top: 0;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--c-like, #f43f5e);
      transform: translate(-50%, -50%) scale(1);
      animation: pcf-burst-out .6s ease-out forwards;
    }
    @keyframes pcf-burst-out {
      0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); }
    }
    .post-card-footer .pcf-count {
      font-size: 13.5px; font-weight: var(--cod-fw-semi); line-height: 1;
    }
    .post-card-footer .pcf-meta {
      margin-left: auto; display: flex; align-items: center; gap: 10px;
      font-size: 14px; color: var(--c-text-2);
    }
    .post-card-footer .pcf-meta button {
      background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
    }
    .post-card-footer .pcf-meta button:hover { color: var(--c-text); }
    .post-card-footer .pcf-dot {
      width: 3px; height: 3px; border-radius: var(--cod-radius-full); background: var(--c-text-3);
    }

    /* Thread de comentários inline (em posts) */
    .post-comments {
      border-top: 1px solid var(--c-border);
      background: var(--c-bg);
    }
    .post-comments[hidden] { display: none; }
    .comments-list { padding: 12px 16px 4px; }
    .comments-empty {
      padding: 12px 4px 8px; color: var(--c-text-3); font-size: 14px;
    }
    .comment-row {
      display: flex; gap: 10px; padding: 8px 0;
    }
    .comment-avatar {
      width: 30px; height: 30px; border-radius: var(--cod-radius-full);
      flex-shrink: 0; color: var(--c-text);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: var(--cod-fw-semi);
    }
    .comment-body { min-width: 0; flex: 1; }
    .comment-card {
      background: var(--c-content-2); border-radius: 12px;
      padding: 8px 12px;
    }
    .comment-author {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .comment-content {
      margin-top: 2px;
      font-size: 14.5px; color: var(--c-text); line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .comment-content a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
    .comment-actions {
      margin-top: 4px; padding-left: 4px;
      display: flex; align-items: center; gap: 12px;
      font-size: 13px; color: var(--c-text-3);
    }
    .comment-like-btn {
      background: none; border: 0; padding: 0;
      display: inline-flex; align-items: center; gap: 4px;
      font: inherit; color: var(--c-text-3); cursor: pointer;
      transition: color .14s;
    }
    .comment-like-btn:hover { color: var(--c-text); }
    .comment-like-btn.liked { color: var(--c-like); }
    .comment-like-btn svg { width: 12px; height: 12px; }
    /* Editar/Apagar comentário (autor/admin) — mesma base visual do like. */
    .comment-act-btn {
      background: none; border: 0; padding: 0;
      display: inline-flex; align-items: center; gap: 4px;
      font: inherit; color: var(--c-text-3); cursor: pointer;
      transition: color .14s;
    }
    .comment-act-btn:hover { color: var(--c-text); }
    .comment-act-btn.danger:hover { color: var(--c-danger); }
    /* Editor inline de comentário. */
    .comment-edit-box { margin-top: 4px; }
    .comment-edit-box textarea {
      width: 100%; resize: vertical; min-height: 54px;
      background: var(--c-bg-2); color: var(--c-text);
      border: 1px solid var(--c-border); border-radius: 10px;
      padding: 8px 10px; font: inherit; line-height: 1.4;
    }
    .comment-edit-actions {
      display: flex; gap: 8px; margin-top: 6px;
    }
    .comment-edit-actions button {
      font: inherit; font-size: 13px; font-weight: 600;
      border-radius: 8px; padding: 5px 12px; cursor: pointer;
      border: 1px solid var(--c-border); background: var(--c-bg-2); color: var(--c-text);
    }
    .comment-edit-actions button.save {
      background: var(--c-accent); color: #06210a; border-color: var(--c-accent);
    }
    .comment-edit-actions button:disabled { opacity: .6; cursor: default; }
    .comment-time { font-variant-numeric: tabular-nums; }

    .comment-composer {
      display: flex; gap: 10px; align-items: center;
      padding: 10px 16px 14px;
    }
    .comment-composer .cc-avatar {
      width: 28px; height: 28px; border-radius: var(--cod-radius-full);
      flex-shrink: 0; color: var(--c-text);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: var(--cod-fw-semi);
    }
    .comment-composer .cc-shell {
      flex: 1; display: flex; align-items: center; gap: 6px;
      background: var(--c-content-2); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-full); padding: 4px 4px 4px 14px;
      transition: border-color .14s, box-shadow .14s;
    }
    .comment-composer .cc-shell:focus-within {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 3px oklch(76.9% .2358 141.24 / .15);
    }
    .comment-composer input {
      flex: 1; background: transparent; border: 0; outline: 0;
      font-family: inherit; font-size: 14.5px; color: var(--c-text);
      padding: 6px 0;
    }
    .comment-composer input::placeholder { color: var(--c-text-3); }
    .comment-composer .cc-send {
      width: 28px; height: 28px; border-radius: var(--cod-radius-full);
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--c-accent); color: var(--c-on-accent);
      transition: opacity .14s;
    }
    .comment-composer .cc-send:disabled { opacity: .35; cursor: not-allowed; }

    .post-list-empty {
      text-align: center; padding: 56px 0;
      color: var(--c-text-3); font-size: 15px;
    }

    /* ── Leaderboard ──────────────────────────────────── */
    .lb-shell { display: flex; flex-direction: column; height: 100%; background: var(--c-bg); }
    .lb-header {
      display: flex; align-items: center;
      height: 72px; padding: 0 24px;
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      flex-shrink: 0;
    }
    .lb-header h1 {
      font-size: 23px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      letter-spacing: -.01em;
    }
    .lb-body {
      flex: 1; overflow-y: auto; padding: 32px 24px;
    }
    .lb-inner { max-width: 720px; margin: 0 auto; }
    /* Top-tabs (Leaderboard | Membros) — unificação Membros+Leaderboard. */
    .lb-toptabs { display: flex; gap: 4px; align-items: center; }
    .lb-toptab {
      padding: 8px 16px; border-radius: var(--cod-radius-full);
      font-size: 15px; font-weight: var(--cod-fw-semi); color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .lb-toptab:hover { background: var(--c-hover); color: var(--c-text); }
    .lb-toptab.active { background: var(--c-content-2); color: var(--c-text); }
    .lb-members-panel { flex: 1; overflow-y: auto; }

    /* ── Página "Chats": rail PRÓPRIO de conversas (ao lado da sidebar) ──── */
    .chats-rail {
      width: 280px; flex-shrink: 0;
      background: var(--c-sidebar);
      border-right: 1px solid var(--c-border);
      display: flex; flex-direction: column;
    }
    .chats-rail-head {
      height: 72px; flex-shrink: 0; display: flex; align-items: center;
      justify-content: space-between; gap: 8px;
      padding: 0 12px 0 20px; border-bottom: 1px solid var(--c-border);
      font-size: 16px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .chats-rail-collapse {
      width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2); cursor: pointer; transition: background .14s, color .14s;
    }
    .chats-rail-collapse:hover { background: var(--c-hover); color: var(--c-text); }
    /* Colapsado: vira uma faixa fina só com o ícone (clica pra reabrir). */
    .chats-rail.collapsed { width: 48px; }
    .chats-rail.collapsed .chats-rail-title,
    .chats-rail.collapsed .chats-rail-list { display: none; }
    .chats-rail.collapsed .chats-rail-head { justify-content: center; padding: 0; }
    /* Página Chats é chat-only: esconde as tabs do canal e a barra de links/arquivos. */
    body.chats-mode #chat-tabbar,
    body.chats-mode #clinks-chat { display: none !important; }
    .chats-rail-list { flex: 1; overflow-y: auto; padding: 8px 0;
      scrollbar-width: thin; scrollbar-color: var(--cod-surface-3) transparent; }
    .chats-rail-list::-webkit-scrollbar { width: 8px; }
    .chats-rail-list::-webkit-scrollbar-thumb { background: var(--cod-surface-3); border-radius: var(--cod-radius-full); border: 2px solid var(--c-sidebar); }
    @media (max-width: 900px) { .chats-rail { display: none; } }
    .chats-section-label {
      padding: 12px 24px 6px; font-size: 12px; font-weight: var(--cod-fw-bold);
      text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3);
    }
    /* Layout de "conversa" (avatar + 2 linhas) — distinto da nav de canais, mas
       sóbrio: avatar neutro, ativo discreto, sem realces accent. */
    .chats-item {
      display: flex; align-items: center; gap: 10px; width: calc(100% - 12px);
      margin: 1px 6px; padding: 8px 10px; border-radius: 8px;
      cursor: pointer; text-align: left; color: var(--c-text-2);
      transition: background .14s;
    }
    .chats-item:hover { background: var(--c-hover); }
    .chats-item.active { background: var(--c-content-2); }
    .chats-item-av {
      width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--c-content); font-size: 15px; line-height: 1; overflow: hidden;
    }
    .chats-item-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .chats-item-av-init { color: #fff; font-weight: var(--cod-fw-bold); font-size: 12px; }
    .chats-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .chats-item-row1 { display: flex; align-items: baseline; gap: 8px; }
    .chats-item-name {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 14px; font-weight: 500; color: var(--c-text);
    }
    .chats-item.unread .chats-item-name { font-weight: var(--cod-fw-semi); }
    .chats-item-time { flex-shrink: 0; font-size: 11px; color: var(--c-text-3); }
    .chats-item-row2 { display: flex; align-items: center; gap: 8px; }
    .chats-item-sub {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 12px; color: var(--c-text-3);
    }
    .chats-item-badge {
      flex-shrink: 0; min-width: 17px; padding: 1px 6px; border-radius: var(--cod-radius-full);
      font-size: 10.5px; font-weight: var(--cod-fw-bold); line-height: 1.5; text-align: center;
      background: var(--c-accent); color: var(--c-on-accent);
    }
    .chats-empty-list { padding: 24px; font-size: 13.5px; color: var(--c-text-3); text-align: center; }
    .chats-empty { display: flex; align-items: center; justify-content: center; background: var(--c-bg); }
    .chats-empty-inner { text-align: center; color: var(--c-text-3); padding: 24px; }
    .chats-empty-inner svg { display: block; margin: 0 auto; color: var(--c-text-3); }
    .chats-empty-title { font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--c-text-2); margin-top: 12px; }
    .chats-empty-sub { font-size: 14px; margin-top: 4px; }

    .lb-profile {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg); padding: 28px;
      margin-bottom: 24px;
    }
    /* WOW: glow pulsante quando o usuário sobe de nível (celebrateLevelUp). */
    .lb-profile.lb-levelup {
      animation: lb-levelup-glow 2.2s ease-out;
    }
    @keyframes lb-levelup-glow {
      0%   { box-shadow: 0 0 0 0 oklch(76.9% 0.2358 141.24 / 0); border-color: var(--c-border); }
      15%  { box-shadow: 0 0 0 4px oklch(76.9% 0.2358 141.24 / 0.35), 0 0 40px 8px oklch(76.9% 0.2358 141.24 / 0.4); border-color: var(--cod-accent, #44D62C); }
      100% { box-shadow: 0 0 0 0 oklch(76.9% 0.2358 141.24 / 0); border-color: var(--c-border); }
    }
    /* Confete do level-up — partículas em coordenadas de tela (fixed). */
    .lb-confetti { position: fixed; z-index: 95; pointer-events: none; width: 0; height: 0; }
    .lb-confetti span {
      position: absolute; left: 0; top: 0;
      width: 8px; height: 8px; border-radius: 2px;
      transform: translate(-50%, -50%);
      animation: lb-confetti-fly 1.3s cubic-bezier(.2,.7,.3,1) forwards;
    }
    @keyframes lb-confetti-fly {
      0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(320deg) scale(.5); }
    }
    .lb-profile-top {
      display: flex; align-items: center; gap: 20px;
      margin-bottom: 28px;
    }
    .lb-avatar-wrap {
      position: relative; flex-shrink: 0;
    }
    .lb-avatar {
      width: 76px; height: 76px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      font-size: 27px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      background: linear-gradient(135deg, #2b6a16, #1a4a0d);
      object-fit: cover; overflow: hidden;
    }
    .lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .lb-avatar-level {
      position: absolute; bottom: -2px; right: -2px;
      width: 26px; height: 26px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      background: var(--cod-warning); color: var(--c-on-accent);
      font-size: 11.5px; font-weight: 800;
      border: 3px solid var(--c-content);
    }
    .lb-name {
      font-size: 23px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      letter-spacing: -.01em;
    }
    .lb-points {
      font-size: 15px; color: var(--c-text-2); margin-top: 4px;
    }
    .lb-level-pill {
      margin-left: auto; align-self: flex-start;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 12px; border-radius: var(--cod-radius-full);
      background: rgba(245, 158, 11, .12);
      color: #f59e0b;
      font-size: 14px; font-weight: var(--cod-fw-semi);
    }
    .lb-level-pill .pill-sep {
      width: 1px; height: 14px; background: rgba(245, 158, 11, .35);
    }
    .lb-level-pill .pill-trophy { font-size: 15px; }
    /* #lb-pill-level vira flex container — centraliza vertical o ícone
       elite (img 16px) com a linha do texto da pill (14px font, line-height
       padrão). Antes usava inline-block + vertical-align:middle, que
       deixava o img levemente desalinhado em relação ao label "Elite". */
    #lb-pill-level {
      display: inline-flex; align-items: center;
    }
    .lb-tonext {
      font-size: 14px; color: var(--c-text-2); margin-top: 8px;
      text-align: right;
    }
    .lb-tonext-help {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: var(--cod-radius-full);
      border: 1px solid var(--c-text-3); color: var(--c-text-3);
      font-size: 9px; margin-left: 4px; cursor: help;
    }

    .lb-levels {
      display: grid; gap: 14px;
      grid-template-columns: repeat(3, 1fr);
    }
    .lb-level {
      display: flex; align-items: center; gap: 14px;
      padding: 8px 4px;
    }
    .lb-level-badge {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 13px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent);
      background: #f59e0b;
    }
    .lb-level.locked .lb-level-badge {
      background: var(--c-content-2); color: var(--c-text-3);
    }
    .lb-level-info { min-width: 0; line-height: 1.25; }
    .lb-level-num {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .lb-level.locked .lb-level-num { color: var(--c-text-2); }
    .lb-level-pts {
      font-size: 13.5px; color: var(--c-text-3); margin-top: 1px;
    }
    /* Elite: tile especial no fim da grid. Mantém tom laranja/dourado
       (mesma família dos outros badges de nível). */
    .lb-level-elite:not(.locked) .lb-level-badge {
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
      box-shadow: 0 0 0 1px rgba(251, 191, 36, .35);
    }
    .lb-level-elite:not(.locked) .lb-level-num {
      color: #fbbf24;
    }

    /* ── Modal "Como funcionam os pontos?" ──────────────────────────────── */
    .lb-howto-overlay {
      position: fixed; inset: 0; z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: lb-howto-fade .12s ease-out;
    }
    .lb-howto-overlay[hidden] { display: none !important; }
    @keyframes lb-howto-fade { from { opacity: 0 } to { opacity: 1 } }
    .lb-howto-modal {
      width: 100%; max-width: 480px;
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-xl);
      padding: 24px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      animation: lb-howto-rise .18s cubic-bezier(.22,1,.36,1);
    }
    @keyframes lb-howto-rise { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
    .lb-howto-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 8px;
    }
    .lb-howto-head h3 {
      font-size: 18px; font-weight: var(--cod-fw-bold);
      color: var(--c-text); letter-spacing: -.01em; margin: 0;
    }
    .lb-howto-close {
      width: 28px; height: 28px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2); background: transparent;
      transition: background var(--cod-trans-base), color var(--cod-trans-base);
    }
    .lb-howto-close:hover { background: var(--c-hover); color: var(--c-text); }
    .lb-howto-sub {
      font-size: 13.5px; color: var(--c-text-2); line-height: 1.5;
      margin: 0 0 16px;
    }
    .lb-howto-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 4px;
    }
    .lb-howto-list li {
      display: flex; align-items: center; gap: 12px;
      padding: 12px;
      border-radius: var(--cod-radius-lg);
      background: var(--c-content-2);
    }
    .lb-howto-icon {
      width: 36px; height: 36px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cod-accent);
      background: var(--cod-accent-soft);
      border: 1px solid var(--cod-accent-line);
      flex-shrink: 0;
    }
    .lb-howto-text { flex: 1; min-width: 0; }
    .lb-howto-name {
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      line-height: 1.25;
    }
    .lb-howto-desc {
      font-size: 12.5px; color: var(--c-text-3);
      margin-top: 2px; line-height: 1.4;
    }
    .lb-howto-pts {
      font-size: 14px; font-weight: var(--cod-fw-bold);
      color: var(--cod-accent);
      padding: 4px 10px;
      border-radius: var(--cod-radius-full);
      background: var(--cod-accent-soft);
      flex-shrink: 0;
    }

    .lb-tabs {
      display: flex; align-items: center; gap: 8px;
      margin: 8px 0 16px;
    }
    .lb-tab {
      padding: 6px 14px; border-radius: var(--cod-radius-full);
      background: transparent; border: 1px solid var(--c-border-2);
      color: var(--c-text-2);
      font-size: 14px; font-weight: var(--cod-fw-semi);
      transition: background .14s, color .14s, border-color .14s;
    }
    .lb-tab:hover { color: var(--c-text); }
    .lb-tab.active {
      background: var(--c-content-2); color: var(--c-text);
      border-color: var(--c-content-2);
    }
    .lb-howto {
      margin-left: auto; color: var(--c-text-2);
      font-size: 14px; cursor: pointer;
      background: none; border: 0;
    }
    .lb-howto:hover { color: var(--c-text); }

    .lb-list {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg); overflow: hidden;
    }
    .lb-row {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--c-border);
    }
    .lb-row:last-child { border-bottom: 0; }
    .lb-rank {
      width: 36px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text-2);
    }
    .lb-medal {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; color: var(--c-on-accent);
      position: relative;
    }
    .lb-medal.gold   { background: #f5c518; }
    .lb-medal.silver { background: #c0c5cf; }
    .lb-medal.bronze { background: #cd7f32; }
    .lb-medal::before {
      content: ''; position: absolute; inset: -3px;
      border-radius: var(--cod-radius-full);
      background: conic-gradient(from 0deg, currentColor 0deg, transparent 90deg, currentColor 180deg, transparent 270deg);
      mask: radial-gradient(circle, transparent 65%, #000 66%);
      -webkit-mask: radial-gradient(circle, transparent 65%, #000 66%);
      opacity: .25;
    }
    .lb-row-avatar {
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      flex-shrink: 0; overflow: hidden;
    }
    .lb-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .lb-row-meta { flex: 1; min-width: 0; }
    .lb-row-name {
      font-size: 15px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lb-row-headline {
      margin-top: 2px;
      font-size: 13.5px; color: var(--c-text-2);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lb-row-points {
      flex-shrink: 0;
      font-size: 14.5px; font-weight: var(--cod-fw-bold); color: var(--c-accent);
    }

    .lb-empty {
      padding: 32px 16px; text-align: center;
      color: var(--c-text-3); font-size: 15px;
    }

    /* ── Modal de nova publicação ─────────────────────── */
    .pm-overlay {
      position: fixed; inset: 0; z-index: 60;
      background: rgba(0, 0, 0, .65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity .18s ease;
    }
    /* Stacking: modais "secundários" abrem em cima de outros pm-overlay.
       att-overlay (confirmados) é o caso clássico — abre a partir do ed-overlay
       (detalhes do evento), e antes ficava por baixo porque ambos eram z:60. */
    #att-overlay,
    #li-overlay,
    #gif-overlay,
    #cm-overlay,
    #inv-uses-overlay,
    #confirm-overlay,
    #modal-overlay { z-index: 80; }
    /* Modo edição de publicação (v1): edita só título + texto. Esconde a toolbar
       de mídia/enquete e o seletor de espaço (não dá pra mover de canal). */
    #pm-overlay.editing .pm-toolbar,
    #pm-overlay.editing .pm-space-selector { display: none; }
    .pm-overlay.open { opacity: 1; pointer-events: auto; }
    .pm-modal {
      width: 100%; max-width: 720px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 12px;
      transform: translateY(12px); opacity: 0;
      transition: transform .22s ease, opacity .18s ease;
      display: flex; flex-direction: column;
      max-height: 80vh; overflow: hidden;
    }
    .pm-overlay.open .pm-modal { transform: translateY(0); opacity: 1; }
    .pm-overlay.fullscreen { padding: 0; }
    .pm-overlay.fullscreen .pm-modal {
      max-width: none; width: 100%;
      max-height: 100vh; height: 100vh;
      border-radius: 0; border: none;
    }
    .pm-overlay.fullscreen .pm-body { padding: 24px 32px; }
    .pm-overlay.fullscreen .pm-textarea { min-height: 50vh; }
    .pm-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--c-border);
    }
    .pm-header h5 {
      font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      letter-spacing: -.005em;
    }
    .pm-header-actions {
      display: flex; align-items: center; gap: 4px;
    }
    .pm-icon-btn {
      position: relative;
      width: 30px; height: 30px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .pm-icon-btn:hover { background: var(--c-hover); color: var(--c-text); }

    .pm-body {
      flex: 1; overflow-y: auto;
      padding: 18px 24px;
      display: flex; flex-direction: column; gap: 12px;
    }
    /* ── Modal "Convidar via email" ─────────────────────────────────────── */
    .ei-sub { font-size: 14px; color: var(--c-text-2); margin: 0; }
    .ei-sub strong { color: var(--c-text); }
    .ei-audience { display: flex; flex-direction: column; gap: 8px; }
    .ei-opt {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-md); cursor: pointer;
      transition: border-color .14s, background .14s;
    }
    .ei-opt:hover { background: var(--c-content-2); }
    .ei-opt input { margin-top: 3px; accent-color: var(--c-accent); }
    .ei-opt span { display: flex; flex-direction: column; gap: 2px; }
    .ei-opt strong { font-size: 14px; color: var(--c-text); font-weight: 600; }
    .ei-opt small { font-size: 12.5px; color: var(--c-text-3); }
    .ei-channel-wrap, .ei-individual-wrap { display: flex; flex-direction: column; gap: 8px; }
    .ei-channel-wrap label { font-size: 12.5px; color: var(--c-text-3); font-weight: 600; }
    .ei-channel-wrap select, .ei-individual-wrap #ei-search {
      width: 100%; background: var(--c-content-2); color: var(--c-text);
      border: 1px solid var(--c-border); border-radius: var(--cod-radius-md);
      padding: 10px 12px; font-family: inherit; font-size: 14px; outline: 0;
    }
    .ei-results { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
    .ei-result {
      display: flex; align-items: center; gap: 10px;
      width: 100%; text-align: left; background: transparent; border: 0;
      padding: 8px 11px; border-radius: var(--cod-radius-md); cursor: pointer; color: var(--c-text);
    }
    .ei-result:hover { background: var(--c-content-2); }
    .ei-result:disabled { opacity: .45; cursor: default; }
    .ei-result-avatar {
      width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
      overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #fff;
    }
    .ei-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ei-result-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .ei-result-name { font-size: 14px; font-weight: 500; }
    .ei-result-sub { font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ei-empty { font-size: 13px; color: var(--c-text-3); padding: 8px 11px; }
    .ei-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .ei-chips-empty { font-size: 12.5px; color: var(--c-text-3); }
    .ei-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--c-info-soft); color: var(--c-accent);
      border-radius: 999px; padding: 3px 6px 3px 4px; font-size: 12.5px; font-weight: 600;
    }
    .ei-chip-avatar {
      width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
      overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700; color: #fff;
    }
    .ei-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ei-chip button { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
    .ei-note { font-size: 12px; color: var(--c-text-3); margin: 0; }
    .ei-foot {
      display: flex; justify-content: flex-end; gap: 10px;
      padding: 14px 24px; border-top: 1px solid var(--c-border);
    }
    .ei-btn-ghost {
      background: transparent; border: 1px solid var(--c-border); color: var(--c-text-2);
      border-radius: var(--cod-radius-md); padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .ei-btn-ghost:hover { background: var(--c-content-2); color: var(--c-text); }
    .ei-btn-primary {
      background: var(--c-accent); border: 0; color: #000;
      border-radius: var(--cod-radius-md); padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .ei-btn-primary:hover { filter: brightness(1.06); }
    .ei-btn-primary:disabled { opacity: .55; cursor: default; }
    /* Modal "Inserir link" (hyperlink externo) — reusa .ei-foot / .ei-btn-*. */
    .lk-modal { max-width: 440px; }
    .lk-field { display: flex; flex-direction: column; gap: 6px; }
    .lk-field label { font-size: 12.5px; color: var(--c-text-3); font-weight: 600; }
    .lk-field input {
      width: 100%; background: var(--c-content-2); color: var(--c-text);
      border: 1px solid var(--c-border); border-radius: var(--cod-radius-md);
      padding: 10px 12px; font-family: inherit; font-size: 14px; outline: 0;
    }
    .lk-field input:focus { border-color: var(--c-accent); }
    .lk-error { color: #f87171; }
    .pm-title-input {
      width: 100%; background: transparent; color: var(--c-text);
      border: 0; outline: 0;
      font-family: inherit; font-size: 23px; font-weight: var(--cod-fw-bold);
      letter-spacing: -.01em; line-height: 1.3;
      padding: 0; resize: none; overflow: hidden;
    }
    .pm-title-input::placeholder { color: var(--c-text-3); opacity: 1; font-weight: var(--cod-fw-semi); }
    .pm-textarea {
      width: 100%; min-height: 160px; resize: none;
      border: 0; outline: 0; background: transparent;
      font-family: inherit; font-size: 15.5px; line-height: 1.55;
      color: var(--c-text);
      padding: 0;
    }
    .pm-textarea::placeholder { color: var(--c-text-3); }

    /* Pré-visualização de anexos no modal */
    .pm-attachments {
      display: flex; flex-direction: column; gap: 10px;
    }
    .pm-attachment {
      position: relative; max-width: 100%;
      border-radius: 12px; overflow: hidden;
      background: #000;
    }
    .pm-attachment img,
    .pm-attachment video {
      display: block; max-width: 100%; max-height: 360px;
      width: 100%; object-fit: contain;
      background: #000;
    }
    .pm-attachment-remove {
      position: absolute; top: 8px; right: 8px;
      width: 28px; height: 28px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.65); color: var(--c-text);
      transition: background .14s;
    }
    .pm-attachment-remove:hover { background: rgba(0,0,0,.85); }
    .pm-attachment-progress {
      padding: 8px 12px; font-size: 13.5px; color: var(--c-text-2);
      background: var(--c-content-2); border-radius: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .pm-attachment-progress.error { color: var(--c-danger); }

    .pm-footer {
      padding: 12px 18px;
      border-top: 1px solid var(--c-border);
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0;
    }
    /* Variante: ação destrutiva na esquerda + actions principais na direita */
    .pm-footer-split {
      justify-content: space-between;
    }
    .pm-actions-group {
      display: flex; align-items: center; gap: 8px;
      margin-left: auto;
    }
    /* Botão danger no footer — outline vermelho discreto, ganha fundo no hover */
    .pm-danger-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 16px; border-radius: var(--cod-radius-full);
      background: transparent; color: var(--c-danger);
      border: 1px solid var(--c-danger-soft);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-semi);
      cursor: pointer;
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast), transform var(--cod-trans-fast);
    }
    .pm-danger-btn:hover {
      background: var(--c-danger-soft); border-color: var(--c-danger);
    }
    .pm-danger-btn:active { transform: scale(.98); }
    .pm-danger-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-danger-soft); }

    /* Modal de confirmação genérico (.pm-modal share-modal#confirm-overlay).
       Mesmo container do pm-modal mas com tipografia maior pra mensagem e
       footer alinhado à direita. Usado pelo confirmModal() do admin. */
    .confirm-body { padding: 18px 24px 4px; }
    .confirm-message {
      font-size: var(--cod-fs-base); line-height: var(--cod-lh-relaxed);
      color: var(--cod-text-secondary); margin: 0;
      white-space: pre-line;
    }
    .pm-footer-confirm {
      justify-content: flex-end;
    }
    /* Variante de submit destrutivo dentro do confirm-overlay */
    .pm-submit.pm-submit-danger {
      background: var(--c-danger); color: var(--c-on-danger);
      border-color: var(--c-danger);
    }
    .pm-submit.pm-submit-danger:hover:not(:disabled) {
      background: var(--c-danger-hover); border-color: var(--c-danger-hover);
    }
    .pm-toolbar {
      display: flex; align-items: center; gap: 2px;
    }
    .pm-toolbar .pm-tool {
      width: 30px; height: 30px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .pm-toolbar .pm-tool:hover { background: var(--c-hover); color: var(--c-text); }
    .pm-toolbar .pm-tool.uploading { opacity: .5; cursor: progress; }
    .pm-toolbar .pm-tool.active { background: var(--cod-accent-soft); color: var(--cod-accent); }
    .pm-icon-btn.active { background: var(--cod-accent-soft); color: var(--cod-accent); }

    /* Loading no botão de capa enquanto o upload tá no ar. Esconde o ícone
       (svg) e desenha um spinner no centro. Bloqueia clique duplo via
       pointer-events. Mesma técnica do .composer-att-item.uploading. */
    .pm-icon-btn.uploading { cursor: progress; pointer-events: none; }
    .pm-icon-btn.uploading > svg { visibility: hidden; }
    .pm-icon-btn.uploading::after {
      content: ''; position: absolute;
      top: 50%; left: 50%;
      width: 16px; height: 16px;
      margin: -8px 0 0 -8px;
      border-radius: var(--cod-radius-full);
      border: 2px solid rgba(255,255,255,.18);
      border-top-color: currentColor;
      animation: spinner 0.9s linear infinite;
    }

    /* Preview da capa no modal de novo post — banner full-width acima do título.
       Botão de remover é absoluto no canto superior direito. */
    .pm-cover-preview {
      position: relative; margin-bottom: 14px;
      border-radius: var(--cod-radius-lg); overflow: hidden;
      background: var(--c-content-2);
    }
    .pm-cover-preview img {
      display: block; width: 100%; max-height: 260px;
      object-fit: cover;
    }
    .pm-cover-remove {
      position: absolute; top: 10px; right: 10px;
      width: 30px; height: 30px; border-radius: var(--cod-radius-full);
      background: rgba(0,0,0,.7); color: var(--c-text); border: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .pm-cover-remove:hover { background: rgba(0,0,0,.9); }

    /* Enquete no modal de novo post — bloco com opções editáveis, mín 2 / máx 4. */
    .pm-poll {
      margin-top: 14px; padding: 14px;
      background: var(--c-content-2);
      border: 1px solid var(--c-border); border-radius: var(--cod-radius-lg);
    }
    .pm-poll-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
      font-size: 13.5px; color: var(--c-text-2);
    }
    .pm-poll-cancel {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 8px; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text-3); border: 0; cursor: pointer;
      font-size: 12.5px;
      transition: background .14s, color .14s;
    }
    .pm-poll-cancel:hover { background: var(--c-hover); color: var(--c-text); }
    .pm-poll-options {
      display: flex; flex-direction: column; gap: 6px;
    }
    .pm-poll-option {
      display: flex; align-items: center; gap: 6px;
    }
    .pm-poll-option input {
      flex: 1; padding: 9px 14px; border-radius: var(--cod-radius-md);
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      border: 1px solid var(--cod-border-default);
      color: var(--cod-text); font: inherit; font-size: var(--cod-fs-sm);
      outline: 0;
      transition: border-color var(--cod-trans-fast), background var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    .pm-poll-option input:focus {
      border-color: var(--cod-accent);
      background: var(--cod-glass-bg-hover);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .pm-poll-remove {
      width: 30px; height: 30px; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text-3); border: 0;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .14s, color .14s;
    }
    .pm-poll-remove:hover { background: var(--c-hover); color: var(--c-text); }
    .pm-poll-remove[disabled] { opacity: 0; pointer-events: none; }
    .pm-poll-add {
      margin-top: 8px;
      padding: 6px 10px; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text-3);
      border: 1px dashed var(--c-border-2);
      font-size: 12.5px; cursor: pointer;
      transition: background .14s, color .14s, border-color .14s;
    }
    .pm-poll-add:hover { color: var(--c-text); border-color: var(--c-border-2); }
    .pm-poll-add[disabled] { opacity: .4; cursor: not-allowed; }

    /* Render da capa no post-card (feed/canal). Banner full-width acima do header. */
    .post-card-cover {
      display: block; width: 100%;
      max-height: 360px; object-fit: cover;
      background: var(--c-content-2);
    }

    /* Render da enquete dentro do post-card. */
    .post-card-poll {
      padding: 0 22px 16px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .pcp-opt {
      position: relative;
      display: flex; align-items: center;
      padding: 10px 14px; border-radius: 8px;
      background: var(--c-content-2); border: 1px solid var(--c-border);
      cursor: pointer;
      transition: background .14s, border-color .14s;
      overflow: hidden;
      user-select: none;
    }
    .pcp-opt:hover { border-color: var(--c-border-2); }
    .pcp-opt.voted { border-color: var(--cod-accent); }
    .pcp-opt.disabled { cursor: default; }
    .pcp-opt-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: var(--cod-accent-soft);
      transition: width .3s ease;
    }
    .pcp-opt.voted .pcp-opt-fill { background: var(--cod-accent-strong); }
    .pcp-opt-label, .pcp-opt-meta {
      position: relative; z-index: 1;
      font-size: 14px; color: var(--c-text);
    }
    .pcp-opt-label { flex: 1; min-width: 0; }
    .pcp-opt-meta { margin-left: 12px; font-weight: var(--cod-fw-semi); }
    .pcp-meta-text {
      margin-top: 4px;
      font-size: 12.5px; color: var(--c-text-3);
    }
    .pcp-voters-btn {
      background: transparent; border: 0; padding: 0;
      font: inherit; color: var(--c-text-3); cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .pcp-voters-btn:hover { color: var(--c-text-2); }

    /* Modal "Quem votou" — agrupa voters por opção. */
    .pv-group { margin-bottom: 18px; }
    .pv-group:last-child { margin-bottom: 0; }
    .pv-group-head {
      display: flex; align-items: baseline; gap: 8px;
      padding-bottom: 8px; margin-bottom: 8px;
      border-bottom: 1px solid var(--c-border);
    }
    .pv-group-label {
      font-weight: var(--cod-fw-semi); color: var(--c-text);
      font-size: 14px; flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pv-group-count {
      font-size: 12.5px; color: var(--c-text-3);
      font-weight: var(--cod-fw-semi);
    }
    .pv-row {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 0;
    }
    .pv-avatar {
      width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 11.5px; font-weight: var(--cod-fw-semi);
      flex-shrink: 0;
    }
    .pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .pv-name { font-size: 13.5px; color: var(--c-text); }
    .pv-time { font-size: 12px; color: var(--c-text-3); margin-left: auto; }

    .pm-actions {
      margin-left: auto; display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }

    .pm-space-selector { position: relative; }
    .pm-space-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      font-size: 14px; font-weight: 500; color: var(--c-text);
      transition: background .14s;
      max-width: 260px;
    }
    .pm-space-btn:hover { background: var(--c-hover); }
    .pm-space-btn .pm-space-label {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pm-space-btn .pm-space-empty {
      color: var(--c-text-3);
    }
    .pm-space-dropdown {
      position: absolute; bottom: calc(100% + 6px); right: 0;
      width: 320px; max-height: 360px; overflow-y: auto;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: var(--cod-radius-lg);
      box-shadow: 0 14px 38px rgba(0,0,0,.5);
      z-index: 5;
    }
    .pm-space-dropdown[hidden] { display: none; }
    .pm-space-search {
      padding: 10px 12px 6px; position: sticky; top: 0;
      background: var(--c-content); border-bottom: 1px solid var(--c-border);
    }
    .pm-space-search input {
      width: 100%; padding: 7px 10px; border-radius: 8px;
      background: var(--c-content-2); border: 0; outline: 0;
      color: var(--c-text); font-size: 14px;
    }
    .pm-space-search input::placeholder { color: var(--c-text-3); }
    .pm-space-group { padding: 6px 0; }
    .pm-space-group h6 {
      padding: 6px 14px 4px;
      font-size: 11px; font-weight: var(--cod-fw-bold); color: var(--c-text-3);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .pm-space-option {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 7px 14px;
      color: var(--c-text); font-size: 14.5px; font-weight: 500;
      transition: background .14s;
    }
    .pm-space-option:hover { background: var(--c-hover); }
    .pm-space-option .pm-opt-emoji {
      width: 18px; text-align: center; flex-shrink: 0;
    }
    .pm-space-option.empty {
      padding: 12px 14px; color: var(--c-text-3); font-size: 13.5px; cursor: default;
    }
    .pm-space-option.empty:hover { background: transparent; }

    /* Botões padrão dos modais — alinhados ao .cod-btn do design system
       (mesmo padding/peso/raio/transição). Mantemos os nomes pm-submit/
       pm-cancel porque o JS já referencia. */
    .pm-submit {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 22px; border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border: 1px solid var(--cod-accent);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-bold);
      cursor: pointer; user-select: none; white-space: nowrap;
      transition: background var(--cod-trans-base), border-color var(--cod-trans-base), opacity var(--cod-trans-fast), transform var(--cod-trans-fast);
    }
    .pm-submit:hover:not(:disabled) { background: var(--cod-accent-hover); border-color: var(--cod-accent-hover); }
    .pm-submit:active:not(:disabled) { transform: scale(.98); }
    .pm-submit:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }
    .pm-submit:disabled { opacity: .4; cursor: not-allowed; }

    .pm-cancel {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 18px; border-radius: var(--cod-radius-full);
      background: transparent; color: var(--cod-text);
      border: 1px solid var(--cod-border-strong);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-semi);
      cursor: pointer; user-select: none; white-space: nowrap;
      transition: background var(--cod-trans-base), color var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
    }
    .pm-cancel:hover:not(:disabled) { background: var(--cod-surface-2); border-color: var(--cod-border-emphasis); }
    .pm-cancel:active:not(:disabled) { transform: scale(.98); }
    .pm-cancel:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }

    /* Render de anexos em cards de post */
    .post-card-attachments {
      margin-top: 10px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .post-card-attachment {
      border-radius: 12px; overflow: hidden;
      background: #000;
    }
    .post-card-attachment img,
    .post-card-attachment video {
      display: block; width: 100%; max-height: 540px;
      object-fit: contain; background: #000;
    }
    .post-card-attachment.file,
    .msg-attachment.file { background: transparent; }

    /* Pill de download pra arquivos genéricos (kind='file'). */
    .file-pill {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--c-sidebar);
      border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
    }
    .file-pill-icon {
      flex-shrink: 0; width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--c-content); border-radius: 8px;
      color: var(--c-text-2);
    }
    .file-pill-meta { flex: 1; min-width: 0; }
    .file-pill-name {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .file-pill-size {
      font-size: 12px; color: var(--c-text-3); margin-top: 2px;
    }
    .file-pill-download {
      padding: 6px 14px;
      font-size: 13px; font-weight: var(--cod-fw-semi);
      background: var(--c-accent); color: var(--c-bg);
      border: 0; border-radius: var(--cod-radius-md);
      cursor: pointer;
      transition: opacity .14s;
    }
    .file-pill-download:hover { opacity: .9; }

    /* Pill no modal de publicação (preview do anexo antes de publicar) */
    .pm-file-pill {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      background: var(--c-sidebar);
      border: 1px solid var(--c-border);
      border-radius: 8px;
      width: 100%;
      color: var(--c-text-2);
    }
    .pm-file-meta { flex: 1; min-width: 0; }
    .pm-file-name {
      font-size: 13.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pm-file-size {
      font-size: 12px; color: var(--c-text-3); margin-top: 2px;
    }
    .file-pill-scan { color: var(--c-warning); font-weight: 500; }
    .file-pill-scan.danger { color: var(--c-danger); }
    .post-card-title {
      font-size: 21px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      line-height: 1.3; margin-bottom: 8px;
      letter-spacing: -.01em;
    }

    /* ── Eventos em escopo de espaço (Opened Classes etc.) ───────── */
    .space-events-inner { max-width: 760px; }
    .space-events-hero {
      position: relative;
      width: 100%;
      border-radius: var(--cod-radius-lg);
      overflow: hidden;
      background: linear-gradient(135deg, var(--cod-surface-1), var(--cod-bg-app));
      margin-bottom: 4px;
    }
    /* Largura sempre 100%; altura ajusta proporcionalmente à imagem (height:auto).
       Garante que covers de ratios diferentes (1024×320 e 1024×366) apareçam
       inteiras sem corte lateral. Hero fica com altura ligeiramente diferente
       por canal — aceitável já que cada turma tem uma cover por nível. */
    .space-events-hero img {
      width: 100%; height: auto; display: block;
    }
    .space-events-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
      pointer-events: none;
    }
    /* Em escopo de espaço, o hero do espaço já carrega a identidade visual.
       Evita repetir o cover do evento featured logo abaixo. */
    .space-events-inner .event-featured-cover { display: none; }

    /* ── Mensagens diretas (DMs) ──────────────────────── */
    .dm-shell {
      display: flex; height: 100%; background: var(--cod-bg-app);
      min-width: 0;
    }
    .dm-list {
      width: 320px; flex-shrink: 0;
      border-right: 1px solid var(--cod-border-default);
      display: flex; flex-direction: column;
      background: var(--cod-surface-1);
    }
    .dm-list-head {
      display: flex; align-items: center; gap: 8px;
      padding: 18px 18px 12px;
    }
    .dm-list-head h2 {
      font-size: 16px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
    }
    .dm-list-head .dm-actions {
      margin-left: auto; display: flex; gap: 6px;
    }
    .dm-list-head .dm-icon-btn {
      width: 30px; height: 30px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cod-text-muted);
      transition: background .14s, color .14s;
    }
    .dm-list-head .dm-icon-btn:hover { background: var(--cod-surface-2); color: var(--cod-text); }
    .dm-list-tabs {
      display: flex; gap: 16px; padding: 0 18px;
      border-bottom: 1px solid var(--cod-border-subtle);
    }
    .dm-list-tab {
      padding: 8px 0; font-size: 14px; font-weight: 500;
      color: var(--cod-text-muted); border-bottom: 2px solid transparent;
      transition: color .14s, border-color .14s;
    }
    .dm-list-tab.active { color: var(--cod-text); border-bottom-color: var(--cod-text); }
    .dm-search {
      padding: 12px 18px;
    }
    .dm-search input {
      width: 100%; padding: 8px 12px;
      background: var(--cod-surface-2); border: 1px solid var(--cod-border-default);
      color: var(--cod-text); font-size: 13.5px; outline: none;
      border-radius: 8px;
    }
    .dm-search input::placeholder { color: var(--cod-text-muted); }
    .dm-items { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
    .dm-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: var(--cod-radius-lg);
      margin-bottom: 2px; /* respiro entre itens: hover/selecionado não "colam" */
      cursor: pointer;
      transition: background .14s ease;
    }
    /* Hover e selecionado DISTINTOS (antes eram o mesmo surface-2 → o vizinho em
       hover ficava idêntico ao selecionado). Espelha o padrão do .chats-item. */
    .dm-item:hover { background: var(--c-hover); }
    .dm-item.active { background: var(--c-content-2); }
    .dm-item.active:hover { background: var(--c-content-2); }
    .dm-item .dm-avatar {
      width: 38px; height: 38px; border-radius: var(--cod-radius-full); flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text); font-size: 13px; font-weight: var(--cod-fw-semi);
      overflow: hidden;
    }
    .dm-item .dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-item .dm-meta { min-width: 0; flex: 1; }
    .dm-item .dm-head {
      display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    }
    .dm-item .dm-name {
      font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dm-item.unread .dm-name { font-weight: var(--cod-fw-bold); }
    .dm-item .dm-time {
      font-size: 11.5px; color: var(--cod-text-muted); flex-shrink: 0;
    }
    .dm-item .dm-snippet {
      margin-top: 2px; font-size: 12.5px; color: var(--cod-text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dm-item.unread .dm-snippet { color: var(--cod-text); }
    .dm-item .dm-badge {
      flex-shrink: 0;
      min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      font-size: 11px; font-weight: var(--cod-fw-bold); line-height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .dm-empty {
      padding: 36px 18px; text-align: center;
      color: var(--cod-text-muted); font-size: 13.5px;
    }

    /* Chat da DM — reusa cores do chat normal */
    .dm-chat {
      flex: 1; display: flex; flex-direction: column; min-width: 0;
      background: var(--cod-bg-app);
    }
    /* Botão "voltar" da DM: só no mobile empilhado (≤900px), ver media query. */
    .dm-back-btn {
      display: none;
      width: 32px; height: 32px; flex-shrink: 0; margin-right: 2px;
      border-radius: 8px; align-items: center; justify-content: center;
      color: var(--cod-text-muted); background: transparent;
    }
    .dm-back-btn:hover { background: var(--cod-surface-2); color: var(--cod-text); }
    .dm-chat-head {
      display: flex; align-items: center; gap: 10px;
      padding: 0 22px; height: 64px;
      border-bottom: 1px solid var(--cod-border-default);
      background: var(--cod-bg-app);
      flex-shrink: 0;
    }
    .dm-chat-head .dm-chat-avatar {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text); font-size: 12px; font-weight: var(--cod-fw-semi);
      overflow: hidden;
    }
    .dm-chat-head .dm-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-chat-head .dm-chat-name {
      font-size: 16px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
    }
    .dm-chat-head .dm-chat-actions {
      margin-left: auto; display: flex; gap: 4px;
    }
    .dm-chat-body {
      flex: 1; overflow-y: auto;
      padding: 8px 0;
    }
    .dm-chat-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; padding: 24px;
      color: var(--cod-text-muted); font-size: 14px; text-align: center;
    }
    .dm-chat-composer {
      flex-shrink: 0; padding: 14px 22px 18px;
      border-top: 1px solid var(--cod-border-default);
      background: var(--cod-bg-app);
    }
    .dm-chat-composer .composer-shell {
      background: var(--cod-surface-2); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg);
    }
    .dm-chat-composer textarea {
      width: 100%; resize: none; border: 0; outline: 0; background: transparent;
      font-family: inherit; font-size: 14.5px; line-height: 1.45;
      color: var(--cod-text);
      padding: 12px 16px; max-height: 200px;
    }
    .dm-chat-composer textarea::placeholder { color: var(--cod-text-muted); }
    .dm-chat-composer .dm-send-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 8px 8px;
    }
    /* Ferramentas de anexo da DM (imagem/GIF/arquivo/áudio) — mesmos
       .composer-tool do chat de canal, agrupados à esquerda do enviar. */
    .dm-composer-tools { display: flex; align-items: center; gap: 2px; }
    .dm-chat-composer .dm-send {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .dm-chat-composer .dm-send:disabled { opacity: .4; cursor: not-allowed; }

    .dm-empty-pane {
      flex: 1; display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 8px;
      color: var(--cod-text-muted);
    }
    .dm-empty-pane .dm-emoji { font-size: 32px; opacity: .7; }

    /* ── Eventos ──────────────────────────────────────── */
    .events-shell {
      display: flex; flex-direction: column; height: 100%;
      background: var(--cod-bg-app);
      min-width: 0;
    }
    .events-header {
      display: flex; align-items: center; gap: 12px;
      height: 72px; padding: 0 var(--cod-space-8);
      border-bottom: 1px solid var(--cod-border-subtle);
      background: var(--c-sidebar);
      flex-shrink: 0;
    }
    .events-header .eh-title {
      font-size: 23px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      letter-spacing: -.01em;
    }
    .events-header-actions {
      margin-left: auto; display: flex; align-items: center; gap: 10px;
    }
    .view-toggle {
      display: inline-flex; align-items: center;
      background: var(--cod-surface-2); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md); padding: 3px;
    }
    .view-toggle button {
      width: 32px; height: 28px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cod-text-muted);
      transition: background .14s, color .14s;
    }
    .view-toggle button:hover { color: var(--cod-text); }
    .view-toggle button.active {
      background: var(--cod-surface-3); color: var(--cod-text);
    }
    .events-public-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: var(--cod-radius-full);
      background: transparent; border: 1px solid var(--cod-border-default);
      color: var(--cod-text-muted); font-size: 14px; font-weight: 500;
    }
    .events-new-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 22px; border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      font-size: 14px; font-weight: var(--cod-fw-bold);
      transition: opacity .14s ease;
    }
    .events-new-btn:hover { background: var(--cod-accent-hover); }
    .events-more-btn {
      width: 36px; height: 36px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cod-text-muted);
      transition: background .14s, color .14s;
    }
    .events-more-btn:hover { background: var(--cod-surface-2); color: var(--cod-text); }

    .events-body { flex: 1; overflow-y: auto; padding: var(--cod-space-6) var(--cod-space-8); }

    /* Calendário */
    .cal-shell {
      background: var(--cod-surface-1);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg);
      overflow: hidden;
    }
    .cal-head {
      display: flex; align-items: center;
      padding: 18px 22px;
      border-bottom: 1px solid var(--cod-border-default);
    }
    .cal-head .cal-month {
      font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      text-transform: capitalize;
      flex: 1;
    }
    .cal-head .cal-nav {
      display: inline-flex; align-items: center; gap: 4px;
    }
    .cal-head .cal-nav button {
      width: 32px; height: 32px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--cod-text-muted);
      transition: background .14s, color .14s;
    }
    .cal-head .cal-nav button:hover { background: var(--cod-surface-3); color: var(--cod-text); }
    .cal-head .cal-today {
      margin-right: 8px;
      padding: 6px 12px; border-radius: var(--cod-radius-full);
      border: 1px solid var(--cod-border-default);
      color: var(--cod-text-muted); font-size: 13px; font-weight: 500;
      background: transparent;
      transition: background .14s, color .14s;
    }
    .cal-head .cal-today:hover { background: var(--cod-glass-bg); color: var(--cod-text); }

    .cal-weekdays {
      display: grid; grid-template-columns: repeat(7, 1fr);
      background: var(--cod-surface-1);
      border-bottom: 1px solid var(--cod-border-default);
    }
    .cal-weekdays div {
      padding: 10px 12px;
      font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--cod-text-muted);
      text-transform: uppercase; letter-spacing: .08em;
      text-align: left;
    }
    .cal-grid {
      display: grid; grid-template-columns: repeat(7, 1fr);
      grid-auto-rows: minmax(118px, 1fr);
    }
    .cal-day {
      position: relative;
      padding: 8px;
      border-right: 1px solid var(--cod-border-subtle);
      border-bottom: 1px solid var(--cod-border-subtle);
      background: var(--cod-surface-1);
      min-width: 0;
      display: flex; flex-direction: column; gap: 4px;
      transition: background .14s ease;
    }
    .cal-day:nth-child(7n) { border-right: 0; }
    .cal-day.other-month { background: var(--cod-bg-app); }
    .cal-day.other-month .cal-daynum { color: var(--cod-text-disabled); }
    .cal-day:hover { background: var(--cod-surface-2); }
    .cal-day.today { background: oklch(76.9% 0.2358 141.24 / 0.04); }
    .cal-daynum {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: var(--cod-radius-full);
      font-size: 12.5px; font-weight: var(--cod-fw-medium);
      color: var(--cod-text-secondary);
    }
    .cal-day.today .cal-daynum {
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      font-weight: var(--cod-fw-bold);
    }
    .cal-event {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 8px; border-radius: var(--cod-radius-md);
      background: var(--cod-surface-2); border-left: 3px solid var(--cod-accent);
      color: var(--cod-text);
      font-size: 12px; line-height: 1.3;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      cursor: pointer; transition: background .14s;
    }
    .cal-event:hover { background: var(--cod-surface-3); }
    .cal-event.going { border-left-color: var(--cod-accent); background: var(--cod-accent-soft); }
    .cal-event .cal-event-time {
      font-size: 11px; color: var(--cod-text-muted); font-weight: var(--cod-fw-medium);
      flex-shrink: 0;
    }
    .cal-event .cal-event-title {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-weight: var(--cod-fw-medium);
    }
    .cal-day-more {
      margin-top: 2px; padding: 2px 8px;
      font-size: 11.5px; color: var(--cod-text-muted);
      cursor: pointer;
      background: transparent; border: 0; text-align: left;
      border-radius: var(--cod-radius-md);
      font-family: inherit;
      transition: background .14s, color .14s;
    }
    .cal-day-more:hover { color: var(--cod-text); background: var(--cod-surface-2); }

    /* Modal "eventos do dia" (clique no "+n mais"): cards com barra de acento
       (mesma linguagem dos chips do calendário), horário início–fim empilhado
       e estado "Confirmado" em pill. */
    .dayev-modal { max-width: 440px; }
    .dayev-modal .pm-body { gap: 8px; }
    .dayev-item {
      position: relative; overflow: hidden;
      display: flex; align-items: center; gap: 14px;
      width: 100%; padding: 12px 14px 12px 17px;
      background: var(--cod-surface-2);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      color: var(--cod-text); font-family: inherit; text-align: left;
      cursor: pointer;
      transition: background .14s, transform .14s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dayev-item::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--cod-accent);
    }
    .dayev-item:hover { background: var(--cod-surface-3); transform: translateX(2px); }
    .dayev-item.going { background: var(--cod-accent-soft); }
    .dayev-time {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
      flex-shrink: 0; min-width: 46px;
    }
    .dayev-time-start { font-size: 14px; font-weight: var(--cod-fw-semi); color: var(--cod-text); }
    .dayev-time-end { font-size: 11.5px; color: var(--cod-text-muted); }
    .dayev-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .dayev-title-txt {
      font-size: 14.5px; font-weight: var(--cod-fw-semi);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dayev-sub {
      font-size: 12.5px; color: var(--cod-text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dayev-going {
      flex-shrink: 0;
      font-size: 11.5px; font-weight: var(--cod-fw-semi); color: var(--cod-accent);
      padding: 3px 10px; border-radius: var(--cod-radius-full);
      border: 1px solid var(--cod-accent);
      white-space: nowrap;
    }
    .dayev-chevron {
      flex-shrink: 0; color: var(--cod-text-muted);
      transition: color .14s, transform .14s;
    }
    .dayev-item:hover .dayev-chevron { color: var(--cod-text); transform: translateX(2px); }

    /* Lista de eventos */
    .events-list-inner { max-width: 760px; margin: 0 auto; }
    .events-list-tabs {
      display: flex; gap: 8px; margin-bottom: 22px;
    }
    .elist-tab {
      padding: 7px 16px; border-radius: var(--cod-radius-full);
      font-size: 14px; font-weight: 500;
      color: var(--cod-text-muted); background: transparent;
      border: 1px solid var(--cod-border-default);
      transition: background .14s, color .14s;
    }
    .elist-tab:hover { color: var(--cod-text); }
    .elist-tab.active { background: var(--cod-surface-3); color: var(--cod-text); border-color: var(--cod-surface-3); }

    .events-list-section + .events-list-section { margin-top: 26px; }
    .events-list-section h3 {
      font-size: 16px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      margin-bottom: 12px; letter-spacing: -.005em;
    }

    .event-featured {
      background: var(--cod-surface-1); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg); overflow: hidden;
      margin-bottom: 22px;
    }
    .event-featured-cover {
      width: 100%; aspect-ratio: 16/7; background: var(--cod-surface-2);
      object-fit: cover; display: block;
    }
    .event-featured-content { padding: 22px; }
    .event-featured-title {
      font-size: 22px; font-weight: var(--cod-fw-bold); color: var(--cod-text);
      letter-spacing: -.01em; margin-bottom: 6px;
    }
    .event-featured-date {
      color: var(--cod-text-muted); font-size: 14px; margin-bottom: 14px;
    }
    .event-featured-desc {
      color: var(--cod-text-secondary); font-size: 14.5px; line-height: 1.55;
      white-space: pre-wrap; word-break: break-word; margin-bottom: 14px;
    }
    .event-featured-foot {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin-top: 16px;
    }
    .event-tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: var(--cod-radius-full);
      background: var(--cod-surface-2); color: var(--cod-text-secondary);
      font-size: 12.5px; font-weight: 500;
    }
    .event-tag.success {
      background: var(--cod-accent-soft); color: var(--cod-accent);
    }
    /* Variante clicável: usado em "Próximo evento" pra link da chamada. */
    a.event-tag-link {
      text-decoration: none; cursor: pointer;
      transition: background var(--cod-trans-fast), color var(--cod-trans-fast), border-color var(--cod-trans-fast);
    }
    a.event-tag-link:hover {
      background: var(--cod-accent-soft); color: var(--cod-accent);
    }

    /* Links http(s) auto-detectados dentro de corpos de conteúdo (chat msg,
       post card, comentário, descrição de evento). Cobre tanto links gerados
       por escWithLinks (UI atual) quanto <a> dentro de bodyFormat='html'
       (posts importados do Circle). Cor accent + underline sutil no hover. */
    .msg-content a[href^="http"],
    .post-card-body a[href^="http"],
    .comment-content a[href^="http"],
    .event-featured-desc a[href^="http"],
    .ed-desc a[href^="http"] {
      color: var(--c-accent);
      text-decoration: none;
      word-break: break-word;
    }
    .msg-content a[href^="http"]:hover,
    .post-card-body a[href^="http"]:hover,
    .comment-content a[href^="http"]:hover,
    .event-featured-desc a[href^="http"]:hover,
    .ed-desc a[href^="http"]:hover {
      text-decoration: underline;
    }
    .event-rsvp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 24px; border-radius: var(--cod-radius-full);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-bold);
      cursor: pointer; border: 1px solid transparent;
      transition: background var(--cod-trans-base), color var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
      /* Largura estável p/ "Confirmar" e "Confirmado ✓" terem o MESMO tamanho:
         senão, ao confirmar, o botão cresce e a foot (flex-wrap) reflui/quebra
         linha. nowrap evita o texto+✓ quebrarem dentro do botão. */
      min-width: 148px; white-space: nowrap;
    }
    .event-rsvp-btn:active { transform: scale(.98); }
    .event-rsvp-btn:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }
    .event-rsvp-btn.idle {
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border-color: var(--cod-accent);
    }
    .event-rsvp-btn.idle:hover { background: var(--cod-accent-hover); border-color: var(--cod-accent-hover); }
    .event-rsvp-btn.going {
      background: transparent; color: var(--cod-accent);
      border-color: var(--cod-accent);
    }
    .event-rsvp-btn.going:hover { background: var(--cod-accent-soft); }
    /* Eventos passados: RSVP fica disabled (UX em "Passados" do canal events). */
    .event-rsvp-btn:disabled,
    .event-rsvp-btn[disabled] {
      opacity: .5; cursor: not-allowed;
    }
    .event-rsvp-btn:disabled:hover,
    .event-rsvp-btn[disabled]:hover {
      background: var(--cod-accent); border-color: var(--cod-accent);
    }
    .event-rsvp-btn.going:disabled:hover,
    .event-rsvp-btn.going[disabled]:hover {
      background: transparent; border-color: var(--cod-accent);
    }

    .event-card-row {
      display: flex; align-items: center; gap: 16px;
      padding: 14px; border-radius: var(--cod-radius-lg);
      background: var(--cod-surface-1); border: 1px solid var(--cod-border-default);
      margin-bottom: 10px;
      cursor: pointer;
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast);
    }
    /* Variante com capa: card empilha (cover full-width em cima, conteúdo embaixo).
       Padding zera no wrapper e vai pro body — assim a cover encosta nas bordas. */
    .event-card-row.has-cover {
      display: block; padding: 0; overflow: hidden;
    }
    .event-card-row.has-cover .event-card-cover {
      width: 100%; height: 240px; object-fit: cover; display: block;
    }
    .event-card-row.has-cover .event-card-body {
      display: flex; align-items: center; gap: 16px;
      padding: 14px;
    }
    .event-card-row:hover { background: var(--cod-surface-2); border-color: var(--cod-accent-line); }
    /* Botões internos (editar) não devem herdar o cursor pointer do card */
    .event-card-row .event-edit-btn { cursor: pointer; }
    .event-card-row .date-badge {
      width: 56px; flex-shrink: 0; text-align: center;
      padding: 8px 0; border-radius: var(--cod-radius-md);
      background: var(--cod-surface-2);
    }
    .event-card-row .date-badge .dd {
      font-size: 20px; font-weight: var(--cod-fw-bold); color: var(--cod-text);
      line-height: 1;
    }
    .event-card-row .date-badge .mm {
      font-size: 11px; color: var(--cod-text-muted); margin-top: 2px;
      text-transform: uppercase; letter-spacing: .06em;
    }
    .event-card-row .ec-meta { flex: 1; min-width: 0; }
    .event-card-row .ec-title {
      font-size: 15px; font-weight: var(--cod-fw-semi); color: var(--cod-text);
      line-height: 1.35;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .event-card-row .ec-sub {
      margin-top: 3px; font-size: 12.5px; color: var(--cod-text-muted);
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .event-card-row .ec-sub span { display: inline-flex; align-items: center; gap: 4px; }

    .events-empty {
      padding: 56px 16px; text-align: center;
      color: var(--cod-text-muted); font-size: 14.5px;
    }

    /* Modal de evento (reusa pm-overlay) */
    /* Eyebrow visível no modo edição — mostra "EDITANDO EVENTO" em accent */
    .em-eyebrow {
      display: none;
      align-items: center; gap: 6px;
      padding: 6px 12px; margin: -4px auto 16px;
      background: var(--cod-accent-soft);
      color: var(--cod-accent);
      border: 1px solid var(--cod-accent-line);
      border-radius: var(--cod-radius-full);
      font-size: var(--cod-fs-xs); font-weight: var(--cod-fw-bold);
      text-transform: uppercase; letter-spacing: .08em;
      width: fit-content;
    }
    .em-eyebrow.show { display: inline-flex; }
    .em-section { margin-bottom: 22px; }
    .em-section + .em-section { border-top: 1px solid var(--cod-border-subtle); padding-top: 22px; }
    .em-section h6 {
      font-size: var(--cod-fs-lg); font-weight: var(--cod-fw-semi); color: var(--cod-text);
      margin-bottom: 14px; letter-spacing: -.005em;
    }
    .em-field { display: grid; gap: 6px; margin-bottom: 14px; }
    .em-field label {
      font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-medium); color: var(--cod-text-secondary);
    }
    /* Inputs com glassmorphism alinhado ao .cod-input do DS */
    .em-field input[type="text"],
    .em-field input[type="datetime-local"],
    .em-field input[type="url"],
    .em-field select,
    .em-field textarea {
      width: 100%; padding: 11px 16px;
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      border: 1px solid var(--cod-border-default);
      color: var(--cod-text); font-family: inherit; font-size: var(--cod-fs-sm);
      border-radius: var(--cod-radius-md); outline: none;
      transition: border-color var(--cod-trans-fast), background var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    .em-field input::placeholder,
    .em-field textarea::placeholder { color: var(--cod-text-muted); }
    /* Select: a flecha nativa colava na borda direita. Substituímos por um
       chevron SVG inline posicionado com respiro, e zeramos a aparência nativa
       (Firefox/Safari mostravam estilos do SO em cima do background custom). */
    .em-field select {
      -webkit-appearance: none; appearance: none;
      padding-right: 38px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }
    .em-field input:focus, .em-field textarea:focus, .em-field select:focus {
      border-color: var(--cod-accent);
      background: var(--cod-glass-bg-hover);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .em-field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
    .em-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 640px) { .em-row { grid-template-columns: 1fr; } }
    .em-help { font-size: var(--cod-fs-xs); color: var(--cod-text-muted); }
    .em-required { color: var(--c-danger); font-weight: var(--cod-fw-bold); margin-left: 2px; }

    /* Organizador do evento: busca de membro + chip do selecionado */
    .em-organizer-field { position: relative; }
    .em-organizer-suggest {
      position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
      background: var(--cod-surface-1); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      max-height: 260px; overflow-y: auto;
      z-index: 5;
    }
    .em-org-suggest-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 8px 12px;
      background: transparent; border: 0;
      color: var(--cod-text); font-family: inherit; font-size: var(--cod-fs-sm);
      text-align: left; cursor: pointer; transition: background .14s;
    }
    .em-org-suggest-item:hover { background: var(--cod-surface-2); }
    .em-org-suggest-empty {
      padding: 10px 12px; font-size: var(--cod-fs-xs); color: var(--cod-text-muted);
    }
    .em-organizer-chip {
      display: flex; align-items: center; gap: 8px;
      margin-top: 8px; padding: 6px 10px;
      background: var(--cod-surface-2); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-full);
      width: fit-content; max-width: 100%;
    }
    .em-org-avatar {
      width: 24px; height: 24px; flex-shrink: 0;
      border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden;
    }
    .em-org-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
    .em-org-name {
      font-size: 13.5px; font-weight: var(--cod-fw-medium);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .em-org-username { font-size: 12px; color: var(--cod-text-muted); flex-shrink: 0; }
    .em-org-clear {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; flex-shrink: 0;
      background: transparent; border: 0; border-radius: var(--cod-radius-full);
      color: var(--cod-text-muted); cursor: pointer;
      transition: background .14s, color .14s;
    }
    .em-org-clear:hover { color: var(--cod-text); background: var(--cod-surface-3); }
    /* Modal de recorrência personalizada — herda o mesmo visual dos inputs principais */
    .rec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .rec-row label { font-size: 14px; color: var(--c-text-2); }
    .rec-row input[type="number"],
    .rec-row select,
    .rec-end-row input[type="date"],
    .rec-end-row input[type="number"] {
      padding: 8px 12px;
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-md);
      background: var(--cod-glass-bg);
      backdrop-filter: var(--cod-blur);
      -webkit-backdrop-filter: var(--cod-blur);
      color: var(--cod-text); font: inherit; font-size: var(--cod-fs-sm); outline: 0;
      transition: border-color var(--cod-trans-fast), background var(--cod-trans-fast), box-shadow var(--cod-trans-fast);
    }
    .rec-row input[type="number"] { width: 72px; }
    .rec-row select { min-width: 120px; }
    .rec-row input:focus, .rec-row select:focus,
    .rec-end-row input:focus {
      border-color: var(--cod-accent);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .rec-weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
    .rec-weekdays button {
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      background: var(--c-content-2); border: 1px solid var(--c-border-2);
      color: var(--c-accent); font-weight: var(--cod-fw-semi); font-size: 13px;
      cursor: pointer; transition: background .14s, color .14s, border-color .14s;
    }
    .rec-weekdays button.active {
      background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent);
    }
    .rec-end { display: flex; flex-direction: column; gap: 6px; }
    .rec-end-title { font-size: 14px; color: var(--c-text-2); margin-bottom: 2px; }
    .rec-end-row {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 0; cursor: pointer;
      font-size: 14px; color: var(--c-text);
    }
    .rec-end-row input[type="radio"] { margin: 0; }
    .rec-end-row input[type="number"] { width: 64px; }
    .rec-end-suffix { color: var(--c-text-3); }

    .em-radio-row { display: flex; flex-direction: column; gap: 8px; }
    .em-radio {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: var(--cod-radius-md);
      border: 1px solid var(--cod-border-default);
      cursor: pointer;
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast);
    }
    .em-radio:hover { background: var(--cod-glass-bg-hover); border-color: var(--cod-border-emphasis); }
    .em-radio:has(input:checked) {
      background: var(--cod-accent-soft); border-color: var(--cod-accent-line);
    }
    .em-radio input[type="radio"] { margin: 0; flex-shrink: 0; accent-color: var(--cod-accent); }
    .em-radio span { font-size: var(--cod-fs-sm); color: var(--cod-text); }

    /* Checkboxes de canais (mesmo visual dos radios pra consistência) */
    .em-channels-list { display: flex; flex-direction: column; gap: 8px; }
    .em-channels-list label.em-checkbox {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: var(--cod-radius-md);
      border: 1px solid var(--cod-border-default);
      cursor: pointer;
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast);
    }
    .em-channels-list label.em-checkbox:hover { background: var(--cod-glass-bg-hover); border-color: var(--cod-border-emphasis); }
    .em-channels-list label.em-checkbox:has(input:checked) {
      background: var(--cod-accent-soft); border-color: var(--cod-accent-line);
    }
    .em-channels-list input[type="checkbox"] { margin: 0; flex-shrink: 0; accent-color: var(--cod-accent); }
    .em-channels-list span { font-size: var(--cod-fs-sm); color: var(--cod-text); }
    .em-channels-list .em-channels-empty { font-size: var(--cod-fs-xs); color: var(--cod-text-muted); }

    /* ── Modal de perfil ──────────────────────────────── */
    /* Visual sóbrio inspirado no "Complete seu cadastro" do board: backdrop
       escuro com blur forte, surface-1 (#171717) profundo, bordas sutis. */
    .prof-overlay {
      position: fixed; inset: 0; z-index: 70;
      background: rgba(0, 0, 0, .82);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity .18s ease;
    }
    .prof-overlay.open { opacity: 1; pointer-events: auto; }
    .prof-modal {
      width: 95%; max-width: 1140px; height: 95%; max-height: 800px;
      /* Tom escuro uniforme em todo o modal (esquerda + direita). Antes
         o body do modal era --cod-surface-1 e só o painel esquerdo era
         --cod-bg-app — gerava degrau visual. */
      background: var(--cod-bg-app);
      border: 1px solid var(--cod-border-default);
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
      transform: translateY(12px) scale(.98); opacity: 0;
      transition: transform .22s ease, opacity .18s ease;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .prof-overlay.open .prof-modal { transform: translateY(0) scale(1); opacity: 1; }
    .prof-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 28px; border-bottom: 1px solid var(--cod-border-subtle);
    }
    .prof-header h5 { font-size: 18px; font-weight: var(--cod-fw-semi); color: var(--c-text); letter-spacing: -.005em; }
    .prof-body {
      flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
      overflow: hidden;
    }
    @media (min-width: 900px) {
      .prof-body { grid-template-columns: 360px 1fr; }
    }

    /* Painel esquerdo: surface mais profundo (#0D0D0D), sem radial-gradient
       verde — antes era acento "flashy" no topo, agora plano e sóbrio. */
    .prof-left {
      border-right: 1px solid var(--cod-border-subtle);
      overflow-y: auto;
      padding: 36px 24px;
      background: var(--cod-bg-app);
      text-align: center;
    }
    .prof-avatar-wrap {
      position: relative; width: 104px; height: 104px;
      margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
    }
    .prof-avatar-wrap svg.prof-ring {
      position: absolute; inset: 0; transform: rotate(-90deg);
    }
    .prof-avatar {
      width: 96px; height: 96px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      font-size: 29px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent);
      background: linear-gradient(135deg, var(--cod-accent) 0%, var(--c-accent-2) 100%);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
      overflow: hidden;
    }
    .prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
    /* Loading overlay durante upload da foto de perfil. */
    .prof-avatar.uploading { position: relative; }
    .prof-avatar.uploading::before {
      content: ''; position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.55);
      border-radius: inherit;
      z-index: 1;
    }
    .prof-avatar.uploading::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 28px; height: 28px;
      margin: -14px 0 0 -14px;
      border: 3px solid rgba(255, 255, 255, 0.2);
      border-top-color: var(--cod-accent);
      border-radius: 50%;
      animation: prof-avatar-spin 0.8s linear infinite;
      z-index: 2;
    }
    @keyframes prof-avatar-spin { to { transform: rotate(360deg); } }
    .prof-avatar-wrap.uploading button { pointer-events: none; opacity: 0.6; }
    .prof-avatar-level {
      position: absolute; bottom: -2px; right: -2px;
      width: 30px; height: 30px; border-radius: var(--cod-radius-full);
      display: flex; align-items: center; justify-content: center;
      background: var(--cod-surface-2); color: var(--cod-text-secondary);
      font-size: 13.5px; font-weight: 800;
      border: 3px solid var(--cod-bg-app);
    }
    .prof-name {
      margin-top: 16px;
      font-size: 19px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .prof-meta-row {
      margin-top: 4px;
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; color: var(--c-text-2);
    }
    .prof-actions {
      margin-top: 28px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .prof-btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 22px; border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      border: 1px solid var(--cod-accent);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-sm); font-weight: var(--cod-fw-bold);
      cursor: pointer; white-space: nowrap;
      transition: background var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
    }
    .prof-btn-primary:hover:not(:disabled) { background: var(--cod-accent-hover); border-color: var(--cod-accent-hover); }
    .prof-btn-primary:active:not(:disabled) { transform: scale(.98); }
    .prof-btn-primary:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }
    .prof-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
    .prof-btn-icon {
      width: 38px; height: 38px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--c-border-2);
      color: var(--c-text-2);
      transition: background .14s;
    }
    .prof-btn-icon:hover { background: var(--c-hover); color: var(--c-text); }

    .prof-right {
      overflow-y: auto;
      padding: 24px 28px;
      display: flex; flex-direction: column;
    }
    .prof-tabs {
      display: flex; gap: 8px; flex-wrap: wrap;
      padding-bottom: 8px;
    }
    .prof-tab {
      padding: 6px 14px; border-radius: var(--cod-radius-full);
      font-size: 14px; font-weight: 500;
      color: var(--c-text);
      border: 1px solid var(--c-border-2);
      background: transparent;
      transition: background .14s;
    }
    .prof-tab:hover { background: var(--c-hover); }
    .prof-tab.active { background: var(--c-content-2); border-color: var(--c-content-2); }
    .prof-tab .prof-tab-count {
      margin-left: 6px; font-weight: 400; color: var(--c-text-3);
    }

    .prof-content { flex: 1; padding-top: 14px; overflow-y: auto; }
    .prof-section + .prof-section { margin-top: 22px; }

    /* Card de destaque pra membro Elite (mostrado no topo do Sobre tab quando
       p.isElite=true). Tom dourado discreto pra reforçar a conquista sem ser
       chamativo demais — combina com o drop-shadow dourado da .elite-badge. */
    .prof-elite-card {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 18px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(252,211,77,.08), rgba(251,191,36,.03));
      border: 1px solid rgba(252,211,77,.22);
    }
    .prof-elite-card-img {
      width: 56px; height: 56px;
      object-fit: contain; flex-shrink: 0;
      filter: drop-shadow(0 0 12px rgba(252,211,77,.4));
    }
    .prof-elite-card-body {
      display: flex; flex-direction: column; gap: 4px;
      min-width: 0;
    }
    .prof-elite-card-title {
      font-size: 14px; font-weight: var(--cod-fw-semi);
      color: #fbbf24; letter-spacing: .02em;
    }
    .prof-elite-card-desc {
      font-size: 13px; color: var(--cod-text-secondary);
      line-height: 1.4;
    }

    .prof-level-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 6px 14px; border-radius: var(--cod-radius-full);
      background: var(--cod-surface-2); color: var(--cod-text-secondary);
      border: 1px solid var(--cod-border-subtle);
      font-size: 14px; font-weight: var(--cod-fw-semi);
    }
    .prof-level-pill .pill-sep {
      width: 1px; height: 12px; background: var(--cod-border-default);
    }
    .prof-level-meta {
      margin-top: 6px;
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--c-text-3);
    }
    .prof-email {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; color: var(--c-text);
    }
    .prof-email .at-ico { color: var(--c-text-2); }

    .prof-score-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: var(--cod-radius-full);
      border: 1px solid var(--c-border-2); background: var(--c-content-2);
      color: var(--c-text); font-size: 13.5px; font-weight: 500;
      cursor: pointer; transition: background .14s;
    }
    .prof-score-btn:hover { background: var(--c-hover); }

    .prof-fields { display: grid; gap: 18px; }
    .prof-field { display: grid; gap: 6px; }
    .prof-field-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .prof-field-label .lock {
      color: var(--c-text-3); display: inline-flex;
    }
    .prof-field-value {
      font-size: 15px; color: var(--c-text); line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .prof-field-value.empty { opacity: .55; }
    .prof-field-dash {
      color: var(--c-text-3); font-size: 14px;
    }

    /* Aba "Senha" do modal de perfil — card centrado com form polido. */
    .prof-pw-wrap {
      padding: 28px 8px 16px;
      display: flex; justify-content: center;
    }
    .prof-pw-card {
      width: 100%; max-width: 420px;
      padding: 28px 24px;
      background: var(--c-content-2);
      border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
      text-align: center;
    }
    .prof-pw-icon {
      width: 52px; height: 52px;
      margin: 0 auto 14px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--cod-accent-soft);
      color: var(--c-accent);
    }
    .prof-pw-title {
      font-size: 18px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      margin: 0 0 6px;
    }
    .prof-pw-sub {
      font-size: 13.5px; color: var(--c-text-2); line-height: 1.5;
      margin: 0 0 20px;
    }
    .prof-pw-form {
      display: flex; flex-direction: column; gap: 14px;
      text-align: left;
    }
    .prof-pw-field { display: flex; flex-direction: column; gap: 6px; }
    .prof-pw-label {
      font-size: 12px; font-weight: var(--cod-fw-semi); letter-spacing: .02em;
      color: var(--c-text-2);
    }
    .prof-pw-field input {
      height: 42px; padding: 0 14px;
      border-radius: var(--cod-radius-lg);
      border: 1px solid var(--c-border-2);
      background: var(--c-bg);
      color: var(--c-text); font-size: 14px;
      outline: none;
      transition: border-color .14s, box-shadow .14s;
    }
    .prof-pw-field input:hover { border-color: var(--c-hover-2); }
    .prof-pw-field input:focus {
      border-color: var(--c-accent);
      box-shadow: 0 0 0 3px var(--cod-accent-soft);
    }
    .prof-pw-hint { font-size: 11.5px; color: var(--c-text-3); }
    .prof-pw-feedback {
      padding: 8px 12px; border-radius: 8px;
      font-size: 13px; line-height: 1.45;
    }
    .prof-pw-feedback.err {
      background: color-mix(in srgb, var(--cod-danger) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--cod-danger) 30%, transparent);
      color: color-mix(in srgb, var(--cod-danger) 80%, white 20%);
    }
    .prof-pw-feedback.ok {
      background: var(--cod-accent-soft);
      border: 1px solid var(--cod-accent-line);
      color: var(--c-accent);
    }
    .prof-pw-submit {
      margin-top: 6px;
      height: 44px; border-radius: var(--cod-radius-lg); border: 0;
      background: var(--c-accent); color: var(--c-on-accent);
      font-size: 14px; font-weight: var(--cod-fw-bold);
      cursor: pointer;
      transition: filter .14s, opacity .14s;
    }
    .prof-pw-submit:hover { filter: brightness(1.06); }
    .prof-pw-submit:disabled { opacity: .55; cursor: not-allowed; }
    .prof-field-value a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

    .prof-section-title {
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      margin-bottom: 10px;
    }

    .prof-coming-soon {
      padding: 36px 12px;
      text-align: center;
      color: var(--c-text-3); font-size: 15px;
    }

    /* Clicáveis */
    .prof-trigger { cursor: pointer; }

    /* ── Toast (notificações in-app) ─────────────────────
       Container fixo no TOPO direito (alinhamento padrão do app). Visual
       minimal-pill: bg escuro sólido, ícone circular saturado (verde no
       success, vermelho no erro) com glyph branco, texto direto. Sem
       border-left accent — menos visual noise. Close button só aparece
       no hover do toast (não polui o estado de leitura). */
    #toast-stack {
      position: fixed; right: 20px; top: 20px; z-index: 70;
      display: flex; flex-direction: column;
      gap: 10px; pointer-events: none;
      max-width: calc(100vw - 40px);
    }
    .toast {
      pointer-events: auto;
      display: flex; align-items: center; gap: 10px;
      min-width: 260px; max-width: 420px;
      padding: 10px 14px 10px 10px;
      background: rgba(20, 20, 22, .96);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      font-size: 14px; font-weight: 500; line-height: 1.35;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transform: translateX(120%); opacity: 0;
      transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }
    .toast.show     { transform: translateX(0); opacity: 1; }
    .toast.leaving  { transform: translateX(40%); opacity: 0; }
    .toast-icon {
      flex-shrink: 0;
      width: 22px; height: 22px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--cod-text-muted);
      color: #fff;
    }
    .toast-icon svg { width: 13px; height: 13px; stroke-width: 2.5; }
    .toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }
    .toast-close {
      flex-shrink: 0;
      width: 20px; height: 20px; border-radius: 6px;
      background: transparent; color: rgba(255,255,255,.5);
      border: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: background .14s, color .14s, opacity .14s;
    }
    .toast:hover .toast-close { opacity: 1; }
    .toast-close:hover { background: rgba(255,255,255,.1); color: #fff; }

    /* Variantes por tipo: só muda a cor do círculo do ícone (bg sólido).
       Texto e fundo do toast permanecem iguais — alinhamento visual no
       conjunto (mesmo "card" preto), diferenciação no glyph. */
    .toast.toast-success .toast-icon {
      background: var(--cod-accent);
      color: #fff;
    }
    .toast.toast-error .toast-icon {
      background: var(--cod-danger);
      color: #fff;
    }
    .toast.toast-warning .toast-icon {
      background: var(--cod-warning);
      color: #fff;
    }
    .toast.toast-info .toast-icon {
      background: var(--cod-text-muted);
      color: #fff;
    }

    /* Utilitário para esconder com display:none */
    [hidden] { display: none !important; }

    /* Lista de publicações/comentários no modal de perfil */
    .prof-list { display: flex; flex-direction: column; gap: 8px; }
    .prof-list-item {
      display: block;
      padding: 12px 14px;
      border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
      background: var(--c-content);
      color: var(--c-text);
      text-decoration: none;
      transition: background .14s, border-color .14s;
    }
    .prof-list-item:hover { background: var(--c-content-2); border-color: var(--c-border-2); }
    .prof-list-title { font-size: 14.5px; font-weight: var(--cod-fw-semi); line-height: 1.35; margin-bottom: 4px; }
    .prof-list-sub { font-size: 12.5px; color: var(--c-text-3); }
    .prof-list-snippet {
      font-size: 13.5px; color: var(--c-text-2); line-height: 1.45;
      margin-top: 6px;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    }
    .prof-load-more {
      margin: 12px auto 0; display: block;
      padding: 8px 14px; border-radius: 8px;
      background: transparent; color: var(--c-text-2);
      border: 1px solid var(--c-border-2); cursor: pointer;
      transition: background .14s;
    }
    .prof-load-more:hover { background: var(--c-hover); }

    /* Botão de editar perfil (próprio usuário) */
    .prof-btn-edit { background: var(--c-content-2); color: var(--c-text); }
    .prof-btn-edit:hover { background: var(--c-hover); }

    /* Edit mode no modal de perfil */
    .prof-avatar-wrap { position: relative; }
    .prof-photo-edit {
      position: absolute; right: -4px; bottom: -4px;
      width: 32px; height: 32px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--c-accent); color: var(--c-on-accent);
      border: 2px solid var(--c-content);
      cursor: pointer;
      transition: filter .14s;
      z-index: 2;
    }
    .prof-photo-edit:hover { filter: brightness(1.08); }
    /* Inputs do form de edição: idênticos aos .mi-input do mock-interview
       (padding 14px 16px, bg surface-1, raio --cod-radius-lg = 12px). Sem
       altura fixa — proporção definida pelo padding, mesma do mock-interview. */
    .prof-name-input,
    .prof-edit-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-lg);
      background: var(--cod-surface-1);
      color: var(--cod-text);
      font-family: inherit; font-size: var(--cod-fs-base);
      outline: 0;
      transition: border-color var(--cod-trans-fast);
    }
    /* Margin-top maior pra dar respiro entre avatar e o input quando em
       modo edição. Centraliza nome (input ocupa largura toda do painel). */
    .prof-name-input { font-size: 16px; font-weight: var(--cod-fw-semi); text-align: center; margin: 22px 0 6px; }
    .prof-edit-input::placeholder { color: var(--cod-text-disabled); }
    .prof-name-input:focus,
    .prof-edit-input:focus { border-color: var(--cod-accent); }
    /* prof-field em edit mode: input no lugar do .prof-field-value (texto).
       Mantém o spacing entre label e controle igual ao modo view. */
    .prof-field-edit { gap: 6px; }
    /* .prof-edit-fields e .prof-edit-label removidos — bloco de inputs antigo
       no painel esquerdo foi substituído pelos inputs in-place do Sobre tab
       (ver renderProfTabSobre + fieldHtml). */
    .prof-edit-actions {
      display: flex; flex-wrap: wrap; gap: 8px;
      width: 100%; margin-top: 8px;
    }
    .prof-btn-secondary {
      padding: 8px 14px; border-radius: 8px;
      font-size: 13px; font-weight: var(--cod-fw-semi); cursor: pointer;
      border: 1px solid var(--c-border-2);
      background: transparent; color: var(--c-text);
    }
    .prof-btn-secondary:hover { background: var(--c-hover); }
    .prof-edit-feedback {
      width: 100%; font-size: 12.5px; color: var(--c-text-3); min-height: 14px;
    }
    .prof-edit-feedback.ok { color: #4ade80; }
    .prof-edit-feedback.err { color: var(--c-danger); }

    /* Typeahead de cidades (input de location no perfil). Dropdown absoluto
       relativo ao .prof-typeahead-wrap; o input herda .prof-edit-input. */
    .prof-typeahead-wrap { position: relative; }
    .prof-typeahead-list {
      position: absolute; top: 100%; left: 0; right: 0;
      z-index: 100;
      max-height: 240px; overflow-y: auto;
      background: var(--cod-surface-1);
      border: 1px solid var(--cod-border-default);
      border-radius: 12px;
      margin-top: 4px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    }
    .prof-typeahead-item {
      display: flex; justify-content: space-between; align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-size: 13px; color: var(--c-text);
      cursor: pointer;
      text-transform: none; letter-spacing: 0; font-weight: 400;
    }
    .prof-typeahead-item:hover,
    .prof-typeahead-item.active { background: var(--cod-surface-2); }
    .prof-typeahead-item-uf {
      color: var(--c-text-3); font-size: 12px;
      font-weight: var(--cod-fw-semi);
    }
    .prof-typeahead-empty {
      padding: 10px 12px;
      font-size: 12.5px; color: var(--c-text-3);
      text-transform: none; letter-spacing: 0; font-weight: 400;
    }
    /* .prof-typeahead-intl removido — opção "Internacional" descontinuada. */

    /* Bloco de admin no modal de perfil */
    .prof-admin-section {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--c-border);
      display: flex; flex-direction: column; gap: 6px;
    }
    .prof-admin-section h6 {
      font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .prof-admin-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center; gap: 12px;
      padding: 10px 12px; border-radius: 8px;
      min-height: 52px;
      cursor: pointer;
      transition: background .14s;
    }
    .prof-admin-row:hover { background: var(--c-content-2); }
    .prof-admin-label {
      font-size: 13px; line-height: 1.35; min-width: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .prof-admin-label strong {
      font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis;
    }
    .prof-admin-info {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: var(--cod-radius-full);
      background: transparent; border: 0; cursor: help;
      color: var(--c-text-3);
      flex-shrink: 0;
      transition: color .14s;
    }
    .prof-admin-info:hover { color: var(--c-text); }
    /* Popover renderizado dinamicamente em document.body pra evitar clipping. */
    .prof-admin-popover {
      position: fixed; z-index: 100;
      min-width: 220px; max-width: 280px;
      padding: 10px 12px;
      background: var(--c-content); color: var(--c-text);
      border: 1px solid var(--c-border-2);
      border-radius: 8px;
      font-size: 12.5px; font-weight: 400; line-height: 1.5;
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
      pointer-events: none;
      opacity: 0; transform: translateY(-4px);
      transition: opacity .12s, transform .12s;
    }
    .prof-admin-popover.show { opacity: 1; transform: translateY(0); }
    /* Switch (toggle) — input[checkbox] hidden, track + thumb desenhados */
    .prof-switch {
      position: relative; flex-shrink: 0;
      width: 38px; height: 22px;
      display: inline-block;
    }
    .prof-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .prof-switch-track {
      position: absolute; inset: 0;
      background: var(--c-border-2); border-radius: var(--cod-radius-full);
      transition: background .18s;
      pointer-events: none;
    }
    .prof-switch-track::after {
      content: ''; position: absolute;
      top: 2px; left: 2px; width: 18px; height: 18px;
      background: #fff; border-radius: var(--cod-radius-full);
      transition: transform .18s, background .18s;
      box-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
    .prof-switch input:checked ~ .prof-switch-track { background: var(--c-accent); }
    .prof-switch input:checked ~ .prof-switch-track::after { transform: translateX(16px); }
    .prof-switch input:disabled { cursor: not-allowed; }
    .prof-switch input:disabled ~ .prof-switch-track { opacity: 0.5; }

    .prof-admin-feedback { font-size: 12px; color: var(--c-text-3); min-height: 14px; padding: 4px 12px; }
    .prof-admin-feedback.ok { color: #4ade80; }
    .prof-admin-feedback.err { color: var(--c-danger); }

    /* ── Admin: layout + tabela ────────────────────────────────────────── */
    .admin-shell { background: var(--c-bg); display: flex; flex-direction: column; overflow: hidden; }
    .admin-layout {
      flex: 1; min-height: 0;
      display: grid; grid-template-columns: 260px 1fr;
      overflow: hidden;
    }
    .admin-sidebar {
      background: var(--c-sidebar);
      border-right: 1px solid var(--c-border);
      display: flex; flex-direction: column;
      overflow-y: auto;
    }
    .admin-sidebar-head { padding: 24px 24px 12px; }
    .admin-sidebar-head h2 {
      font-size: 18px; font-weight: var(--cod-fw-bold); color: var(--c-text);
      letter-spacing: -.01em;
    }
    .admin-nav { display: flex; flex-direction: column; padding: 4px 12px; gap: 2px; }
    .admin-nav-link {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; border-radius: 8px;
      font-size: 14.5px; font-weight: 500;
      color: var(--c-text-2);
      transition: background .14s, color .14s;
    }
    .admin-nav-link:hover { background: var(--c-hover); color: var(--c-text); }
    .admin-nav-link.active {
      background: #000;
      color: var(--c-accent);
      font-weight: var(--cod-fw-semi);
    }
    .admin-content {
      overflow-y: auto;
      padding: 24px 32px 48px;
    }
    .admin-content-head {
      margin-bottom: 18px;
    }
    .admin-content-head h1 {
      font-size: 26px; font-weight: 800; color: var(--c-text);
      letter-spacing: -.02em;
    }
    .admin-content-sub {
      margin-top: 4px; font-size: 14px; color: var(--c-text-2);
    }
    .admin-toolbar {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 14px;
    }
    .admin-search {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 8px;
      background: var(--c-content-2);
      color: var(--c-text-3);
      flex: 1; max-width: 360px;
    }
    .admin-search input {
      flex: 1; background: transparent; color: var(--c-text);
      border: 0; outline: 0;
      font-family: inherit; font-size: 14px; min-width: 0;
    }
    .admin-search input::placeholder { color: var(--c-text-3); }
    .admin-toolbar-spacer { flex: 1; }
    .admin-table-wrap {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
      /* Scroll container próprio (regra da casa pra tabela larga): as 8 colunas
         somam ~1090px e cortavam Status/Data até em laptop com overflow:hidden. */
      overflow-x: auto;
      overflow-y: hidden;
    }
    /* Grid-based admin table — substitui <table>/<tbody> pra permitir
       virtualização (tbody com overflow:auto + rows absolute). Mesma
       semântica visual com colunas de larguras configuráveis via
       grid-template-columns. */
    .admin-grid-table { font-size: 14px; min-width: 1090px; }
    .admin-grid-head, .admin-grid-row {
      display: grid;
      grid-template-columns: minmax(180px, 2fr) minmax(180px, 2fr) 110px 130px 110px minmax(140px, 1fr) 110px 130px;
      align-items: center;
    }
    .admin-grid-head {
      padding: 10px 14px;
      font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); letter-spacing: .06em;
      background: var(--c-content-2);
      border-bottom: 1px solid var(--c-border);
      gap: 0;
    }
    .admin-grid-body { position: relative; }
    /* Paginação clicável: ◀ Anterior | 1 2 3 … N | Próxima ▶. Ícones
       chevron, números em pills compactas. Página atual destaca em
       accent. */
    .admin-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 16px 12px;
      border-top: 1px solid var(--c-border);
      flex-wrap: wrap;
    }
    .admin-pagination button {
      min-width: 32px; height: 32px;
      padding: 0 10px;
      border-radius: var(--cod-radius-md);
      background: transparent;
      color: var(--c-text-2);
      font-size: 13.5px; font-weight: var(--cod-fw-semi);
      cursor: pointer;
      transition: background var(--cod-trans-base), color var(--cod-trans-base);
      display: inline-flex; align-items: center; justify-content: center;
      gap: 4px;
    }
    .admin-pagination button:hover:not(:disabled):not(.active) {
      background: var(--c-hover); color: var(--c-text);
    }
    .admin-pagination button.active {
      background: var(--c-accent); color: var(--c-on-accent);
      cursor: default;
    }
    .admin-pagination button:disabled {
      opacity: 0.4; cursor: not-allowed;
    }
    .admin-pagination .admin-pagination-gap {
      padding: 0 6px; color: var(--c-text-3); font-size: 13px;
    }
    .admin-grid-row {
      padding: 0 14px;
      border-bottom: 1px solid var(--c-border);
      transition: background .14s;
      cursor: pointer;
      color: var(--c-text);
    }
    .admin-grid-row:hover { background: var(--c-content-2); }
    .admin-grid-cell { padding: 10px 0; min-width: 0; }
    /* Compat: classes antigas .admin-table/.admin-loading/empty ainda usadas
       em outras subsections (approvals, invites). Mantém estilos básicos. */
    .admin-table {
      width: 100%; border-collapse: collapse; font-size: 14px;
    }
    .admin-table thead th {
      text-align: left; padding: 10px 14px;
      font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); letter-spacing: .06em;
      background: var(--c-content-2);
      border-bottom: 1px solid var(--c-border);
    }
    .admin-table tbody tr {
      border-bottom: 1px solid var(--c-border);
      transition: background .14s; cursor: pointer;
    }
    .admin-table tbody tr:hover { background: var(--c-content-2); }
    .admin-table tbody tr:last-child { border-bottom: 0; }
    .admin-table td {
      padding: 10px 14px; color: var(--c-text); vertical-align: middle;
    }
    .admin-cell-name {
      display: flex; align-items: center; gap: 10px;
      min-width: 0;
    }
    .admin-cell-avatar {
      width: 30px; height: 30px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      font-size: 12px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent);
    }
    /* Toggle switch usado na admin members (acesso a comunidade/vagas) */
    .admin-access-toggle {
      display: inline-flex; align-items: center; cursor: pointer;
      user-select: none;
    }
    .admin-access-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .admin-access-toggle span {
      display: inline-block; width: 34px; height: 18px; border-radius: var(--cod-radius-full);
      background: var(--c-content-2); position: relative; transition: background .15s ease;
    }
    .admin-access-toggle span::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; border-radius: var(--cod-radius-full);
      background: var(--c-text-3); transition: transform .15s ease, background .15s ease;
    }
    .admin-access-toggle input:checked + span { background: var(--c-accent); }
    .admin-access-toggle input:checked + span::after { transform: translateX(16px); background: var(--c-on-accent); }
    .admin-access-toggle input:disabled + span { opacity: .5; cursor: not-allowed; }
    .admin-cell-name-text {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-weight: 500;
    }
    .admin-badge {
      display: inline-block; padding: 2px 8px;
      border-radius: var(--cod-radius-full); font-size: 11.5px; font-weight: var(--cod-fw-semi);
      background: var(--c-content-2); color: var(--c-text-2);
    }
    .admin-badge.role-admin { background: rgba(106,127,255,.15); color: var(--c-accent); }
    .admin-badge.role-mod   { background: rgba(245,158,11,.15); color: #f59e0b; }
    .admin-badge.status-active   { background: rgba(34,197,94,.12); color: #4ade80; }
    .admin-badge.status-inactive { background: rgba(148,163,184,.12); color: var(--c-text-3); }
    /* Seletor de nível (Membro/Moderador/Admin) na coluna FUNÇÃO — estilizado
       como o badge, mas interativo. Cor acompanha o nível atual. */
    .admin-level-select {
      appearance: none; -webkit-appearance: none;
      padding: 2px 22px 2px 8px; border: 0; cursor: pointer;
      border-radius: var(--cod-radius-full); font-size: 11.5px; font-weight: var(--cod-fw-semi);
      font-family: inherit; background: var(--c-content-2); color: var(--c-text-2);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 7px center;
    }
    .admin-level-select.role-admin { background-color: rgba(106,127,255,.15); color: var(--c-accent); }
    .admin-level-select.role-mod   { background-color: rgba(245,158,11,.15); color: #f59e0b; }
    .admin-level-select:disabled { opacity: .5; cursor: not-allowed; }
    /* Chips de filtro por nível (Todos/Admins/Moderadores/Membros) na toolbar. */
    .admin-level-filter { display: inline-flex; gap: 4px; flex-wrap: wrap; }
    .admin-level-chip {
      padding: 5px 12px; border-radius: var(--cod-radius-full); cursor: pointer;
      font-size: 12.5px; font-weight: var(--cod-fw-semi); font-family: inherit;
      border: 1px solid var(--c-border); background: transparent; color: var(--c-text-2);
      transition: background .12s, color .12s, border-color .12s;
    }
    .admin-level-chip:hover { background: var(--c-content-2); }
    .admin-level-chip.is-active {
      background: rgba(106,127,255,.15); color: var(--c-accent); border-color: transparent;
    }
    .admin-loading, .admin-empty {
      padding: 40px 16px; text-align: center;
      color: var(--c-text-3); font-size: 14px;
    }
    .admin-nav-badge {
      margin-left: auto;
      min-width: 22px; height: 18px; padding: 0 6px;
      border-radius: var(--cod-radius-full);
      background: var(--c-accent); color: var(--c-on-accent);
      font-size: 11px; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* Gamificação */
    .gam-card {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; padding: 18px;
    }
    .gam-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin: 18px 0 22px;
    }
    @media (max-width: 720px) { .gam-grid { grid-template-columns: 1fr; } }
    .gam-level { display: flex; flex-direction: column; gap: 6px; }
    .gam-level-head {
      display: flex; justify-content: space-between;
      font-size: 12px; color: var(--c-text-3);
    }
    .gam-level-head strong { color: var(--c-text); font-weight: var(--cod-fw-semi); }
    .gam-level-row {
      display: grid; grid-template-columns: 36px 1fr 80px;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--c-border-2);
      border-radius: 8px;
      background: var(--c-content-2);
      padding: 4px;
    }
    .gam-level-row input {
      background: transparent; color: var(--c-text);
      border: 0; outline: 0;
      font: inherit; font-size: 14px;
      padding: 8px 10px;
    }
    .gam-level-row input[type="number"] {
      text-align: right; border-left: 1px solid var(--c-border-2);
    }
    /* Color picker: aproveita o controle nativo, mas sem o chrome do browser.
       Funciona como um swatch clicável de 24×24 — clique abre o picker do SO. */
    .gam-level-color {
      width: 28px; height: 28px;
      padding: 0; border: 1px solid var(--c-border);
      border-radius: 6px; cursor: pointer; background: transparent;
      appearance: none; -webkit-appearance: none;
      margin: 0 4px;
    }
    .gam-level-color::-webkit-color-swatch-wrapper { padding: 0; }
    .gam-level-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
    .gam-level-color::-moz-color-swatch { border: 0; border-radius: 4px; }

    /* Nível Elite (hardcoded, não-editável). Conquistado via vaga internacional
       (flag is_elite no subscriber) — não entra no PUT de gamification.levels.
       Dimensões alinhadas com .gam-level-row pra altura visual bater (padding
       4px + min-height = altura do input ~44px). */
    .gam-level-row-elite {
      display: grid; grid-template-columns: 36px 1fr;
      gap: 10px; align-items: center;
      border: 1px solid var(--c-border-2);
      border-radius: 8px;
      background: var(--c-content-2);
      padding: 4px 8px;
      min-height: 44px; box-sizing: border-box;
    }
    .gam-level-elite-img {
      width: 28px; height: 28px;
      object-fit: contain;
      filter: drop-shadow(0 0 6px rgba(252,211,77,.4));
    }
    .gam-level-elite-name {
      font-size: 13px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      line-height: 1.2;
    }
    .gam-level-elite-desc {
      font-size: 11px; color: var(--c-text-3);
      margin-top: 2px; line-height: 1.3;
    }

    /* Card de descrição dos pontos (abaixo da grid de níveis). Os pesos por
       evento são fixos no servidor (ver lib/user-points.js) — esta seção é
       informativa. */
    .gam-points-info {
      margin-top: 18px;
      padding: 16px 18px;
      background: var(--c-content-2);
      border: 1px solid var(--c-border);
      border-radius: 10px;
    }
    .gam-points-info h4 {
      margin: 0 0 4px; font-size: 13px;
      color: var(--c-text); font-weight: var(--cod-fw-semi);
    }
    .gam-points-info p { margin: 0 0 12px; font-size: 12.5px; color: var(--c-text-3); }
    .gam-points-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
    @media (max-width: 720px) { .gam-points-list { grid-template-columns: 1fr; } }
    .gam-points-list li {
      list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px;
      background: var(--c-content);
      border: 1px solid var(--c-border);
      border-radius: 8px;
      font-size: 13px; color: var(--c-text-2);
    }
    .gam-points-list .gam-pts-value {
      font-weight: var(--cod-fw-semi);
      color: var(--c-accent);
      font-variant-numeric: tabular-nums;
    }
    .gam-points-list .gam-pts-hint {
      display: block; font-size: 11px; color: var(--c-text-3); margin-top: 2px;
    }
    .gam-save-row {
      display: flex; align-items: center; gap: 12px;
      justify-content: flex-end;
      padding-top: 14px;
    }
    .gam-feedback { font-size: 12.5px; color: var(--c-text-3); flex: 1; }
    .gam-feedback.ok { color: #4ade80; }
    .gam-feedback.err { color: var(--c-danger); }

    /* Canais (admin) */
    .ch-help { margin-bottom: 14px; }
    .ch-groups-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
    .ch-group {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; padding: 14px;
    }
    .ch-group-head {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px;
    }
    .ch-drag {
      cursor: grab; color: var(--c-text-3);
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px;
    }
    .ch-drag:active { cursor: grabbing; }
    .ch-group-title-input {
      flex: 1; background: transparent; color: var(--c-text);
      border: 1px solid var(--c-border-2); border-radius: 8px;
      padding: 7px 10px; font: inherit; font-size: 14.5px; font-weight: var(--cod-fw-semi);
      outline: 0;
    }
    .ch-group-title-input:focus { border-color: var(--c-accent); }
    .ch-group-actions { display: inline-flex; gap: 4px; }
    .ch-icon-btn {
      width: 28px; height: 28px; border-radius: var(--cod-radius-md);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-text-3); background: transparent; border: 0; cursor: pointer;
      transition: background .14s, color .14s;
    }
    .ch-icon-btn:hover { background: var(--c-hover); color: var(--c-text); }
    .ch-icon-btn.danger:hover { color: var(--c-danger); background: var(--c-danger-soft); }
    .ch-channels { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }
    .ch-channel {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 8px; border-radius: 8px;
    }
    .ch-channel:hover { background: var(--c-content-2); }
    .ch-emoji-input {
      width: 36px; text-align: center;
      background: transparent; color: var(--c-text);
      border: 1px solid var(--c-border-2); border-radius: var(--cod-radius-md);
      padding: 6px 4px; font: inherit; font-size: 14px;
      outline: 0;
    }
    .ch-name-input {
      flex: 1; background: transparent; color: var(--c-text);
      border: 1px solid var(--c-border-2); border-radius: var(--cod-radius-md);
      padding: 6px 10px; font: inherit; font-size: 13.5px;
      outline: 0;
    }
    .ch-slug { font-size: 11.5px; color: var(--c-text-3); font-family: ui-monospace, monospace; }
    .ch-type-pill {
      font-size: 10.5px; font-weight: var(--cod-fw-bold); letter-spacing: .04em;
      padding: 2px 8px; border-radius: var(--cod-radius-full);
      background: var(--c-content-2); color: var(--c-text-3);
      text-transform: uppercase;
    }
    .ch-type-pill.ch-type-chat {
      background: color-mix(in oklch, var(--c-accent) 14%, transparent);
      color: var(--c-accent);
    }
    .ch-type-pill.ch-type-post {
      background: color-mix(in oklch, var(--c-text) 8%, transparent);
      color: var(--c-text-2);
    }
    .ch-type-pill.ch-type-locked {
      background: var(--c-warning-soft); color: var(--c-warning);
      text-transform: none; letter-spacing: 0;
    }
    .ch-type-pill.ch-type-events {
      background: color-mix(in oklch, #a78bfa 18%, transparent);
      color: #a78bfa;
    }

    /* Tab bar do canal (Publicações / Chat). Aparece logo abaixo do header
       quando o canal tem 2+ abas. Estado ativo é controlado por .channel-tab.active.
       Background segue o do header (preto/sidebar) pra criar uma faixa contínua. */
    .channel-tabbar {
      display: flex; align-items: stretch;
      border-bottom: 1px solid var(--c-border);
      background: var(--c-sidebar);
      padding: 0 18px;
      gap: 4px;
      flex-shrink: 0;
    }
    .channel-tabbar[hidden] { display: none; }
    .channel-tab {
      background: transparent; border: 0; cursor: pointer;
      color: var(--c-text-3);
      font-size: 13.5px; font-weight: var(--cod-fw-semi);
      padding: 10px 14px;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color .14s, border-color .14s;
    }
    .channel-tab:hover { color: var(--c-text); }
    .channel-tab.active {
      color: var(--c-accent);
      border-bottom-color: var(--c-accent);
    }
    /* Badge de unread na tab inativa: indica que a outra aba tem mensagens
       novas (ex.: usuário em "Publicações" enquanto chegam msgs no Chat).
       Some quando o user troca pra essa aba (markChannelSeen). */
    .channel-tab-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 6px;
      margin-left: 6px;
      border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--c-on-accent);
      font-size: 10.5px; font-weight: var(--cod-fw-bold);
      line-height: 1;
    }
    .channel-tab-badge[hidden] { display: none; }
    .ch-icon-btn.active {
      background: var(--c-warning-soft); color: var(--c-warning);
    }
    .cf-slug-locked { opacity: .6; cursor: not-allowed; }
    .ch-add-channel {
      align-self: flex-start; margin-top: 4px;
      padding: 6px 10px; border-radius: var(--cod-radius-md);
      background: transparent; color: var(--c-text-3);
      border: 1px dashed var(--c-border-2);
      font-size: 12.5px; cursor: pointer;
      transition: background .14s, color .14s, border-color .14s;
    }
    .ch-add-channel:hover { background: var(--c-content-2); color: var(--c-text); border-color: var(--c-text-3); }
    .ch-dragging { opacity: 0.5; }
    .ch-drop-target { border-top: 2px solid var(--c-accent); }

    /* Aprovações */
    .admin-approvals { display: flex; flex-direction: column; gap: 12px; }
    .approval-item {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: var(--cod-radius-lg);
      padding: 14px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .approval-head {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: var(--c-text-2);
    }
    .approval-head .approval-author {
      font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .approval-head .approval-type {
      padding: 2px 8px; border-radius: var(--cod-radius-full);
      font-size: 11px; font-weight: var(--cod-fw-bold); letter-spacing: .04em;
      background: var(--c-content-2); color: var(--c-text-2);
      text-transform: uppercase;
    }
    .approval-body {
      font-size: 14.5px; color: var(--c-text); line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .approval-body strong { display: block; font-weight: var(--cod-fw-bold); margin-bottom: 4px; }
    .approval-actions {
      display: flex; gap: 8px; justify-content: flex-end;
    }
    .approval-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 8px 16px; border-radius: var(--cod-radius-full);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-xs); font-weight: var(--cod-fw-bold);
      cursor: pointer;
      border: 1px solid var(--cod-border-strong);
      background: transparent; color: var(--cod-text);
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast), color var(--cod-trans-fast), transform var(--cod-trans-fast);
    }
    .approval-btn:hover { background: var(--cod-surface-2); border-color: var(--cod-border-emphasis); }
    .approval-btn:active { transform: scale(.98); }
    .approval-btn:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }
    .approval-btn.primary {
      background: var(--cod-accent); border-color: var(--cod-accent); color: var(--cod-text-on-accent);
    }
    .approval-btn.primary:hover { background: var(--cod-accent-hover); border-color: var(--cod-accent-hover); }
    .approval-btn.danger {
      color: var(--c-danger); border-color: var(--c-danger-soft);
    }
    .approval-btn.danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger); }
    @media (max-width: 900px) {
      /* Empilha: nav do admin vira barra horizontal scrollável no topo (em vez
         de sumir e prender o admin na seção atual). */
      .admin-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .admin-sidebar {
        flex-direction: row; overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid var(--c-border);
      }
      .admin-sidebar-head { display: none; }
      .admin-nav {
        flex-direction: row; flex-wrap: nowrap; padding: 8px 12px; gap: 6px;
      }
      .admin-nav-link { white-space: nowrap; flex-shrink: 0; }
      .admin-content { padding: 16px; }
      .admin-table thead { display: none; }
      .admin-table tbody tr {
        display: grid; grid-template-columns: 1fr auto;
        gap: 4px 12px; padding: 10px 6px;
      }
      .admin-table td { padding: 2px 4px; }
    }

    /* ── Painéis dropdown (notificações + posts salvos) ─────────────────── */
    .dropdown-panel {
      position: fixed; z-index: 60;
      top: 64px; right: 24px;
      width: min(360px, calc(100vw - 32px));
      max-height: min(580px, calc(100vh - 88px));
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 12px;
      box-shadow: 0 14px 36px rgba(0,0,0,.45);
      display: flex; flex-direction: column;
      overflow: hidden;
      opacity: 0; transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .dropdown-panel.open { opacity: 1; transform: translateY(0); }
    .dropdown-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid var(--c-border);
    }
    .dropdown-head h5 {
      font-size: 15px; font-weight: var(--cod-fw-semi); color: var(--c-text);
    }
    .dropdown-link {
      font-size: 13px; color: var(--c-accent);
      background: transparent; border: 0; cursor: pointer;
      padding: 4px 8px; border-radius: var(--cod-radius-md);
      transition: background .14s;
    }
    .dropdown-link:hover { background: var(--c-hover); }
    .dropdown-body {
      flex: 1; overflow-y: auto; padding: 6px;
    }
    .notif-item {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px; border-radius: 8px;
      cursor: pointer;
      transition: background .14s;
    }
    .notif-item:hover { background: var(--c-hover); }
    .notif-item.unread { background: rgba(106,127,255,.06); }
    .notif-item.unread:hover { background: rgba(106,127,255,.12); }
    .notif-avatar {
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent); flex-shrink: 0;
    }
    .notif-main { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-text); }
    .notif-main strong { font-weight: var(--cod-fw-semi); }
    .notif-preview {
      color: var(--c-text-3); margin-top: 3px;
      font-size: 13px;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .notif-time { font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; }
    .notif-empty, .bookmarks-empty {
      padding: 32px 16px; text-align: center;
      color: var(--c-text-3); font-size: 14px;
    }

    /* Lista de posts salvos: usa post-card-mini */
    .bookmark-item {
      padding: 12px; border-radius: 8px;
      cursor: pointer;
      transition: background .14s;
      border-bottom: 1px solid var(--c-border);
    }
    .bookmark-item:last-child { border-bottom: 0; }
    .bookmark-item:hover { background: var(--c-hover); }
    .bookmark-item .bi-title {
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      margin-bottom: 2px;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .bookmark-item .bi-sub {
      font-size: 12px; color: var(--c-text-3);
    }
    .bookmark-item .bi-snippet {
      font-size: 13px; color: var(--c-text-2);
      margin-top: 4px;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }

    /* ── Search overlay ─────────────────────────────────────────────────── */
    .search-overlay {
      position: fixed; inset: 0; z-index: 70;
      background: rgba(0,0,0,.55);
      display: flex; align-items: flex-start; justify-content: center;
      padding: 80px 24px 24px;
      opacity: 0; transition: opacity .18s ease;
    }
    .search-overlay.open { opacity: 1; }
    .search-modal {
      width: 100%; max-width: 720px;
      background: var(--c-content); border: 1px solid var(--c-border-2);
      border-radius: 12px;
      max-height: calc(100vh - 120px);
      display: flex; flex-direction: column;
      overflow: hidden;
      transform: translateY(-8px); opacity: 0;
      transition: transform .22s ease, opacity .18s ease;
    }
    .search-overlay.open .search-modal { transform: translateY(0); opacity: 1; }
    .search-input-row {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; border-bottom: 1px solid var(--c-border);
      color: var(--c-text-3);
    }
    .search-input-row input {
      flex: 1; background: transparent; color: var(--c-text);
      border: 0; outline: 0;
      font-family: inherit; font-size: 16px; min-width: 0;
    }
    .search-input-row input::placeholder { color: var(--c-text-3); }
    .search-close {
      background: transparent; border: 0; color: var(--c-text-3);
      padding: 4px; border-radius: var(--cod-radius-md); cursor: pointer;
      transition: background .14s, color .14s;
    }
    .search-close:hover { background: var(--c-hover); color: var(--c-text); }
    .search-results {
      flex: 1; overflow-y: auto; padding: 6px;
    }
    .search-section-head {
      padding: 10px 12px 4px;
      font-size: 11px; font-weight: var(--cod-fw-bold);
      color: var(--c-text-3); letter-spacing: .06em;
      text-transform: uppercase;
    }
    .search-item {
      display: flex; gap: 12px;
      padding: 10px 12px; border-radius: 8px;
      cursor: pointer;
      transition: background .14s;
    }
    .search-item:hover { background: var(--c-hover); }
    .search-item-date {
      flex-shrink: 0; width: 42px; text-align: center;
      background: var(--c-content-2); border-radius: 8px;
      padding: 4px 0; font-weight: var(--cod-fw-bold); color: var(--c-text);
      line-height: 1.1;
    }
    .search-item-date .em { display:block; font-size: 9px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
    .search-item-date .ed { display:block; font-size: 14px; }
    .search-item-meta { flex: 1; min-width: 0; }
    .search-item-title {
      font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text);
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .search-item-sub {
      font-size: 12px; color: var(--c-text-3); margin-top: 2px;
    }
    .search-empty {
      padding: 40px 20px; text-align: center;
      color: var(--c-text-3); font-size: 14px;
    }

    @media (max-width: 720px) {
      .dropdown-panel { top: 56px; right: 12px; left: 12px; width: auto; max-height: calc(100vh - 80px); }
      .search-overlay { padding: 12px; align-items: flex-start; }
      .search-modal { max-height: calc(100vh - 24px); }
    }

    /* Detalhes do evento (read-only) — modal de visualização.
       O .pm-body default já dá padding (18px 24px); mantemos pra alinhar
       com os outros modais. Antes tinha `padding: 0 !important` esperando
       um wrapper interno aplicar — mas o JS popula direto no .ed-body,
       o que deixava os itens colados nas bordas. */
    .ed-body {
      display: flex; flex-direction: column; gap: 18px;
    }
    .ed-cover {
      width: 100%; aspect-ratio: 16/7;
      border-radius: var(--cod-radius-lg); overflow: hidden;
      background: var(--c-content-2);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--cod-font-display);
      font-size: 96px; font-weight: var(--cod-fw-bold);
      color: var(--cod-text-on-accent); letter-spacing: -.03em;
      line-height: 1; text-transform: uppercase;
      position: relative;
      box-shadow: inset 0 0 0 1px var(--cod-border-default);
    }
    .ed-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Cover sem imagem: gradient OKLCH com viés accent + textura sutil
       (grade fina via SVG inline) pra não parecer um quadrado liso */
    .ed-cover.empty {
      background:
        radial-gradient(120% 90% at 0% 0%, var(--cod-accent-strong) 0%, transparent 55%),
        radial-gradient(140% 100% at 100% 100%, oklch(45% .12 141.24) 0%, transparent 60%),
        linear-gradient(135deg, oklch(28% .06 141.24) 0%, oklch(18% .04 141.24) 100%);
      text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
    }
    .ed-cover.empty::after {
      content: ''; position: absolute; inset: 0;
      background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px);
      pointer-events: none;
    }
    .ed-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .ed-title-row h2 {
      font-size: var(--cod-fs-2xl); font-weight: var(--cod-fw-regular);
      color: var(--cod-text); line-height: 1.2; letter-spacing: -.02em;
    }
    .ed-eyebrow {
      font-size: var(--cod-fs-xs); font-weight: var(--cod-fw-bold);
      color: var(--cod-accent);
      text-transform: uppercase; letter-spacing: .08em;
      margin-bottom: 6px;
    }
    .ed-meta {
      display: flex; flex-direction: column; gap: 10px;
      font-size: var(--cod-fs-sm); color: var(--c-text-2);
    }
    .ed-meta-row { display: flex; align-items: center; gap: 12px; }
    .ed-meta-row svg { flex-shrink: 0; color: var(--cod-accent); opacity: .85; }
    .ed-meta-row a { color: var(--cod-accent); word-break: break-all; }
    .ed-meta-row a:hover { text-decoration: underline; }
    /* Separador sutil entre header e descrição/footer */
    .ed-divider {
      height: 1px; background: var(--cod-border-default);
      margin: 4px 0 2px;
    }
    .ed-desc {
      font-size: var(--cod-fs-base); color: var(--cod-text);
      line-height: var(--cod-lh-relaxed);
      white-space: pre-wrap; word-break: break-word;
    }
    .ed-foot {
      display: flex; align-items: center; gap: 12px;
      padding-top: 4px; flex-wrap: wrap;
    }
    .ed-foot .event-rsvp-btn { flex: 1; min-width: 180px; }

    /* Botão de "N confirmados" — pill com hover, sai do estilo "link sublinhado" */
    .event-tag-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: var(--cod-radius-full);
      font-size: 12px; font-weight: var(--cod-fw-semi);
      background: var(--c-content-2); color: var(--c-text-2);
      border: 1px solid transparent;
      cursor: pointer; transition: background .14s, color .14s, border-color .14s;
    }
    .event-tag-btn:hover { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border-2); }
    .event-tag-btn svg { color: currentColor; }

    /* Botão "N confirmados" dentro do modal — pill sólido, afford­ance clara */
    .ed-attendees-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px 6px 6px;
      background: var(--cod-surface-2); color: var(--cod-text);
      border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-full);
      font-family: inherit; font-size: var(--cod-fs-xs); font-weight: var(--cod-fw-semi);
      cursor: pointer;
      transition: background var(--cod-trans-fast), border-color var(--cod-trans-fast), color var(--cod-trans-fast);
    }
    .ed-attendees-btn:hover {
      background: var(--cod-accent-soft); border-color: var(--cod-accent-line);
      color: var(--cod-accent);
    }
    .ed-attendees-btn .ed-att-stack {
      display: inline-flex; flex-shrink: 0;
    }
    .ed-attendees-btn .ed-att-stack > * {
      width: 22px; height: 22px; border-radius: var(--cod-radius-full);
      border: 2px solid var(--cod-surface-2);
      margin-right: -6px;
      background: var(--cod-surface-3);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: var(--cod-fw-bold);
      color: var(--cod-text);
      overflow: hidden;
    }
    .ed-attendees-btn .ed-att-stack > *:last-child { margin-right: 0; }
    .ed-attendees-btn .ed-att-stack img { width: 100%; height: 100%; object-fit: cover; }
    .ed-attendees-btn:hover .ed-att-stack > * { border-color: var(--cod-accent-soft); }
    .ed-attendees-btn-empty .ed-att-stack {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: var(--cod-radius-full);
      background: var(--cod-surface-3); color: var(--cod-text-muted);
    }

    /* Lista de confirmados (modal) */
    .att-list { display: flex; flex-direction: column; gap: 2px; }
    .att-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 8px;
      cursor: pointer; transition: background .14s;
    }
    .att-item:hover { background: var(--c-hover); }
    .att-avatar {
      width: 36px; height: 36px; border-radius: var(--cod-radius-full);
      flex-shrink: 0; overflow: hidden;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: var(--cod-fw-bold); color: var(--c-on-accent);
    }
    .att-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .att-meta { flex: 1; min-width: 0; }
    .att-name { font-size: 14.5px; font-weight: var(--cod-fw-semi); color: var(--c-text); }
    .att-sub { font-size: 12.5px; color: var(--c-text-3); margin-top: 1px; }

    /* Botão de editar evento (apenas admin) — outline alinhado ao cod-btn */
    .event-edit-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 8px 16px; border-radius: var(--cod-radius-full);
      font-family: var(--cod-font-body); font-size: var(--cod-fs-xs); font-weight: var(--cod-fw-bold);
      color: var(--cod-accent);
      background: transparent; border: 1px solid var(--cod-accent);
      cursor: pointer;
      transition: background var(--cod-trans-base), color var(--cod-trans-base), border-color var(--cod-trans-base), transform var(--cod-trans-fast);
      flex-shrink: 0;
    }
    .event-edit-btn:hover { background: var(--cod-accent); color: var(--cod-text-on-accent); }
    .event-edit-btn:active { transform: scale(.98); }
    .event-edit-btn:focus-visible { outline: none; box-shadow: var(--cod-shadow-glow); }

    /* ── Mobile: hamburger + drawer ─────────────────────────────────────── */
    .topbar-burger {
      display: none;
      width: 38px; height: 38px; flex-shrink: 0;
      border-radius: var(--cod-radius-lg);
      align-items: center; justify-content: center;
      color: var(--c-text-2); background: transparent;
      transition: background .14s, color .14s;
    }
    .topbar-burger:hover { background: var(--c-hover); color: var(--c-text); }
    .sidebar-backdrop {
      position: fixed; inset: 0; z-index: 49;
      background: rgba(0,0,0,.5);
      opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
    }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

    /* Larguras intermediárias: com o grid `1fr auto 1fr` no `.topbar`, a nav
       central nunca mais sobrepõe o search — quando aperta, a track direita
       expande e a nav desliza pra esquerda. O search só precisa colapsar
       quando o conteúdo total realmente não cabe (logo + nav + actions
       expandida ≈ 1080px + paddings/gaps). Abaixo desse ponto o search vira
       ícone-only; <=900px ele some por inteiro (regra mobile mais abaixo). */
    @media (max-width: 1100px) {
      .topbar-search {
        padding: 8px;
      }
      .topbar-search-label { display: none; }
    }

    @media (max-width: 900px) {
      .topbar { height: 60px; padding: 0 12px; gap: 8px; }
      .topbar-burger { display: inline-flex; }
      .topbar-collapse { display: none; }
      .topbar-logo img { width: 150px; height: 18px; }
      /* Nav central some no mobile — as seções vão pro drawer (.drawer-mobile-nav). */
      .topbar-nav { display: none; }
      .drawer-mobile-nav {
        display: flex; flex-direction: column;
        margin: 4px 0 8px; padding-bottom: 8px;
        border-bottom: 1px solid var(--c-border);
      }
      .topbar-search { display: none; }
      .topbar-actions { gap: 2px; }
      .topbar-icon-btn { width: 38px; height: 38px; }

      /* Drawer */
      aside.left-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
        width: min(82vw, 320px);
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 8px 0 24px rgba(0,0,0,.35);
      }
      aside.left-sidebar.open { transform: translateX(0); }

      /* Main ocupa tela inteira; right-sidebar some. Listado tanto o estado
         aberto quanto o `.hidden` pra ganhar do override de specificity em
         `.right-sidebar.hidden` (que precisa de display:flex pra animar). */
      .right-sidebar,
      .right-sidebar.hidden { display: none !important; }
      .feed-shell, .chat-shell, .post-shell,
      .events-shell, .lb-shell, .dm-shell { min-width: 0; }

      /* DMs empilham: sem conversa aberta mostra só a lista (100%); com
         conversa aberta (.has-open, setado no openDmThread) mostra só o chat.
         Sem isso a .dm-list fixa em 320px espremia o chat pra ~40-80px. */
      .dm-list { width: 100%; flex-shrink: 1; }
      .dm-shell.has-open .dm-list { display: none; }
      .dm-shell:not(.has-open) .dm-chat { display: none; }
      .dm-back-btn { display: inline-flex; }
      .feed-header, .chat-header { padding-left: 14px; padding-right: 14px; }
      .feed-body { padding-left: 14px !important; padding-right: 14px !important; }
      .feed-layout { gap: 16px; }
      .feed-widgets { width: 100%; max-width: 100%; }

      /* Cards encolhem padding. */
      .post-card { border-radius: var(--cod-radius-lg); }
      .post-card-content { padding: 14px; }
      .post-card-title { font-size: 18px; }
      .post-card-body { font-size: 15px; }

      /* Modais ocupam quase a tela inteira em mobile. */
      .pm-overlay { padding: 12px; }
      .pm-modal { max-height: 92vh; }
      .pm-body { padding: 14px 16px; }
      .pm-header { padding: 12px 14px; }

      /* Profile modal compacto */
      .prof-modal { max-width: 100% !important; }

      /* Composer e chat */
      .chat-composer { padding-left: 12px; padding-right: 12px; }
      .msg-inner { gap: 10px; }
      .msg-avatar { width: 34px !important; height: 34px !important; }

      /* Eventos: calendário e listas */
      .cal-shell { padding: 12px; }
      .events-list-inner { padding: 0 12px; }

      /* Leaderboard e Members: grids menores */
      #lb-list { padding: 0 12px; }
      #members-grid { grid-template-columns: 1fr !important; padding-left: 16px; padding-right: 16px; }
      #view-members header { padding-left: 16px !important; padding-right: 16px !important; }
      #members-filters { padding-left: 16px !important; padding-right: 16px !important; }

      /* Toast mais discreto */
      #toast { right: 14px; bottom: 14px; max-width: calc(100% - 28px); }

      /* Reactions: sempre visível no mobile (sem hover) */
      .msg-row .msg-reactions { opacity: 1; }

      /* Touch targets ≥44px sem mudar o visual: expande a área clicável com um
         ::after de inset negativo (curtir, enviar comentário, reagir). Alvos
         de uso frequente no toque; o desenho continua compacto. */
      .post-card-actions .pca-btn,
      .comment-composer .cc-send,
      .react-add { position: relative; }
      .post-card-actions .pca-btn::after,
      .comment-composer .cc-send::after,
      .react-add::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 44px; height: 44px; min-width: 44px;
      }
    }

    @media (max-width: 560px) {
      .topbar { padding: 0 8px; }
      .topbar-icon-btn { width: 36px; height: 36px; }
      /* Esconde "Posts salvos" pra caber (não notif nem DM, que não têm outro
         ponto de entrada; bookmarks continua alcançável via #bookmarks). O
         seletor :nth-of-type antigo escondia o link errado (o de DMs). */
      #topbar-bookmarks-btn { display: none; }
      .post-card-actions .pca-share { padding: 4px 6px; font-size: 13px; }
      .share-modal { max-width: 100%; }
      .react-picker { left: auto; right: 0; }
    }

    /* ── Admin: Analytics ──────────────────────────────────────────────── */
    .an-toolbar {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .an-grain {
      display: inline-flex; background: var(--c-content);
      border: 1px solid var(--c-border); border-radius: 10px; padding: 3px;
    }
    .an-grain-btn {
      appearance: none; border: none; background: transparent; cursor: pointer;
      color: var(--cod-text-muted); font-size: 13px; font-weight: 600;
      padding: 6px 16px; border-radius: 8px; transition: background .15s, color .15s;
    }
    .an-grain-btn:hover { color: var(--cod-text-secondary); }
    .an-grain-btn.active { background: var(--cod-accent); color: var(--cod-text-on-accent); }
    .an-grain-btn:disabled { opacity: .38; cursor: not-allowed; }
    .an-grain-btn:disabled:hover { color: var(--cod-text-muted); }

    /* Shimmer ao trocar filtros */
    .an-chart-skel { width: 100%; height: 200px; border-radius: 10px; }
    .an-chart-stacked .an-chart-skel { height: 240px; }
    .an-chart-heatmap .an-chart-skel { height: 320px; }
    .an-kpi-skel { height: 52px; border-radius: 8px; }
    .an-row-skel { height: 16px; border-radius: 5px; }
    .an-updated { font-size: 12px; color: var(--cod-text-disabled); margin-left: auto; }
    .an-select {
      appearance: none; background: var(--c-content); border: 1px solid var(--c-border);
      color: var(--cod-text); font-size: 13px; font-weight: 600; cursor: pointer;
      padding: 8px 30px 8px 12px; border-radius: 10px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat: no-repeat; background-position: right 10px center;
    }
    .an-dates { display: inline-flex; align-items: center; gap: 8px; }
    .an-dates-sep { font-size: 12px; color: var(--cod-text-muted); }
    .an-date {
      background: var(--c-content); border: 1px solid var(--c-border);
      color: var(--cod-text); font-size: 13px; padding: 7px 10px; border-radius: 10px;
      color-scheme: dark;
    }
    .an-date:disabled { opacity: .5; cursor: not-allowed; }

    .an-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    }
    .an-card {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; padding: 16px 18px 18px; min-width: 0;
    }
    .an-card-wide { grid-column: 1 / -1; }
    .an-card-title { font-size: 15px; font-weight: 700; color: var(--cod-text); margin: 0; }
    .an-card-sub { font-size: 12px; color: var(--cod-text-muted); margin: 2px 0 14px; }
    .an-chart { width: 100%; min-height: 200px; }
    .an-chart-stacked { min-height: 240px; }
    .an-chart-loading, .an-chart-empty {
      display: flex; align-items: center; justify-content: center;
      min-height: 200px; color: var(--cod-text-disabled); font-size: 13px;
      text-align: center; padding: 0 16px;
    }
    .an-legend {
      display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px;
    }
    .an-legend-item {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--cod-text-secondary);
    }
    .an-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
    .an-swatch-dashed {
      width: 14px; height: 0; border-top: 2px dashed var(--cod-text-muted);
      border-radius: 0; align-self: center;
    }
    .an-legend-compare { margin-top: 10px; }

    /* KPIs (visão geral) */
    .an-kpis {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px;
    }
    .an-kpi {
      background: var(--c-content); border: 1px solid var(--c-border);
      border-radius: 12px; padding: 16px 18px; min-width: 0;
    }
    .an-kpi-label {
      font-size: 13px; font-weight: 600; color: var(--cod-text-secondary);
      display: flex; align-items: center; gap: 8px;
    }
    .an-kpi-tag {
      font-size: 11px; font-weight: 500; color: var(--cod-text-disabled);
      background: var(--cod-surface-2); padding: 1px 7px; border-radius: 999px;
    }
    .an-kpi-value { font-size: 30px; font-weight: 800; color: var(--cod-text); line-height: 1.15; margin-top: 6px; }
    .an-kpi-foot { margin-top: 10px; }
    .an-kpi-delta {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    }
    .an-kpi-delta.up   { color: var(--cod-success); background: color-mix(in oklab, var(--cod-success) 16%, transparent); }
    .an-kpi-delta.down { color: var(--cod-warning); background: color-mix(in oklab, var(--cod-warning) 16%, transparent); }
    .an-kpi-delta.flat { color: var(--cod-text-disabled); background: var(--cod-surface-2); }

    /* Heatmap */
    .an-chart-heatmap { min-height: 320px; }

    /* Popover interativo dos gráficos (segue o cursor) */
    .cj-chart-tip {
      position: fixed; z-index: 9999; pointer-events: none;
      background: var(--cod-surface-2, #262626);
      border: 1px solid var(--cod-border-strong, #525252);
      border-radius: 10px; padding: 8px 11px; min-width: 130px; max-width: 280px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
      font-size: 12px; color: var(--cod-text, #fff); line-height: 1.5;
    }
    .cj-chart-tip[hidden] { display: none; }
    .cj-tip-title { font-weight: 700; margin-bottom: 6px; color: var(--cod-text, #fff); }
    .cj-tip-row { display: flex; align-items: center; gap: 7px; }
    .cj-tip-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
    .cj-tip-name { color: var(--cod-text-secondary, #d4d4d4); }
    .cj-tip-val { margin-left: auto; padding-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

    /* Tabela de publicações populares */
    .an-table-wrap { width: 100%; overflow-x: auto; }
    .an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .an-table th {
      text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .04em; color: var(--cod-text-muted); padding: 8px 12px;
      border-bottom: 1px solid var(--c-border); white-space: nowrap;
    }
    .an-table td {
      padding: 11px 12px; border-bottom: 1px solid var(--c-border);
      color: var(--cod-text-secondary); vertical-align: middle;
    }
    .an-table tr:last-child td { border-bottom: none; }
    .an-table .an-num { text-align: right; font-variant-numeric: tabular-nums; }
    .an-table .an-pop-score { color: var(--cod-text); font-weight: 700; }
    .an-pop-title {
      color: var(--cod-text); font-weight: 500; max-width: 380px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .an-empty-row { text-align: center; color: var(--cod-text-disabled); padding: 24px 12px; }

    @media (max-width: 720px) {
      .an-grid { grid-template-columns: 1fr; }
      .an-card-wide { grid-column: auto; }
      .an-kpis { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MOTION — animações de CONTINUIDADE (não decoração). Curtas (140-200ms),
       easing cubic-bezier(0.16, 1, 0.3, 1) (o mesmo do modal-pop). O
       @media (prefers-reduced-motion: reduce) global (cod3rs.css) já zera
       transition/animation; abaixo há um guard extra explícito pra as animações
       disparadas por JS que dependem só de classe.
       ═══════════════════════════════════════════════════════════════════════ */

    /* Banner "nova versão disponível" (skew de bundle detectado via WS hello).
       Fixo no rodapé, acima de tudo; entra com slide sutil. */
    .cj-update-banner {
      position: fixed; bottom: 16px; left: 50%;
      transform: translate(-50%, 12px); opacity: 0;
      display: flex; align-items: center; gap: 12px;
      padding: 10px 16px;
      background: var(--cod-surface-1); border: 1px solid var(--cod-border-default);
      border-radius: var(--cod-radius-full);
      box-shadow: 0 8px 28px rgba(0,0,0,.45);
      font-size: 13.5px; color: var(--cod-text);
      z-index: 100;
      transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s;
    }
    .cj-update-banner.on { transform: translate(-50%, 0); opacity: 1; }
    .cj-update-banner button {
      padding: 5px 14px; border: 0; border-radius: var(--cod-radius-full);
      background: var(--cod-accent); color: var(--cod-text-on-accent);
      font-size: 13px; font-weight: var(--cod-fw-semi); font-family: inherit;
      cursor: pointer; transition: filter .14s;
    }
    .cj-update-banner button:hover { filter: brightness(1.08); }

    /* A1: entrada de item novo (msg/comentário/notif/DM). Slide-up + fade curto.
       Aplicada via JS (animateNewEntry) SÓ no item novo; removida ao terminar. */
    @keyframes cj-enter-slide {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
    .cj-enter {
      animation: cj-enter-slide .17s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* B1: imagem do feed com espaço reservado + fade-in no load. Reserva o
       espaço com aspect-ratio/min-height pra img não empurrar o conteúdo ao
       carregar (mata o layout shift ao rolar). A img entra opacity 0→1. */
    .post-card-cover {
      aspect-ratio: 16 / 7;
      opacity: 0;
      transition: opacity .16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .post-card-cover.cj-loaded { opacity: 1; }
    .post-card-attachment { position: relative; }
    .post-card-attachment img {
      min-height: 120px;
      opacity: 0;
      transition: opacity .16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .post-card-attachment img.cj-loaded { opacity: 1; min-height: 0; }

    /* B2: crossfade na troca de view (feed↔chat↔board↔etc). Um overlay curto
       do snapshot da view anterior faz o crossfade; a view nova entra em fade.
       Guard: só quando a classe .cj-view-in é aplicada por JS. */
    @keyframes cj-view-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes cj-view-fade-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    .cj-view-in { animation: cj-view-fade-in .15s cubic-bezier(0.16, 1, 0.3, 1) both; }
    /* Snapshot da view anterior, posicionado sobre o conteúdo; some em fade e é
       removido pelo JS. pointer-events:none pra NÃO capturar cliques (evita 2
       views clicáveis ao mesmo tempo). */
    .cj-view-ghost {
      position: absolute;
      inset: 0;
      z-index: 40;
      pointer-events: none;
      animation: cj-view-fade-out .15s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* B3: crossfade skeleton→conteúdo. O conteúdo real entra em fade curto
       quando substitui o shimmer. Aplicada por JS via .cj-content-in. */
    .cj-content-in { animation: cj-view-fade-in .16s cubic-bezier(0.16, 1, 0.3, 1) both; }

    /* C1: expand de comentários / "ver mais" / seções com altura animada
       (accordion) em vez de aparecer seco. Transição em max-height (o JS
       mede o scrollHeight e seta o max-height alvo). */
    .cj-collapse {
      overflow: hidden;
      transition: max-height .18s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity .16s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* D1: sublinhado de aba que DESLIZA no .topbar-nav. Um indicador flutuante
       (elemento .topnav-underline) posicionado por JS sob a aba ativa. */
    .topbar-nav { position: relative; }
    .topnav-underline {
      position: absolute;
      bottom: -1px;
      height: 2px;
      border-radius: 2px;
      background: var(--c-accent, var(--cod-accent));
      pointer-events: none;
      opacity: 0;
      transform: translateZ(0);
      transition: left .14s cubic-bezier(0.16, 1, 0.3, 1),
                  width .14s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity .14s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .topnav-underline.cj-on { opacity: 1; }

    /* D2: pill "novas mensagens ↓" — aparece quando chega msg e o box não está
       colado no fim. Sobe/fade ao entrar, some ao clicar (rola pro fim). */
    .cj-newmsg-pill {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%) translateY(8px);
      z-index: 30;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      border-radius: var(--cod-radius-full);
      background: var(--c-accent, var(--cod-accent));
      color: var(--c-on-accent, #fff);
      font-size: 13px; font-weight: var(--cod-fw-semi);
      box-shadow: 0 4px 14px rgba(0,0,0,.28);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s cubic-bezier(0.16, 1, 0.3, 1),
                  transform .16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cj-newmsg-pill.cj-on {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    .cj-newmsg-pill:hover { filter: brightness(1.06); }

    /* E1: press state em botões/alvos clicáveis — reconhecimento imediato do
       toque. Scale sutil no :active. Aplicado nos ALVOS de ação (botões de
       footer, like de comentário, itens de notif/sidebar, abas), NÃO no
       .post-card inteiro (escalar o card ao clicar um botão interno fica
       estranho e briga com scroll). */
    .pcf-btn:active,
    .comment-like-btn:active,
    .notif-item:active,
    .topbar-nav a:active,
    .sg-item:active {
      transform: scale(.97);
    }
    .pcf-btn, .comment-like-btn, .notif-item, .topbar-nav a, .sg-item {
      transition: transform .12s cubic-bezier(0.16, 1, 0.3, 1),
                  background .14s ease, color .14s ease;
    }

    /* E2: check animado nos confirmadores de "copiar" (link/código). Reusa a
       ideia do feedback-check-stroke do board (redefinido aqui pois
       community-styles não carrega board-styles). O SVG do check desenha o
       traço; some junto com o texto "Copiado!". */
    @keyframes cj-check-stroke { to { stroke-dashoffset: 0; } }
    .cj-copy-check {
      display: inline-block;
      vertical-align: -2px;
      margin-right: 4px;
    }
    .cj-copy-check path {
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
      animation: cj-check-stroke .32s cubic-bezier(0.65, 0, 0.45, 1) both;
    }

    /* E3: contador (like/comentário/badge) troca o número em fade curto em vez
       de "piscar seco". Envolve o texto num span; ao mudar, o antigo some e o
       novo entra por baixo. Discreto — sem count-up, sem partícula. */
    .cj-count-flip { animation: cj-count-fade .16s cubic-bezier(0.16, 1, 0.3, 1) both; }
    @keyframes cj-count-fade {
      from { opacity: .35; transform: translateY(-2px); }
      to   { opacity: 1; transform: none; }
    }

    /* Guard explícito de reduced-motion pras animações puramente-CSS acima
       (o global de cod3rs.css já cobre, mas reforça a intenção; e zera as que
       o JS dispara por classe caso o global não pegue via especificidade). */
    @media (prefers-reduced-motion: reduce) {
      .cj-enter,
      .cj-view-in, .cj-view-ghost, .cj-content-in,
      .cj-count-flip, .cj-copy-check path { animation: none !important; }
      .post-card-cover, .post-card-attachment img { transition: none; opacity: 1; }
      .cj-collapse, .topnav-underline, .cj-newmsg-pill { transition: none; }
      .pcf-btn:active, .comment-like-btn:active,
      .notif-item:active, .topbar-nav a:active, .sg-item:active { transform: none; }
    }