/* Console D34DW3B — identidade Anansi (preto-vazio + fio vermelho #D80102) */
:root {
  --bg: #08080b; --bg-elev: #101016; --panel: #131319; --border: #232330;
  --text: #edeef4; --muted: #8c8c99; --dim: #56566a;
  --red: #d80102; --red-dim: #9c0102; --ember: #ff4a3d; --red-glow: rgba(216,1,2,.5);
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font-mono); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 40% at 50% -6%, rgba(216,1,2,0.09), transparent 60%); }
body > * { position: relative; z-index: 1; }
a { color: #ff5a5b; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.c-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(10,10,11,.85); backdrop-filter: blur(10px); }
.c-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.c-brand img { width: 26px; height: 26px; }
.c-brand em { color: var(--muted); font-style: normal; font-weight: 400; font-size: .8rem; }
.c-brand .dot { color: var(--red); }
.c-link { color: var(--muted); font-size: .85rem; }
.c-link:hover { color: var(--text); text-decoration: none; }
.c-link.logout { display: inline-block; margin-top: 14px; }

.c-main { max-width: 720px; margin: 0 auto; padding: 28px 20px 80px; display: flex; flex-direction: column; gap: 16px; }
.c-narrow { max-width: 420px; margin: 40px auto 0; }

.c-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.c-card h1 { font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; font-size: 1.5rem; margin: 0 0 6px; }
.c-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 14px; }
.c-muted { color: var(--muted); font-size: .9rem; }
.c-hint { color: var(--muted); font-size: .8rem; margin: 8px 0 14px; }

.c-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.c-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.c-form input { background: #0e0e11; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); font: inherit; }
.c-form input:focus { border-color: var(--red-dim); outline: none; }
.c-form input[type="file"] { padding: 8px 10px; cursor: pointer; }
.c-form input[type="file"]::file-selector-button { background: var(--border); color: var(--text); border: none; border-radius: 7px; padding: 6px 12px; margin-right: 12px; cursor: pointer; font: inherit; }
.c-form input[type="file"]::file-selector-button:hover { background: var(--red-dim); }
.c-modes { border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.c-radio { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text); cursor: pointer; }
.c-radio input { accent-color: var(--red); }

/* ---- Dashboard de agências ---- */
.a-h1 { font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; font-size: 1.6rem; margin: 0 0 4px; }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.a-card { display: block; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 20px; color: var(--text); transition: border-color .2s, transform .2s; }
.a-card:hover { border-color: var(--red-dim); transform: translateY(-2px); text-decoration: none; }
.a-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 10px 0 2px; }
.a-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.a-dot.big { width: 22px; height: 22px; flex: none; }
.a-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 8px; font-size: .82rem; color: var(--muted); }
.a-stats b, .a-kpi b { color: var(--text); }
.a-next { font-size: .8rem; color: var(--muted); margin: 0; }
.a-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.a-nicho { max-width: 60ch; margin: 4px 0 18px; font-size: .88rem; }
.a-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.a-kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.a-kpi b { display: block; font-family: var(--font-display); font-size: 1.5rem; }
.a-kpi span { font-size: .74rem; color: var(--muted); }
.a-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.a-pill { font-size: .74rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.a-pill.concluido { border-color: #1c7a4a; color: #46d98a; }
.a-pill.erro { border-color: var(--red-dim); color: #ff6b6b; }
.a-pill.wip, .a-pill.curador, .a-pill.roteirista, .a-pill.clipper, .a-pill.revisor, .a-pill.publicador, .a-pill.analista { border-color: #7a5a1c; color: #e0b053; }
.a-joblist { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.a-joblist li { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.a-jobname { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.a-slot { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.a-slot.next { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-dim); }
.a-slot b { display: block; font-family: var(--font-display); }
.a-slot span { font-size: .78rem; color: var(--muted); }
.a-published { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.a-published li { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.a-pubdate { color: var(--muted); font-size: .76rem; flex: none; }
.a-pubtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chat */
.a-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.a-chat-head select { background: #0e0e11; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .82rem; }
.a-chat-log { margin: 14px 0; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.a-msg { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.a-msg.me { align-self: flex-end; align-items: flex-end; }
.a-who { font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.a-bubble { padding: 10px 14px; border-radius: 12px; background: #0e0e11; border: 1px solid var(--border); font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.a-msg.me .a-bubble { background: var(--red); color: #fff; border-color: var(--red); }
.a-msg.err .a-bubble { border-color: var(--red-dim); color: #ff9b9b; background: rgba(216,1,2,.08); }
.a-typing { color: var(--muted); }
.a-chat-form { display: flex; gap: 10px; }
.a-chat-form input { flex: 1; background: #0e0e11; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); font: inherit; }
.a-chat-form input:focus { border-color: var(--red-dim); outline: none; }
@media (max-width: 560px) { .a-kpis { grid-template-columns: repeat(2, 1fr); } }

.c-btn { display: inline-block; padding: 11px 20px; border-radius: 10px; font: 600 .9rem var(--font-mono); border: 1px solid var(--border); color: var(--text); background: transparent; cursor: pointer; text-align: center; }
.c-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.c-btn.primary:hover { background: var(--red-dim); text-decoration: none; }

.c-notice { border-radius: 10px; padding: 12px 16px; font-size: .88rem; border: 1px solid var(--border); }
.c-notice.ok { border-left: 3px solid #22c55e; background: rgba(34,197,94,.08); }
.c-notice.error { border-left: 3px solid var(--red); background: rgba(216,1,2,.08); }
.c-errbox { border-left: 3px solid var(--red); }
.c-pre { background: #0e0e11; border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: .78rem; color: #ffb4b4; white-space: pre-wrap; word-break: break-word; }

.c-account { display: flex; align-items: center; gap: 16px; }
.c-avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border); }
.c-account h1 { font-size: 1.2rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.c-verified { color: #22c55e; font-size: .9rem; border: 1px solid #22c55e; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.c-handle { color: var(--red); font-size: .85rem; margin: 0 0 6px; }
.c-bio { color: var(--muted); font-size: .82rem; margin: 0 0 8px; max-width: 46ch; }
.c-link.profile { display: inline-block; margin-top: 8px; font-size: .82rem; }
.c-account .logout { margin: 0 0 0 auto; align-self: flex-start; }
.c-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.c-stats b { color: var(--text); }

.c-videos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c-videos li { display: flex; gap: 12px; align-items: center; }
.c-videos img, .c-thumb { width: 56px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #0e0e11; flex: none; }
.c-videos strong { display: block; font-size: .9rem; }
.c-videos .c-muted { font-size: .78rem; }

/* ---- Post to TikTok (Direct Post compliant) ---- */
.tt-post { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.tt-creator { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #0e0e11; }
.tt-creator img, .tt-avatar-ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #1c1c21; border: 1px solid var(--border); flex: none; }
.tt-creator strong { font-size: .95rem; }
.tt-sub { font-size: .76rem; margin-top: 2px; }
.tt-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tt-group legend { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--muted); padding: 0 6px; }
.tt-radio, .tt-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text); cursor: pointer; }
.tt-radio input, .tt-check input { accent-color: var(--red); width: 15px; height: 15px; }
.tt-radio.is-disabled, .tt-check input:disabled + * { opacity: .5; }
.tt-disclose { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.tt-badge { font-size: .78rem; color: var(--text); background: #1c1c21; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 2px 0 0; }
.tt-warn { font-size: .78rem; color: #ff8a8a; margin: 0; }
.tt-compliance { font-size: .76rem; color: var(--muted); margin: 0; }
.c-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Agência: shell com rail de contas à esquerda ---- */
.a-shell { max-width: 1040px; margin: 0 auto; padding: 22px 20px 80px; display: grid; grid-template-columns: 216px 1fr; gap: 22px; align-items: start; }
.a-rail { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 14px; }
.a-rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--border); }
.a-rail-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .02em; }
.a-rail-tipo { font-size: .72rem; margin: 0; }
.a-rail-nav { display: flex; flex-direction: column; gap: 4px; }
.a-rail-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: var(--muted); font-size: .86rem; border: 1px solid transparent; }
.a-rail-item:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; }
.a-rail-item.active { color: var(--text); background: var(--bg-elev); border-color: var(--border); box-shadow: inset 3px 0 0 var(--red); }
.a-rail-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #0e0e11; border: 1px solid var(--border); font-size: .82rem; flex: none; }
.a-rail-item.active .a-rail-glyph { border-color: var(--red-dim); color: var(--red); }
.a-rail-glyph.plat-tiktok { color: #25f4ee; }
.a-rail-glyph.plat-instagram { color: #e1306c; }
.a-rail-glyph.plat-youtube { color: #ff2d2d; }
.a-rail-txt { display: flex; flex-direction: column; line-height: 1.15; }
.a-rail-txt small { color: var(--muted); font-size: .68rem; }
.a-rail-empty { font-size: .78rem; padding: 6px 4px; }
.a-rail-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.a-rail-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: auto; flex: none; border: 1px solid var(--border); }
.a-rail-av-ph { margin-left: auto; width: 24px; height: 24px; }
.a-rail-plus { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--muted); flex: none; }
.a-rail-item.ghost { color: var(--muted); }
.a-rail-item.ghost:hover { background: var(--bg-elev); }
.a-rail-item.ghost:hover .a-rail-plus { border-color: var(--red-dim); color: var(--text); }
.a-content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.a-content > .c-card, .a-content > .a-kpis, .a-content > form { margin: 0; }
.a-h1 { font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; font-size: 1.5rem; margin: 0; }
.a-h1-sub { font-family: var(--font-mono); font-weight: 400; font-size: .95rem; }
.a-nicho { margin: 0; }

@media (max-width: 760px) {
  .a-shell { grid-template-columns: 1fr; }
  .a-rail { position: static; }
  .a-rail-nav { flex-direction: row; flex-wrap: wrap; }
  .a-rail-item { flex: 1 1 auto; }
}

/* ---- Seletor de marca (header dropdown) ---- */
.brand-switch { position: relative; }
.brand-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); font-family: var(--font-display); font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.brand-switch summary::-webkit-details-marker { display: none; }
.brand-switch summary:hover { border-color: var(--red-dim); }
.bs-caret { color: var(--muted); margin-left: 2px; }
.bs-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bs-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px -20px #000; z-index: 30; }
.bs-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: .86rem; }
.bs-menu a:hover { background: #0e0e11; text-decoration: none; }
.bs-menu a.active { box-shadow: inset 3px 0 0 var(--red); }
.bs-menu .bs-add { color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 11px; }

/* ---- Resumo agregado ---- */
.sum-hero { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.sum-total { display: flex; flex-direction: column; gap: 2px; }
.sum-total b { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; }
.sum-total > span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.sum-total small { margin-top: 4px; font-size: .78rem; }
.sum-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.sum-tile { min-width: 96px; padding: 12px 14px; border-radius: 12px; background: #0e0e11; border: 1px solid var(--border); border-top: 3px solid var(--pc); display: flex; flex-direction: column; gap: 2px; }
.sum-tile-plat { font-size: .72rem; color: var(--pc); font-weight: 700; letter-spacing: .03em; }
.sum-tile b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.sum-tile span.c-muted { font-size: .72rem; }

.acct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-list a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); }
.acct-list a:hover { border-color: var(--red-dim); text-decoration: none; }
.acct-list img, .acct-ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; }
.acct-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-meta strong { font-size: .9rem; }
.acct-meta .c-muted { font-size: .78rem; }
.acct-go { margin-left: auto; color: var(--muted); }
.acct-connect { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.c-btn.small { padding: 6px 12px; font-size: .78rem; border-radius: 8px; }

/* ---- Kanban (colunas = agentes) ---- */
.kb-wrap { overflow: hidden; }
.kb-wrap h2 { margin-bottom: 14px; }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kb-col { flex: 0 0 200px; background: #0e0e11; border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kb-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; border-bottom: 1px solid var(--border); }
.kb-agent { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.kb-count { font-size: .72rem; color: var(--muted); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.kb-col.concluido .kb-agent { color: #64d18a; }
.kb-col.erro .kb-agent, .kb-col.publicador .kb-agent { color: var(--red); }
.kb-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kb-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; }
.kb-job { font-size: .78rem; line-height: 1.3; word-break: break-word; }
.kb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kb-etapa { font-size: .68rem; color: var(--muted); }
.kb-empty { color: #3a3a42; font-size: .8rem; text-align: center; margin: 8px 0; }

/* ---- Topo do conteúdo + botão nova publicação ---- */
.a-content-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmp-new { font-size: .84rem; padding: 9px 16px; white-space: nowrap; }

/* ---- Lista de publicações ---- */
.posts-wrap { overflow-x: auto; }
.posts-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 560px; }
.posts-tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.posts-tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.posts-tbl tr:last-child td { border-bottom: none; }
.pt-post { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.pt-post img, .pt-ph { width: 40px; height: 52px; border-radius: 6px; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.pt-cap { line-height: 1.3; }
.pt-net { font-weight: 700; font-size: .78rem; }

/* ---- Analytics (tiles + gráficos SVG) ---- */
.an-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.an-tile { flex: 1 1 100px; padding: 12px 14px; border-radius: 12px; background: #0e0e11; border: 1px solid var(--border); border-left: 3px solid var(--c); display: flex; flex-direction: column; gap: 2px; }
.an-tile b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.an-tile span { color: var(--muted); font-size: .74rem; }
.an-h3 { font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--muted); margin: 16px 0 6px; letter-spacing: .03em; text-transform: uppercase; }
.an-chart { width: 100%; }
.an-chart svg { width: 100%; height: 150px; display: block; }
.an-xlabels { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); margin-top: 4px; }

/* ---- Chat popup dos agentes ---- */
.chatfab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 12px 30px -8px var(--red-glow); z-index: 60; display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; }
.chatfab:hover { background: var(--red-dim); transform: translateY(-1px); }
.chatfab.is-open { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); font-size: 1.1rem; }
.chatpop { position: fixed; right: 22px; bottom: 88px; width: 366px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 130px); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; z-index: 60; box-shadow: 0 28px 70px -22px #000; }
.chatpop-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(216,1,2,0.10), transparent); }
.chatpop-title { display: flex; flex-direction: column; line-height: 1.2; }
.chatpop-title strong { font-family: var(--font-display); font-size: .92rem; letter-spacing: .02em; }
.chatpop-title span { font-size: .72rem; }
.chatpop-head select { background: #0e0e11; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; color: var(--text); font: inherit; font-size: .78rem; max-width: 150px; }
.chatpop-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chatpop-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chatpop-form input { flex: 1; background: #0e0e11; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; }
.chatpop-form input:focus { border-color: var(--red-dim); outline: none; }
.chatpop-form button { flex: none; width: 44px; padding: 0; font-size: 1rem; }
@media (max-width: 480px) { .chatpop { right: 10px; left: 10px; width: auto; bottom: 84px; } .chatfab { right: 16px; bottom: 16px; } }

/* ---- Compositor unificado ---- */
.cmp { display: flex; flex-direction: column; gap: 16px; }
.cmp .c-card { display: flex; flex-direction: column; gap: 12px; }
.cmp-nets { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-net { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: #0e0e11; color: var(--text); cursor: pointer; font: inherit; }
.cmp-net small { color: var(--muted); margin-left: 4px; font-size: .72rem; }
.cmp-net:hover { border-color: var(--pc); }
.cmp-net.on { border-color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); }
.cmp-net-glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-elev); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--pc); flex: none; }
.cmp-check { color: var(--pc); font-weight: 700; width: 14px; }
.cmp-main { }
.cmp-file, .cmp-caption { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.cmp-file input, .cmp-caption textarea { background: #0e0e11; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); font: inherit; }
.cmp-caption textarea { resize: vertical; min-height: 90px; }
.cmp-caption em, .cmp-file em { align-self: flex-end; font-size: .74rem; font-style: normal; }
.cmp-preview { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: .82rem; color: var(--muted); }
.cmp-preview-video { width: 100%; max-width: 280px; border-radius: 12px; border: 1px solid var(--border); background: #000; aspect-ratio: 9 / 16; object-fit: contain; }
.cmp-net-opts h3 { font-family: var(--font-display); font-weight: 700; font-size: .92rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.cmp-net-opts label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.cmp-net-opts select { background: #0e0e11; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; color: var(--text); font: inherit; max-width: 240px; }
.cmp-inline { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text) !important; }
.cmp-inline input { accent-color: var(--red); }
.cmp-hint { font-size: .76rem; margin: 4px 0 0; }
.cmp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-results ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-results li { font-size: .86rem; }
.cmp-results li.ok { color: #64d18a; }
.cmp-results li.err { color: #ff8a8a; }
.cmp-results li b { color: var(--text); }
.cmp-errs { border-color: var(--red-dim) !important; background: linear-gradient(180deg, rgba(216,1,2,0.06), transparent); }
.cmp-errs h3 { font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin: 0 0 8px; color: var(--red); }
.cmp-errs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-errs li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #d3d3d9; }
.cmp-err-net { width: 18px; text-align: center; font-weight: 700; }

/* ---- TikTok presets: switches no estilo do painel ---- */
.tt-presets { display: flex; flex-direction: column; gap: 16px; }
.tt-presets-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0; }
.tt-logo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #0e0e11; border: 1px solid var(--border); font-size: .9rem; }
.tt-field { display: flex; flex-direction: column; gap: 6px; }
.tt-field label { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.tt-field select { background: #0e0e11; border: 1px solid var(--border); border-radius: 10px; padding: 12px 12px; color: var(--text); font: inherit; }
.tt-field select:focus { border-color: var(--red-dim); outline: none; }
.tt-toggles { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.tt-switch { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--text); cursor: pointer; }
.tt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tt-slider { width: 40px; height: 22px; border-radius: 999px; background: #2a2a30; border: 1px solid var(--border); position: relative; transition: background .15s ease; flex: none; }
.tt-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.tt-switch input:checked + .tt-slider { background: var(--red); border-color: var(--red); }
.tt-switch input:checked + .tt-slider::before { transform: translateX(18px); }
.tt-switch input:disabled + .tt-slider { opacity: .4; }
.tt-switch.off { color: var(--muted); cursor: default; }
.tt-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; }

/* ---- Nova marca: seletor de cor ---- */
.nb-colors { display: flex; gap: 8px; }
.nb-color { cursor: pointer; }
.nb-color input { position: absolute; opacity: 0; width: 0; height: 0; }
.nb-color span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid transparent; }
.nb-color input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px var(--c); }
.bs-del-form { margin: 0; }
.bs-del { width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border); margin-top: 4px; padding: 11px 11px 9px; font: inherit; color: #ff8a8a; cursor: pointer; }
.bs-del:hover { color: var(--red); }

/* ================= Revamp alinhado à home (Fio de Anansi) ================= */
.c-card { background: linear-gradient(180deg, var(--panel), var(--bg-elev)); }
.c-card h1, .c-card h2 { letter-spacing: .02em; }
.c-btn { text-transform: uppercase; letter-spacing: .04em; transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.c-btn:hover { border-color: var(--red-dim); box-shadow: inset 0 0 0 1px var(--red-dim); text-decoration: none; }
.c-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.c-btn.primary:hover { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 22px var(--red-glow); }

/* rail como fio: filamento conectando os nós (ícones das redes) */
.a-rail-nav { position: relative; }
.a-rail-nav::before {
  content: ""; position: absolute; left: 23px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--red-dim) 12%, var(--red-dim) 88%, transparent);
  opacity: .4; z-index: 0;
}
.a-rail-item { position: relative; z-index: 1; }
.a-rail-item.active { box-shadow: inset 3px 0 0 var(--red), 0 0 26px -14px var(--red-glow); }
.a-rail-glyph { background: #0d0d13; }

/* eyebrow (rótulo) coerente com a home */
.a-h1-sub { font-family: var(--font-mono); }
.kicker, .cmp-net small { letter-spacing: .04em; }

/* botão flutuante do chat com brilho de brasa */
.chatfab { box-shadow: 0 12px 34px -8px var(--red-glow); }
.chatfab:hover { background: var(--ember); }

@media (max-width: 760px) { .a-rail-nav::before { display: none; } }

/* ---- Cards de conteúdo (Kanban Conteúdos) ---- */
.ct-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.ct-title { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.ct-resumo { font-size: .72rem; color: var(--muted); line-height: 1.35; }
.ct-line { font-size: .72rem; color: #c8c8d2; }
.ct-line b { color: var(--red); font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; margin-right: 5px; }
.ct-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; font-size: .68rem; }
.ct-stats { color: var(--muted); white-space: nowrap; }
.ct-pub { font-size: .72rem; color: var(--red) !important; }
.kb-col.publicado .kb-agent { color: #64d18a; }
.kb-col.execucao .kb-agent { color: var(--ember); }

/* ---- Caixa de entrada (comentários do Instagram) ---- */
.inbox { display: grid; grid-template-columns: 320px 1fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; min-height: 520px; background: var(--bg-elev); }
.inbox-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; max-height: 640px; }
.inbox-list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .76rem; }
.ig-badge { color: #e1306c; font-weight: 700; font-size: .8rem; }
.inbox-empty { padding: 16px; }
.inbox-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; color: var(--text); width: 100%; font: inherit; }
.inbox-row:hover { background: #0e0e13; }
.inbox-row.on { background: #14141c; box-shadow: inset 3px 0 0 var(--red); }
.inbox-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e1306c, #ff8a00); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex: none; }
.inbox-av.big { width: 40px; height: 40px; }
.inbox-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inbox-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.inbox-row-top small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.inbox-row-text { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inbox-tick { color: #64d18a; align-self: center; }
.inbox-conv { display: flex; flex-direction: column; }
.inbox-none { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.inbox-conv-head { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.inbox-conv-head a { font-size: .78rem; }
.inbox-thread { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.inbox-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.inbox-form input { flex: 1; min-width: 180px; background: #0e0e11; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; color: var(--text); font: inherit; }
.inbox-form input:focus { border-color: var(--red-dim); outline: none; }
.inbox-form .c-notice { flex-basis: 100%; }
@media (max-width: 720px) { .inbox { grid-template-columns: 1fr; } .inbox-list { max-height: 300px; } }

/* ---- Abas do topo + seletor de rede da caixa de entrada ---- */
.top-nav { display: flex; gap: 6px; margin-right: auto; margin-left: 22px; }
.top-nav a { color: var(--muted); font-size: .8rem; padding: 7px 14px; border-radius: 8px; text-transform: uppercase; letter-spacing: .03em; }
.top-nav a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; }
.top-nav a.active { color: var(--text); background: var(--bg-elev); box-shadow: inset 0 -2px 0 var(--red); }
.inbox-main { max-width: 1040px; }
.inbox-wrap { display: flex; flex-direction: column; gap: 14px; }
.inbox-nets { display: flex; align-items: center; gap: 8px; }
.inbox-net { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.inbox-net.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-dim); }
.inbox-net:hover { border-color: var(--red-dim); }
.inbox-add { position: relative; }
.inbox-add summary { list-style: none; width: 40px; height: 40px; border-radius: 10px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 1.1rem; }
.inbox-add summary::-webkit-details-marker { display: none; }
.inbox-add-menu { position: absolute; left: 0; top: 48px; z-index: 20; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-width: 230px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px -20px #000; }
.inbox-add-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: .84rem; }
.inbox-add-menu a:hover { background: #0e0e13; text-decoration: none; }
.inbox-add-menu .c-muted { padding: 8px 11px; font-size: .72rem; border-top: 1px solid var(--border); margin-top: 4px; }
.inbox-av { position: relative; }
.inbox-fav { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--bg-elev); display: flex; align-items: center; justify-content: center; }

.inbox-disc { margin-left: auto; }
.inbox-disc-btn { background: none; border: 1px solid var(--border); color: var(--muted); font: inherit; font-size: .74rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.inbox-disc-btn:hover { border-color: var(--red-dim); color: #ff8a8a; }

/* Painel do community manager (auto-reply) */
.inbox-agent { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); overflow: hidden; }
.inbox-agent > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }
.inbox-agent > summary::-webkit-details-marker { display: none; }
.inbox-agent > summary:hover { background: #0e0e13; }
.ia-title { font-size: .9rem; font-weight: 600; }
.ia-state { font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); }
.ia-state.on { color: #64d18a; border-color: #26603f; background: #0d1f15; }
.ia-state.off { color: var(--muted); }
.inbox-agent-body { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.ia-switch { display: flex; align-items: center; gap: 10px; font-size: .86rem; cursor: pointer; margin-top: 12px; }
.ia-switch input { width: 18px; height: 18px; accent-color: var(--red); }
.ia-hint { font-size: .76rem; line-height: 1.5; margin: 0; }
.ia-soul-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ia-soul { width: 100%; background: #0e0e11; border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--text); font: inherit; font-size: .82rem; line-height: 1.55; resize: vertical; }
.ia-soul:focus { border-color: var(--red-dim); outline: none; }
.ia-actions { display: flex; align-items: center; gap: 12px; }
.ia-ok { color: #64d18a; font-size: .78rem; }
