/* Estúdio de conteúdo. A cor principal vem da marca de quem usa (--marca), o resto é neutro.
   Layout: barra superior com abas; Semana = calendário de 7 colunas; Posts = lista + editor com prévia de celular. */
/* Visual A "Estúdio Noturno": escuro por padrão, brilho na cor da marca, cartões de vidro, números finos e grandes.
   O tema claro usa a mesma linguagem. */
:root {
  --marca: #2952E3;
  --marca-suave: color-mix(in srgb, var(--marca) 16%, transparent);
  --marca-borda: color-mix(in srgb, var(--marca) 45%, var(--linha));
  --marca-clara: color-mix(in srgb, var(--marca) 70%, #fff);
  --fundo: #050508;
  --superficie: #0F0F17;
  --superficie-2: #15151F;
  --vidro: linear-gradient(180deg, rgb(22 22 32 / 78%), rgb(12 12 19 / 92%));
  --linha: rgb(255 255 255 / 9%);
  --linha-forte: rgb(255 255 255 / 16%);
  --texto: #EDEDF2;
  --texto-2: #A8A8BC;
  --texto-3: #74748A;
  --ok: #4ADE80;
  --aviso: #F5B342;
  --erro: #F87171;
  --roxo: #A78BFA;
  --sombra: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px -12px rgb(0 0 0 / 60%);
  --sombra-alta: 0 24px 60px -12px rgb(0 0 0 / 70%);
  --brilho: 0.30;
  --raio: 14px;
  --f-titulo: "Onest", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --fundo: #F3F3F7; --superficie: #FFFFFF; --superficie-2: #F6F6FA;
  --vidro: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 80%));
  --linha: #E3E3EB; --linha-forte: #CFCFDA;
  --texto: #0E0E16; --texto-2: #4A4A5E; --texto-3: #82829A;
  --ok: #15803D; --aviso: #B45309; --erro: #DC2626; --roxo: #6D28D9;
  --marca-clara: color-mix(in srgb, var(--marca) 85%, #000);
  --sombra: 0 1px 2px rgb(14 14 22 / 5%), 0 8px 24px -10px rgb(14 14 22 / 12%);
  --sombra-alta: 0 20px 50px -12px rgb(14 14 22 / 25%);
  --brilho: 0.16;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
[hidden] { display: none !important; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titulo); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- barra superior ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1440px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--marca); color: #fff; display: grid; place-items: center; font: 700 14px var(--f-titulo); flex: none; overflow: hidden; }
.marca-logo img { width: 100%; height: 100%; object-fit: cover; }
.marca-nome { font: 700 16px var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.marca-sub { font-size: 12px; color: var(--texto-3); }
.abas { display: flex; gap: 2px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 11px; padding: 3px; }
.aba { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; color: var(--texto-2); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.aba svg { width: 16px; height: 16px; }
.aba[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.aba .cont { font-size: 11px; background: var(--marca); color: #fff; border-radius: 99px; padding: 0 6px; line-height: 17px; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip-demo { font-size: 12px; font-weight: 700; color: var(--aviso); border: 1px solid color-mix(in srgb, var(--aviso) 40%, var(--linha)); background: color-mix(in srgb, var(--aviso) 8%, transparent); border-radius: 99px; padding: 4px 10px; }

/* ---------- botões ---------- */
.btn { text-decoration: none; color: inherit; border: 1px solid var(--linha); background: var(--superficie); border-radius: 10px; padding: 8px 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { border-color: var(--marca-borda); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.prim { background: var(--marca); border-color: var(--marca); color: #fff; }
.secao .seg { align-self: flex-start; }
.btn.prim:hover { filter: brightness(1.08); }
.btn.perigo { color: var(--erro); }
.btn.fant { border-color: transparent; background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.carregando { position: relative; color: transparent !important; }
.btn.carregando::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-color: var(--texto-3) transparent var(--texto-3) transparent; border-radius: 50%; animation: gira .7s linear infinite; }
.btn.prim.carregando::after { border-color: #fff transparent #fff transparent; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- geral ---------- */
main { max-width: 1440px; margin: 0 auto; padding: 22px 20px 60px; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.vazio { padding: 40px 20px; text-align: center; color: var(--texto-2); }
.vazio h3 { color: var(--texto); margin-bottom: 6px; font-size: 18px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 2px 9px; border: 1px solid transparent; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-rascunho { color: var(--texto-3); background: var(--superficie-2); border-color: var(--linha); }
.st-pronto { color: var(--marca); background: var(--marca-suave); }
.st-agendado { color: var(--roxo); background: color-mix(in srgb, var(--roxo) 12%, transparent); }
.st-publicando, .st-parcial { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 12%, transparent); }
.st-publicado { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.st-erro { color: var(--erro); background: color-mix(in srgb, var(--erro) 10%, transparent); }
.redes-ic { display: inline-flex; gap: 4px; }
.redes-ic svg { width: 14px; height: 14px; color: var(--texto-2); }

/* ---------- aviso de começo (modo demonstração) ---------- */
.comeco { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 18px; border-color: var(--marca-borda); background: linear-gradient(120deg, var(--marca-suave), var(--superficie) 60%); }
.comeco h2 { font-size: 18px; margin-bottom: 4px; }
.comeco p { margin: 0; color: var(--texto-2); font-size: 14px; }
.passos { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.passo { display: flex; gap: 7px; align-items: center; color: var(--texto-2); }
.passo b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--superficie); border: 1px solid var(--linha); color: var(--texto); }
.passo.feito b { background: var(--ok); border-color: var(--ok); color: #fff; }
.passo.feito { color: var(--texto); }

/* ---------- semana ---------- */
.sem-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sem-topo h1 { font-size: 26px; }
.sem-nav { display: flex; gap: 4px; }
.sem-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.numero { padding: 14px 16px; }
.numero .v { font: 600 30px/1.1 var(--f-titulo); letter-spacing: -0.03em; margin-top: 4px; }
.numero .s { font-size: 12.5px; color: var(--texto-3); }
.numero.alerta .v { color: var(--erro); }
.grade-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.dia { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); min-height: 240px; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s, background .15s; }
.dia.hoje { border-color: var(--marca-borda); }
.dia.alvo { background: var(--marca-suave); border-color: var(--marca); }
.dia-cab { padding: 10px 12px 8px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--linha); }
.dia-cab .d { font-weight: 700; text-transform: capitalize; }
.dia-cab .n { font: 600 20px var(--f-titulo); color: var(--texto-2); }
.dia.hoje .dia-cab .n { color: var(--marca); }
.dia-corpo { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.slot { border: 1.5px dashed var(--linha); border-radius: 9px; padding: 7px 9px; font-size: 12.5px; color: var(--texto-3); display: flex; justify-content: space-between; align-items: center; background: transparent; width: 100%; text-align: left; }
.slot:hover, .slot.alvo { border-color: var(--marca); color: var(--marca); background: var(--marca-suave); }
.slot.passou { opacity: .45; pointer-events: none; }
.post { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 6px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); cursor: pointer; text-align: left; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.post:hover { border-color: var(--marca-borda); box-shadow: var(--sombra); }
.post[draggable="true"] { cursor: grab; }
.post.arrastando { opacity: .4; }
.post .th { width: 44px; height: 55px; border-radius: 7px; background: var(--linha) center/cover; position: relative; overflow: hidden; }
.post .th video, .post .th img { width: 100%; height: 100%; object-fit: cover; }
.post .th .qt { position: absolute; right: 3px; top: 3px; background: rgb(0 0 0 / 60%); color: #fff; font-size: 10px; border-radius: 5px; padding: 0 4px; font-weight: 700; }
.post .inf { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.post .hora { font: 600 12.5px var(--f-mono); color: var(--texto); }
.post .tit { font-size: 12.5px; color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.post .lin { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fila-pronta { margin-top: 18px; padding: 14px 16px; }
.fila-pronta .lista-h { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 4px; }
.fila-pronta .post { width: 220px; flex: none; }

/* ---------- posts (lista + editor) ---------- */
.posts { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.lista-cab { padding: 12px; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.filtros { display: flex; gap: 5px; flex-wrap: wrap; }
.filtro { border: 1px solid var(--linha); background: transparent; border-radius: 99px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.filtro[aria-pressed="true"] { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.lista-itens { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 7px; border-radius: 10px; border: 1px solid transparent; background: transparent; text-align: left; width: 100%; }
.li:hover { background: var(--superficie-2); }
.li[aria-current="true"] { background: var(--marca-suave); border-color: var(--marca-borda); }
.li .th { width: 46px; height: 57px; border-radius: 8px; background: var(--linha); overflow: hidden; position: relative; }
.li .th img, .li .th video { width: 100%; height: 100%; object-fit: cover; }
.li .t { font-weight: 600; font-size: 13.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.li .m { font-size: 12px; color: var(--texto-3); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dot-conf { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-conf.erro { background: var(--erro); } .dot-conf.aviso { background: var(--aviso); } .dot-conf.ok { background: var(--ok); }

.editor { padding: 0; overflow: hidden; }
.ed-cab { padding: 14px 18px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-cab input.tit { font: 700 20px var(--f-titulo); letter-spacing: -0.02em; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 3px 6px; margin-left: -6px; flex: 1; min-width: 200px; }
.ed-cab input.tit:hover, .ed-cab input.tit:focus { border-color: var(--linha); background: var(--superficie-2); outline: none; }
.salvo { font-size: 12px; color: var(--texto-3); }
.ed-corpo { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 0; }
.ed-previa { padding: 18px; border-right: 1px solid var(--linha); background: var(--superficie-2); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ed-campos { padding: 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bloco h3 { font-size: 14.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.bloco .ajuda { font-size: 12.5px; color: var(--texto-3); margin: -4px 0 8px; }
.seg { display: inline-flex; background: var(--superficie); border: 1px solid var(--linha); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.seg button svg { width: 14px; height: 14px; }
.seg button[aria-pressed="true"] { background: var(--texto); color: var(--superficie); }

/* celular de prévia */
.cel { width: 300px; max-width: 100%; background: #000; border-radius: 34px; padding: 10px; box-shadow: var(--sombra-alta); }
.cel-tela { background: #fff; color: #111; border-radius: 26px; overflow: hidden; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 12.5px; }
.ig-cab { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ig-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d6249f; overflow: hidden; }
.ig-av img { width: 100%; height: 100%; object-fit: cover; }
.ig-us { font-weight: 700; font-size: 12.5px; }
.ig-midia { position: relative; background: #111; aspect-ratio: 4 / 5; overflow: hidden; }
.ig-midia.reels { aspect-ratio: 9 / 16; }
.ig-midia img, .ig-midia video { width: 100%; height: 100%; object-fit: cover; }
.som-btn { position: absolute; right: 10px; bottom: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 62%); color: #fff; display: grid; place-items: center; cursor: pointer; }
.som-btn:hover { background: rgb(0 0 0 / 80%); }
.ig-midia .ctr { position: absolute; top: 8px; right: 8px; background: rgb(0 0 0 / 60%); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 8px; font-weight: 600; }
.ig-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 85%); color: #111; display: grid; place-items: center; }
.ig-seta.e { left: 6px; } .ig-seta.d { right: 6px; }
.ig-seta svg { width: 14px; height: 14px; }
.ig-acoes { display: flex; gap: 12px; padding: 8px 10px 4px; align-items: center; }
.ig-acoes svg { width: 20px; height: 20px; }
.ig-pontos { display: flex; gap: 3px; margin: 0 auto; }
.ig-pontos i { width: 5px; height: 5px; border-radius: 50%; background: #c7c7c7; }
.ig-pontos i.on { background: #0095f6; }
.ig-leg { padding: 2px 10px 12px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.ig-leg .mais { color: #737373; cursor: pointer; }
.tt { position: relative; aspect-ratio: 9 / 16; background: #000; color: #fff; }
.tt img, .tt video { width: 100%; height: 100%; object-fit: cover; }
.tt-leg { position: absolute; left: 10px; right: 54px; bottom: 14px; font-size: 12px; text-shadow: 0 1px 2px rgb(0 0 0 / 60%); white-space: pre-wrap; max-height: 40%; overflow: hidden; }
.tt-leg b { display: block; margin-bottom: 3px; }
.tt-lado { position: absolute; right: 8px; bottom: 40px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.tt-lado span { width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.previa-nota { font-size: 12px; color: var(--texto-3); text-align: center; max-width: 300px; }

/* campos */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
input[type="text"], input[type="password"], input[type="url"], input[type="datetime-local"], input[type="time"], textarea, select {
  border: 1px solid var(--linha); background: var(--superficie); border-radius: 9px; padding: 8px 10px; width: 100%; min-width: 0;
}
textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.contadores { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); }
.contadores .ruim { color: var(--erro); font-weight: 700; }
.contadores .meio { color: var(--aviso); font-weight: 700; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.redes-sel { display: flex; gap: 8px; flex-wrap: wrap; }
.rede-op { display: flex; align-items: center; gap: 9px; border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; background: var(--superficie); min-width: 200px; flex: 1; }
.rede-op svg { width: 18px; height: 18px; }
.rede-op .c { font-size: 12px; color: var(--texto-3); }
.rede-op.on { border-color: var(--marca); background: var(--marca-suave); }
.rede-op input { width: 16px; height: 16px; accent-color: var(--marca); margin-left: auto; }
.arqs { display: flex; gap: 8px; flex-wrap: wrap; }
.arq { width: 72px; position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--linha); background: var(--superficie-2); cursor: grab; }
.arq .im { width: 72px; height: 90px; }
.arq .im img, .arq .im video { width: 100%; height: 100%; object-fit: cover; }
.arq .n { position: absolute; left: 4px; top: 4px; background: rgb(0 0 0 / 60%); color: #fff; font-size: 10px; font-weight: 700; border-radius: 5px; padding: 0 5px; }
.arq .x { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 65%); color: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.arq .med { font-size: 10px; color: var(--texto-3); padding: 2px 4px; text-align: center; font-variant-numeric: tabular-nums; }
.arq.mais { display: grid; place-items: center; height: 108px; border-style: dashed; color: var(--texto-3); cursor: pointer; }
.arq.alvo { outline: 2px solid var(--marca); }
.conf { display: flex; flex-direction: column; gap: 6px; }
.conf-i { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; padding: 7px 10px; border-radius: 9px; }
.conf-i svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.conf-i.erro { background: color-mix(in srgb, var(--erro) 9%, transparent); color: var(--erro); }
.conf-i.aviso { background: color-mix(in srgb, var(--aviso) 10%, transparent); color: var(--aviso); }
.conf-i.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.conf-i span { color: var(--texto); }
.auto { border: 1px solid var(--linha); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.auto.on { border-color: var(--marca-borda); background: var(--marca-suave); }
.chave-liga { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.chave-liga input { appearance: none; width: 36px; height: 20px; border-radius: 99px; background: var(--linha); position: relative; transition: background .15s; flex: none; }
.chave-liga input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); }
.chave-liga input:checked { background: var(--marca); }
.chave-liga input:checked::after { transform: translateX(16px); }
.quando-bloco { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.quando-bloco .campo { flex: 1; min-width: 200px; }
.ed-rodape { padding: 14px 18px; border-top: 1px solid var(--linha); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--superficie); position: sticky; bottom: 0; }
.ed-rodape .esp { flex: 1; }
.erro-post { margin: 0 18px; margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--erro) 9%, transparent); color: var(--erro); font-size: 13.5px; }
.links-pub { display: flex; gap: 8px; flex-wrap: wrap; }
.links-pub a { color: var(--marca); font-weight: 600; font-size: 13.5px; }

/* ---------- feed ---------- */
.feed-wrap { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 24px; align-items: start; }
.feed { padding: 16px; }
.feed-perfil { display: flex; gap: 16px; align-items: center; padding: 6px 4px 16px; }
.feed-perfil .ig-av { width: 74px; height: 74px; font-size: 24px; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px #d6249f; }
.feed-perfil .nm { font: 700 17px var(--f-titulo); }
.feed-perfil .us { color: var(--texto-2); font-size: 13.5px; }
.feed-perfil .bio { font-size: 13px; color: var(--texto-2); margin-top: 4px; }
.feed-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.feed-t { position: relative; aspect-ratio: 4 / 5; background: var(--linha); overflow: hidden; border: 0; padding: 0; }
.feed-t img, .feed-t video { width: 100%; height: 100%; object-fit: cover; }
.feed-t .tag { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; font-weight: 700; background: rgb(0 0 0 / 65%); color: #fff; border-radius: 5px; padding: 1px 6px; }
.feed-t .tipo { position: absolute; right: 5px; top: 5px; color: #fff; }
.feed-t .tipo svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%)); }
.feed-t.futuro::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--roxo); }
.feed-lado h2 { font-size: 22px; margin-bottom: 6px; }
.feed-lado p { color: var(--texto-2); max-width: 52ch; }

/* ---------- direct ---------- */
.uso-barra { height:8px; border-radius:99px; background:var(--linha); overflow:hidden; margin:-6px 0 16px; }
.uso-barra i { display:block; height:100%; background:var(--marca); }
.direct-grade { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.direct-lista { display:flex; flex-direction:column; gap:12px; min-width:0; }
.auto-c { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.auto-c.pausada { opacity:.75; }
.auto-top { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }
.auto-top .th { width:46px; height:57px; border-radius:8px; background:var(--linha); overflow:hidden; }
.auto-top .th img, .auto-top .th video { width:100%; height:100%; object-fit:cover; }
.auto-q { min-width:0; }
.auto-pal { font-size:15px; } .auto-pal b { font-family:var(--f-mono); background:var(--marca-suave); color:var(--marca); padding:1px 8px; border-radius:6px; }
.auto-sub { font-size:12.5px; color:var(--texto-3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.auto-sub a { color:var(--marca); }
.auto-nums { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--texto-2); }
.auto-nums b { font-size:18px; color:var(--texto); margin-right:3px; }
.auto-nums .ruim b { color:var(--erro); }
.auto-msg { background:var(--superficie-2); border:1px solid var(--linha); border-radius:14px 14px 14px 4px; padding:10px 12px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow:auto; }
.auto-bt { margin-top:8px; text-align:center; border-top:1px solid var(--linha); padding-top:8px; color:var(--marca); font-weight:700; }
.auto-ed { display:flex; flex-direction:column; gap:10px; }
.auto-acoes { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.auto-reg { overflow-x:auto; font-size:13px; }
.auto-reg table { width:100%; border-collapse:collapse; min-width:460px; }
.auto-reg th, .auto-reg td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--linha); vertical-align:top; }
.auto-reg th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); }
.auto-reg .ruim { color:var(--erro); font-weight:700; }
.direct-regras { position:sticky; top:76px; }
.regras { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--texto-2); }
.regras b { color:var(--texto); }
@media (max-width:900px) { .direct-grade { grid-template-columns:1fr; } .direct-regras { position:static; } }

/* ---------- ajustes ---------- */
.ajustes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.secao { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.secao h2 { font-size: 18px; }
.secao .desc { color: var(--texto-2); font-size: 13.5px; margin: -8px 0 0; }
.conta-l { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 11px; }
.conta-l svg { width: 22px; height: 22px; }
.conta-l .q { flex: 1; min-width: 0; }
.conta-l .q b { display: block; }
.conta-l .q span { font-size: 12.5px; color: var(--texto-3); }
.passo-z { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.passo-z .b { width: 26px; height: 26px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.passo-z p { margin: 2px 0 6px; color: var(--texto-2); font-size: 13.5px; }
.passo-z a { color: var(--marca); font-weight: 600; }
.chave-l { display: flex; gap: 8px; }
.grade-ed { display: flex; flex-direction: column; gap: 8px; }
.grade-dia { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; }
.grade-dia .d { font-weight: 700; font-size: 13px; text-transform: capitalize; }
.horas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hora-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linha); background: var(--superficie-2); border-radius: 8px; padding: 2px 4px 2px 8px; font: 600 12.5px var(--f-mono); }
.hora-chip button { border: 0; background: transparent; color: var(--texto-3); padding: 0 4px; font-size: 14px; line-height: 1; }
.hora-add { width: 92px !important; padding: 3px 6px !important; font-size: 12.5px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.cor-l { display: flex; gap: 8px; align-items: center; }
.cor-l input[type="color"] { width: 42px; height: 36px; border: 1px solid var(--linha); border-radius: 9px; padding: 2px; background: var(--superficie); }

/* ---------- janela e avisos ---------- */
dialog { border: 0; border-radius: 16px; padding: 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(10 14 20 / 45%); backdrop-filter: blur(3px); }
.dlg-c { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg-c h2 { font-size: 20px; }
.solta { border: 2px dashed var(--linha); border-radius: 14px; padding: 28px 16px; text-align: center; color: var(--texto-2); transition: border-color .15s, background .15s; cursor: pointer; }
.solta.alvo, .solta:hover { border-color: var(--marca); background: var(--marca-suave); }
.solta svg { width: 30px; height: 30px; color: var(--marca); margin: 0 auto 6px; }
.prog { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--marca); width: 0; transition: width .2s; }
.dlg-pe { display: flex; justify-content: flex-end; gap: 8px; }
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--texto); color: var(--superficie); padding: 11px 14px; border-radius: 11px; box-shadow: var(--sombra-alta); font-size: 14px; font-weight: 600; animation: sobe .2s ease-out; }
.toast.ruim { background: var(--erro); color: #fff; }
@keyframes sobe { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .grade-sem { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ed-corpo { grid-template-columns: 1fr; }
  .ed-previa { border-right: 0; border-bottom: 1px solid var(--linha); }
}
@media (max-width: 900px) {
  .topo-in { flex-wrap: wrap; gap: 10px; padding: 8px 16px; }
  .abas { order: 3; width: 100%; overflow-x: auto; }
  .aba { flex: 1; justify-content: center; padding: 7px 8px; }
  main { padding: 16px 16px 60px; }
  .posts, .feed-wrap, .ajustes { grid-template-columns: 1fr; }
  .lista { position: static; max-height: 320px; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-sem { grid-template-columns: 1fr; }
  .dia { min-height: 0; }
  .comeco { grid-template-columns: 1fr; }
  .linha2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .aba span.t { display: none; }
  .marca-nome { max-width: 150px; }
  .rede-op { min-width: 0; }
}

/* capa do Reels */
.capa-l { display:flex; gap:12px; align-items:center; margin-top:10px; padding:10px; border:1px solid var(--linha); border-radius:12px; }
.capa-l img { width:54px; height:96px; object-fit:cover; border-radius:8px; flex:none; }
.chave-liga.sm { font-size:13px; font-weight:600; }

/* nova resposta */
.auto-nova { padding:18px; display:flex; flex-direction:column; gap:12px; margin-bottom:14px; border-color:var(--marca); }
.auto-nova h2 { margin:0; font-size:17px; }

/* resultados */
.res-grade { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:900px) { .res-grade { grid-template-columns:1fr; } }
.res-top { display:grid; grid-template-columns:22px 44px 1fr auto auto; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--linha); color:inherit; text-decoration:none; }
.res-top:first-of-type { border-top:0; }
a.res-top[href]:hover b { color:var(--marca); }
.res-top .pos { font-size:13px; color:var(--texto-2); text-align:center; }
.res-top .th { width:44px; height:56px; border-radius:8px; overflow:hidden; background:var(--superficie-2); display:grid; place-items:center; }
.res-top .th img { width:100%; height:100%; object-fit:cover; }
.res-top .th svg { width:18px; height:18px; opacity:.5; }
.res-top .q { min-width:0; display:flex; flex-direction:column; gap:2px; }
.res-top .q b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-top .q span, .res-n span { font-size:12px; color:var(--texto-2); }
.res-n { display:flex; flex-direction:column; align-items:flex-end; min-width:74px; }
.res-n b { font-size:16px; }
@media (max-width:560px) { .res-top { grid-template-columns:22px 44px 1fr auto; } .res-top .res-n:last-child { display:none; } }
.res-horas { display:flex; flex-direction:column; gap:6px; }
.res-hora { position:relative; display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:10px; overflow:hidden; border:1px solid var(--linha); }
.res-hora b, .res-hora span { position:relative; z-index:1; }
.res-hora span { font-size:12px; color:var(--texto-2); }
.res-hora i { position:absolute; left:0; top:0; bottom:0; background:var(--marca); opacity:.14; }
.res-hora.top { border-color:var(--marca); }
.res-hora.top i { opacity:.26; }
.res-tab { overflow-x:auto; }
.res-tab table { width:100%; border-collapse:collapse; font-size:13px; }
.res-tab th, .res-tab td { padding:8px 10px; text-align:right; border-top:1px solid var(--linha); white-space:nowrap; }
.res-tab th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-2); border-top:0; }
.res-tab th:first-child, .res-tab td.t { text-align:left; }
.res-tab td:nth-child(3) { text-align:left; }
.res-tab td.t { max-width:320px; overflow:hidden; text-overflow:ellipsis; }
.res-tab td.t a { color:inherit; }
.numeros.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width:1100px) { .numeros.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:760px) { .numeros.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auto-top .th.ic { display:grid; place-items:center; background:var(--marca-suave); color:var(--marca); }
.auto-top .th.ic svg { width:22px; height:22px; }
.auto-pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:560px) { .res-tab td.t { max-width:180px; } }

/* ---------- refinos v1.2 ---------- */
a { color: var(--marca); }
input:disabled, textarea:disabled, select:disabled { opacity: .65; cursor: not-allowed; background: var(--superficie-2); }
.voltar-lista { display: none; margin-bottom: 10px; }
.voltar-lista svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .posts.com-ed .lista { display: none; }
  .voltar-lista { display: inline-flex; }
}
@media (max-width: 520px) {
  .abas { gap: 0; padding: 3px 2px; }
  .aba { flex-direction: column; gap: 2px; padding: 5px 2px; font-size: 10px; letter-spacing: -.01em; position: relative; min-width: 0; }
  .aba span.t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .aba svg { width: 18px; height: 18px; }
  .aba .cont { position: absolute; top: 1px; right: 4px; font-size: 9px; line-height: 14px; padding: 0 4px; }
  .auto-top { grid-template-columns: 46px 1fr; }
  .auto-pills { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (pointer: coarse) {
  .hora-chip { padding: 4px 4px 4px 10px; }
  .hora-chip button { padding: 8px 10px; font-size: 17px; }
  .hora-add { min-height: 36px; }
  .btn.sm { min-height: 36px; }
}

/* pauta */
.pauta-add { display: grid; grid-template-columns: 1fr 170px auto; gap: 10px; padding: 12px; margin-bottom: 8px; }
.pauta-add input, .pauta-add select { border: 1px solid var(--linha); border-radius: 10px; padding: 9px 12px; background: var(--superficie); }
.pauta-dica { margin: 0 0 14px; }
.pauta-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pauta-col { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; }
.pauta-col-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.pauta-col-cab h2 { font-size: 16px; }
.pauta-n { font: 600 13px var(--f-mono); color: var(--texto-2); background: var(--superficie); border: 1px solid var(--linha); border-radius: 99px; padding: 1px 9px; }
.pauta-lista { display: flex; flex-direction: column; gap: 10px; }
.pauta-lista.desc { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pauta-vazia { font-size: 13px; color: var(--texto-3); border: 1px dashed var(--linha); border-radius: 10px; padding: 14px; text-align: center; }
.ideia { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.ideia.produzindo { border-color: var(--marca-borda); }
.ideia.feito { opacity: .92; }
.ideia.descartada { opacity: .7; }
.ideia h3 { font-size: 15px; line-height: 1.3; }
.ideia-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ideia-origem { font-size: 11.5px; color: var(--texto-3); }
.ideia-gancho { margin: 0; font-size: 13.5px; font-style: italic; color: var(--texto-2); }
.ideia-notas { margin: 0; font-size: 13px; color: var(--texto-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ideia-fonte { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.ideia-fonte svg { width: 13px; height: 13px; }
.ideia-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.ideia.editando { gap: 10px; }
.pauta-desc { margin-top: 16px; }
@media (max-width: 1000px) { .pauta-grade { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pauta-add { grid-template-columns: 1fr 1fr; } .pauta-add input { grid-column: 1 / -1; } }
.aba .tc { display: none; }
@media (max-width: 520px) { .aba[data-aba="resultados"] span.t { display: none; } .aba .tc { display: block; } }
.ideia-mais { display: inline-flex; gap: 2px; margin-left: auto; }
.ideia-prazo { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 99px; padding: 2px 9px; }
.ideia-prazo svg { width: 12px; height: 12px; }
.ideia-prazo.perto { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 40%, var(--linha)); }
.ideia-prazo.urgente { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 40%, var(--linha)); }

/* ---------- v1.3: Conversas (comentários), Story e saúde das contas ---------- */
.conv-seg { margin-bottom: 14px; }
.li .th .th-ic { width: 100%; height: 100%; display: grid; place-items: center; color: var(--texto-3); }
.li .th .th-ic svg { width: 20px; height: 20px; }
.conv-tit { flex: 1; min-width: 160px; font: 700 16px var(--f-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coment-lista { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.coment { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--superficie); }
.coment.meu { border-color: var(--marca-borda); background: var(--marca-suave); }
.coment.oculto { opacity: .6; }
.coment-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.coment-txt { margin: 0; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.coment-resps { display: flex; flex-direction: column; gap: 8px; margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--linha); }
.coment-resp { display: flex; flex-direction: column; gap: 8px; }
.coment-nota { margin: 0; padding: 0 18px 14px; }
.st-manual { color: #B54708; background: color-mix(in srgb, #F79009 16%, transparent); }
.st-story { color: #C13584; background: color-mix(in srgb, #C13584 12%, transparent); }
.story { position: relative; aspect-ratio: 9 / 16; background: #111; }
.story img, .story video { width: 100%; height: 100%; object-fit: contain; }
.story-barra { position: absolute; top: 8px; left: 8px; right: 8px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 35%); overflow: hidden; }
.story-barra i { display: block; width: 40%; height: 100%; background: #fff; }
.story-cab { position: absolute; top: 18px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgb(0 0 0 / 60%); }
.story-cab .ig-av { width: 26px; height: 26px; box-shadow: none; }
.story-cab span:last-child { opacity: .8; }
.faixa-saude { max-width: 1440px; margin: 12px auto 0; padding: 0 20px; display: flex; flex-direction: column; gap: 8px; }
.faixa-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; background: var(--erro); color: #fff; font-size: 14px; }
.faixa-in > svg { width: 18px; height: 18px; flex: none; }
.faixa-in > span { flex: 1; min-width: 0; }
.faixa-in .faixa-det { opacity: .85; }
.faixa-in .btn { color: var(--erro); border-color: #fff; background: #fff; }
.conta-l .q .conta-ok { display: block; color: var(--ok); font-weight: 700; }
.conta-l .q .conta-ruim { display: block; color: var(--erro); font-weight: 700; }
@media (max-width: 900px) { .faixa-saude { padding: 0 16px; } .faixa-in { flex-wrap: wrap; } }

/* ================= Visual A: Estúdio Noturno ================= */
body { font-weight: 400; letter-spacing: -0.005em; position: relative; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, var(--marca) calc(var(--brilho) * 100%), transparent), transparent 70%),
              radial-gradient(800px 700px at 100% 55%, color-mix(in srgb, var(--marca) calc(var(--brilho) * 50%), transparent), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 75% 45% at 50% 0%, #000, transparent); mask-image: radial-gradient(ellipse 75% 45% at 50% 0%, #000, transparent); }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.025em; }
.rotulo { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }

/* topo e abas */
.topo { background: color-mix(in srgb, var(--fundo) 72%, transparent); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--linha); }
.marca-logo { border-radius: 10px; box-shadow: 0 0 28px color-mix(in srgb, var(--marca) 55%, transparent); }
.marca-nome { font: 600 15px var(--f-titulo); }
.abas { background: var(--vidro); border-color: var(--linha); border-radius: 13px; padding: 4px; backdrop-filter: blur(14px); }
.aba { font-weight: 500; border-radius: 10px; padding: 8px 13px; }
.aba[aria-selected="true"] { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.aba .cont { background: var(--marca); box-shadow: 0 0 12px color-mix(in srgb, var(--marca) 60%, transparent); }
.chip-demo { font-weight: 600; }

/* cartões de vidro */
.cartao, .dia, .ideia, .pauta-col, .auto, .rede-op, .conta-l, .coment { background: var(--vidro); border-color: var(--linha); backdrop-filter: blur(14px); }
.cartao { border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao:hover { border-color: var(--linha-forte); }
.pauta-col { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }

/* botões */
.btn { border-radius: 11px; font-weight: 500; min-height: 40px; padding: 8px 16px; background: color-mix(in srgb, var(--texto) 4%, transparent); border-color: var(--linha-forte); }
.btn:hover { border-color: color-mix(in srgb, var(--marca) 60%, var(--linha-forte)); background: color-mix(in srgb, var(--texto) 7%, transparent); }
.btn.prim { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--marca) 65%, transparent); }
.btn.prim:hover { filter: brightness(1.1); background: var(--marca); }
.btn.fant { background: transparent; border-color: transparent; }
.btn.sm { min-height: 32px; padding: 4px 11px; border-radius: 9px; }

/* números grandes e finos */
.numero { padding: 18px 18px 16px; }
.numero .v { font: 300 52px/1 var(--f-titulo); letter-spacing: -0.045em; margin-top: 12px;
  background: linear-gradient(180deg, var(--texto) 35%, var(--marca-clara)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numero .s { margin-top: 8px; }
.numero.alerta .v { background: none; color: var(--erro); }

/* pílulas */
.pill { font-weight: 600; border-color: var(--linha); }
.st-pronto { color: var(--marca-clara); background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca) 40%, transparent); }

/* campos */
input[type="text"], input[type="password"], input[type="url"], input[type="datetime-local"], input[type="time"], input[type="date"], textarea, select {
  background: color-mix(in srgb, var(--superficie) 80%, transparent); border-color: var(--linha-forte); border-radius: 10px; }
.seg { background: color-mix(in srgb, var(--superficie) 70%, transparent); border-color: var(--linha); border-radius: 11px; padding: 3px; }
.seg button { border-radius: 8px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.filtro { font-weight: 500; }
.filtro[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.ed-rodape, .ed-previa { background: color-mix(in srgb, var(--superficie) 85%, transparent); }
dialog { background: var(--superficie); border: 1px solid var(--linha-forte); }
.toast { background: var(--texto); color: var(--fundo); }
.comeco { background: linear-gradient(120deg, color-mix(in srgb, var(--marca) 20%, transparent), transparent 65%), var(--vidro); border-color: color-mix(in srgb, var(--marca) 40%, var(--linha)); }

/* ---------- Semana: título, próximo post e agenda com capas grandes ---------- */
.sem-ola { margin: 8px 0 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sem-ola h1 { font-size: 34px; font-weight: 400; letter-spacing: -0.035em; margin-top: 8px; }
.sem-ola h1 .apagado { color: var(--texto-3); }
.sem-ola .sem-acoes { margin-left: 0; align-items: center; }
.hero-sem { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-bottom: 26px; }
.prox { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; padding: 18px; border-color: color-mix(in srgb, var(--marca) 38%, var(--linha)); }
.prox .capa { width: 190px; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--superficie-2); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 80%); }
.prox .capa img, .prox .capa video { width: 100%; height: 100%; object-fit: cover; }
.prox .info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prox .quando { color: var(--marca-clara); }
.prox h2 { font-size: 26px; line-height: 1.2; }
.prox .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.prox .falta { font: 300 58px/1 var(--f-titulo); letter-spacing: -0.045em; background: linear-gradient(180deg, var(--texto) 35%, var(--marca-clara)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 4px; }
.prox .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.prox.vazio-p { grid-template-columns: 1fr; text-align: left; }
.hero-sem .numeros { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tag-p { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--linha-forte); color: var(--texto-2); }
.tag-p.ac { color: #fff; background: color-mix(in srgb, var(--marca) 26%, transparent); border-color: color-mix(in srgb, var(--marca) 55%, transparent); }
:root[data-theme="light"] .tag-p.ac { color: var(--marca-clara); }
.sec-rot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.grade-sem { gap: 10px; }
.dia { border-radius: var(--raio); min-height: 320px; }
.dia.hoje { border-color: color-mix(in srgb, var(--marca) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 30%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--marca) 60%, transparent); }
.dia-cab { border-bottom: 0; padding: 12px 12px 4px; }
.dia-cab .d { font-weight: 500; font-size: 13px; color: var(--texto-2); text-transform: none; }
.dia-cab .n { font: 300 30px/1 var(--f-titulo); letter-spacing: -0.04em; color: var(--texto); }
.dia.hoje .dia-cab .n { color: var(--marca-clara); }
.dia-corpo { gap: 9px; }
.slot { border-color: var(--linha-forte); font-family: var(--f-mono); font-size: 12px; padding: 9px 10px; }
.slot:hover, .slot.alvo { color: var(--marca-clara); }
/* capa grande do post na agenda */
.post.capa { grid-template-columns: 1fr; gap: 7px; padding: 6px; background: color-mix(in srgb, var(--texto) 3.5%, transparent); border-color: var(--linha); }
.post.capa .th { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 9px; }
.post.capa .th .hora-sobre { position: absolute; left: 6px; top: 6px; font: 600 11.5px var(--f-mono); color: #fff; background: rgb(0 0 0 / 62%); backdrop-filter: blur(6px); border-radius: 7px; padding: 2px 7px; }
.post.capa .th .qt { top: 6px; right: 6px; }
.post.capa .tit { color: var(--texto); font-size: 12.5px; -webkit-line-clamp: 2; }
.post.capa .lin { gap: 5px; }
.post.capa .pill { font-size: 10.5px; padding: 1px 7px; }
.post.capa:hover { border-color: color-mix(in srgb, var(--marca) 55%, transparent); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--marca) 70%, transparent); transform: translateY(-1px); }
.post { transition: border-color .15s, box-shadow .15s, transform .15s; }
@media (max-width: 1180px) { .hero-sem { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .sem-ola h1 { font-size: 26px; }
  .prox { grid-template-columns: 120px 1fr; gap: 14px; }
  .prox .capa { width: 120px; }
  .prox h2 { font-size: 19px; }
  .prox .falta { font-size: 40px; }
  .grade-sem .dia-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-sem .slot { grid-column: span 1; }
}
@media (max-width: 520px) { .prox { grid-template-columns: 1fr; } .prox .capa { width: 100%; max-width: 220px; } }
@media (max-width: 900px) {
  .grade-sem .dia-corpo { align-items: start; }
  .grade-sem .slot { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .aba span.t, .aba .tc { display: none !important; }
  .aba[aria-selected="true"] { flex-direction: row; gap: 6px; padding: 7px 10px; flex: 2.2; font-size: 12px; }
  .aba[aria-selected="true"] span.t { display: block !important; }
  .aba[aria-selected="true"][data-aba="resultados"] span.t { display: none !important; }
  .aba[aria-selected="true"][data-aba="resultados"] .tc { display: block !important; }
}
@media (max-width: 520px) { .aba[aria-selected="true"] { flex: 0 0 auto; } .aba[aria-selected="true"] span.t { overflow: visible; max-width: none; } }

/* "Exigir que siga antes de mandar": bloco à vista */
.seguir-box { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha-forte); background: color-mix(in srgb, var(--texto) 3%, transparent); }
.seguir-box.on { border-color: color-mix(in srgb, var(--marca) 55%, transparent); background: color-mix(in srgb, var(--marca) 10%, transparent); }
.seguir-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--texto-2); }
.seguir-box.on .seguir-ic { background: var(--marca); color: #fff; box-shadow: 0 0 20px color-mix(in srgb, var(--marca) 50%, transparent); }
.seguir-ic svg { width: 20px; height: 20px; }
.seguir-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seguir-q b { font-weight: 600; font-size: 14px; }
.seguir-q span { font-size: 12.5px; color: var(--texto-2); }
.seguir-chave input { width: 46px; height: 26px; }
.seguir-chave input::after { width: 22px; height: 22px; }
.seguir-chave input:checked::after { transform: translateX(20px); }
.seguir-previa { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.bolha { align-self: flex-start; max-width: 420px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 13px; }
.bolha-bt { display: block; margin-top: 8px; text-align: center; border-top: 1px solid var(--linha); padding-top: 8px; font-weight: 600; color: var(--marca-clara); }
.bolha-nota { font-size: 12px; color: var(--texto-3); }
@media (max-width: 520px) { .seguir-box { grid-template-columns: 34px 1fr auto; padding: 10px; } }

/* ---------- Resultados v1.5: comparação, gráfico, formatos, mapa de calor e público ---------- */
.res-cab { align-items: flex-end; }
.res-cab h1 { margin-top: 6px; font-size: 30px; font-weight: 400; letter-spacing: -0.035em; }
.res-cab .sem-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sec-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sec-cab h2 { margin-top: 4px; }
.res-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { display: flex; flex-direction: column; min-width: 0; }
.kpi .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.kpi .s { margin: 10px 0 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.45; }
.kpi-ganho { font: 500 13px var(--f-mono); color: var(--texto-2); margin-top: 8px; }
.delta { margin-top: 10px; font: 600 13px var(--f-mono); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.delta span { font: 400 12px var(--f-texto); color: var(--texto-3); }
.delta.sobe { color: var(--ok); }
.delta.desce { color: var(--erro); }
.delta.igual, .delta.sem { color: var(--texto-3); font-weight: 500; }
.res-falta { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 11px; border: 1px dashed var(--linha-forte); color: var(--texto-2); font-size: 13.5px; }
.res-falta svg { width: 18px; height: 18px; flex: none; color: var(--aviso); margin-top: 1px; }
.dica-l { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 11px; font-size: 14px; color: var(--texto);
  background: color-mix(in srgb, var(--marca) 11%, transparent); border: 1px solid color-mix(in srgb, var(--marca) 35%, var(--linha)); }
.dica-l svg { width: 17px; height: 17px; flex: none; color: var(--marca-clara); margin-top: 2px; }
.dica-l b { font-weight: 600; }
.bola { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.bola.ok { background: var(--ok); } .bola.ruim { background: var(--erro); }

/* o que fazer */
.res-fazer { margin-bottom: 14px; border-color: color-mix(in srgb, var(--marca) 40%, var(--linha));
  background: linear-gradient(120deg, color-mix(in srgb, var(--marca) 14%, transparent), transparent 60%), var(--vidro); }
.fazer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fazer-i { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 13px; border-radius: 12px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 55%, transparent); }
.fazer-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--marca); color: #fff; box-shadow: 0 0 22px color-mix(in srgb, var(--marca) 45%, transparent); }
.fazer-ic svg { width: 18px; height: 18px; }
.fazer-i b { font-weight: 600; font-size: 14.5px; display: block; }
.fazer-i b .num { color: var(--marca-clara); font-family: var(--f-mono); font-weight: 500; margin-right: 2px; }
.fazer-i p { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.fazer-i a { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }

/* duas colunas */
.res-duo { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.res-duo > *, .res-grade > * { min-width: 0; }
.res-grade { margin: 0 0 14px; }

/* gráfico */
.graf { position: relative; width: 100%; min-height: 200px; }
.g-svg { display: block; overflow: visible; touch-action: pan-y; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-grade.zero { stroke: var(--linha-forte); }
.g-eixo { fill: var(--texto-3); font: 500 10.5px var(--f-mono); }
.g-area { fill: url(#gArea); }
.g-linha { fill: none; stroke: var(--marca-clara); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--marca) 75%, transparent)); }
.g-ponto { fill: var(--marca-clara); stroke: var(--fundo); stroke-width: 2; }
.g-halo { fill: var(--marca); opacity: .28; }
.g-mira { stroke: var(--linha-forte); stroke-dasharray: 3 4; }
.g-toque { cursor: crosshair; }
.g-dica { position: absolute; pointer-events: none; z-index: 2; white-space: nowrap; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; color: var(--texto-2);
  background: var(--superficie); border: 1px solid var(--linha-forte); box-shadow: var(--sombra-alta); }
.g-dica span { display: block; font: 500 11px var(--f-mono); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.g-dica b { color: var(--texto); font-size: 15px; font-weight: 600; }

/* seguidores: ganhos x perdas */
.seg-resumo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg-saldo { display: flex; flex-direction: column; }
.seg-saldo b, .seg-total b { font: 300 46px/1 var(--f-titulo); letter-spacing: -0.04em; color: var(--ok); margin-top: 6px; }
.seg-saldo b.neg { color: var(--erro); }
.seg-total { display: flex; align-items: baseline; gap: 10px; }
.seg-total b { color: var(--texto); }
.seg-total span { color: var(--texto-2); font-size: 13px; }
.seg-par { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); }
.gp-barras { display: flex; align-items: stretch; gap: 2px; height: 120px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 6px 0; }
.gp-d { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.gp-g, .gp-p { display: block; border-radius: 3px; width: 100%; max-width: 14px; justify-self: center; }
.gp-g { align-self: end; background: var(--ok); opacity: .85; }
.gp-p { align-self: start; background: var(--erro); opacity: .8; }
.gp-d:hover .gp-g, .gp-d:hover .gp-p { opacity: 1; }
.gp-eixo { display: flex; justify-content: space-between; font: 500 10.5px var(--f-mono); color: var(--texto-3); margin-top: -8px; }

/* formatos */
.fmt-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fmt { padding: 14px; border-radius: 12px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 50%, transparent); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fmt.top { border-color: color-mix(in srgb, var(--marca) 60%, transparent); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--marca) 80%, transparent); }
.fmt-cab { display: flex; align-items: center; gap: 8px; }
.fmt-cab b { font-weight: 600; }
.fmt-cab .pill { margin-left: auto; color: var(--texto-2); }
.fmt-cab .pill::before { display: none; }
.fmt-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-clara); }
.fmt-ic svg { width: 14px; height: 14px; }
.fmt-v { font: 300 40px/1 var(--f-titulo); letter-spacing: -0.04em; margin-top: 10px; padding-bottom: 2px;
  background: linear-gradient(180deg, var(--texto) 35%, var(--marca-clara)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fmt-s { font-size: 12px; color: var(--texto-3); }
.fmt-barra { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; margin: 8px 0 4px; }
.fmt-barra i { display: block; height: 100%; border-radius: 99px; background: var(--marca); box-shadow: 0 0 12px color-mix(in srgb, var(--marca) 70%, transparent); }
.fmt-n { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.fmt-n b { color: var(--texto); font-weight: 600; }

/* ritmo (posts por semana) */
.ritmo { display: flex; flex-direction: column; gap: 7px; }
.ritmo-l { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--texto-2); }
.ritmo-l > span:first-child { font-family: var(--f-mono); }
.ritmo-l b { text-align: right; color: var(--texto); font-weight: 600; }
.ritmo-b { height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.ritmo-b i { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--marca) 45%, transparent); }
.ritmo-l.top { color: var(--texto); }
.ritmo-l.top .ritmo-b i { background: var(--marca); box-shadow: 0 0 12px color-mix(in srgb, var(--marca) 70%, transparent); }

/* melhores posts */
.res-top .q em.vezes { font-style: normal; color: var(--ok); font-weight: 600; }

/* mapa de calor */
.res-online, .res-pub { margin-bottom: 14px; }
.heat-wrap { overflow-x: auto; max-width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.heat { display: grid; grid-template-columns: 38px repeat(24, minmax(20px, 1fr)); gap: 3px; min-width: 640px; }
.heat-h { font: 500 10px var(--f-mono); color: var(--texto-3); text-align: left; padding-bottom: 2px; }
.heat-d { font: 500 11px var(--f-mono); color: var(--texto-2); align-self: center; text-transform: lowercase; }
.heat-cel { display: block; height: 24px; border-radius: 5px; position: relative; background: color-mix(in srgb, var(--texto) 4%, transparent); overflow: hidden; }
.heat-cel::after { content: ""; position: absolute; inset: 0; background: var(--marca); opacity: calc(0.04 + var(--a, 0) * 0.96); }
.heat-cel.pico { overflow: visible; outline: 2px solid var(--marca-clara); outline-offset: 1px; box-shadow: 0 0 16px color-mix(in srgb, var(--marca) 80%, transparent); }
.heat-cel.pico::after { border-radius: 5px; }
.heat-leg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); }
.heat-leg .heat-cel { width: 18px; height: 12px; border-radius: 3px; }
.heat-leg > span:first-child { margin-right: 4px; }
.heat-nota { margin-left: auto; }

/* público */
.pub-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pub-grade > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-l { display: grid; grid-template-columns: minmax(70px, 120px) 1fr 46px; gap: 10px; align-items: center; font-size: 13px; color: var(--texto-2); }
.pb-l > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-l b { text-align: right; color: var(--texto); font-weight: 600; }
.pb-b { height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.pb-b i { display: block; height: 100%; border-radius: 99px; background: var(--marca); }
.gen-barra { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--linha); margin-top: 4px; }
.gen-barra i { display: block; height: 100%; }
.gen-F { background: var(--roxo); } .gen-M { background: var(--marca); } .gen-U { background: var(--texto-3); }
.gen-leg { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); }
.gen-leg b { color: var(--texto); font-weight: 600; margin-left: 4px; }
.pais { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.pais .rotulo { width: 100%; }
.pais b { font: 300 34px/1 var(--f-titulo); letter-spacing: -0.04em; }
.pais span:last-child { color: var(--texto-2); font-size: 13px; }

@media (max-width: 1180px) {
  .res-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .res-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pub-grade { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .heat-nota { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .res-cab h1 { font-size: 24px; }
  .res-cab .sem-acoes { margin-left: 0; width: 100%; }
  .res-cab .seg { flex: 1; } .res-cab .seg button { flex: 1; justify-content: center; }
  .kpi { padding: 14px 13px 13px; }
  .kpi .v { font-size: 33px; margin-top: 8px; }
  .kpi .s { font-size: 11.5px; margin-top: 8px; }
  .delta { font-size: 12px; } .delta span { font-size: 11px; }
  .res-graf-c .sec-cab .seg { width: 100%; } .res-graf-c .sec-cab .seg button { flex: 1; justify-content: center; padding: 4px 6px; }
  .seg-saldo b, .seg-total b { font-size: 38px; }
  .fazer { grid-template-columns: minmax(0, 1fr); }
  .gp-barras { height: 96px; gap: 1px; }
}
@media (max-width: 560px) { .res-top .q b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } }
.kpi-ganho.sem { font: 400 12.5px var(--f-texto); color: var(--texto-3); }

/* ---------- linha GoHighLevel ---------- */
.conta-l .q.ghl-info > span { display: block; overflow-wrap: anywhere; }
.ghl-campos { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; max-width: 520px; }
.escopos { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.escopos li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--texto-2); }
.escopos code { font: 500 12px var(--f-mono); color: var(--texto); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 6px; }
.conv-ghl { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; max-width: 860px; }
.conv-ghl-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); }
.conv-ghl-ic svg { width: 20px; height: 20px; }
.conv-ghl h2 { margin: 0 0 8px; }
.conv-ghl .desc { margin: 0 0 12px; }
@media (max-width: 600px) { .conv-ghl { grid-template-columns: 1fr; } }

/* ---------- versão web: workspace, conta e equipe ---------- */
.ws-sel { max-width: 200px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--superficie); font-weight: 600; }
.ws-nome { font-weight: 600; color: var(--texto-2); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-eu { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: var(--superficie-2); border-radius: 99px; padding: 3px 12px 3px 3px; }
.ws-eu-n { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
.ws-av { width: 30px; height: 30px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-clara); display: grid; place-items: center; font: 700 13px var(--f-titulo); flex: none; }
.eq-l { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.eq-l .q { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.eq-l .q span { font-size: 13px; color: var(--texto-3); }
.eq-l select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linha-forte); background: var(--superficie); }
.eq-conv { display: flex; gap: 8px; flex-wrap: wrap; }
.eq-conv input { flex: 1; min-width: 180px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--superficie); }
.eq-conv select { padding: 10px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--superficie); }
.eq-link { border: 1px solid var(--marca-borda); background: var(--marca-suave); border-radius: 12px; padding: 14px; }
label.btn { display: inline-flex; align-items: center; }
@media (max-width: 760px) { .ws-eu-n, .ws-nome { display: none; } .ws-sel { max-width: 120px; } }
.guia-z { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; }
.guia-z summary { cursor: pointer; font-weight: 700; color: var(--marca); }
.guia-z-c { display: grid; gap: 12px; margin-top: 12px; }

/* ==================== Action Feed ====================
   Menu lateral, laranja como cor da tela (a cor da marca do cliente fica só nos posts),
   Inter no texto, Instrument Serif itálico no título da página, mono nos rótulos.
   Tema: escuro, claro ou igual ao computador (escolhido no rodapé do menu e em Ajustes). */
:root {
  --marca: #FF5A1F;
  --marca-tinta: #1A0A02; /* texto em cima do laranja */
  --fundo: #0A0A0B; --superficie: #121214; --superficie-2: #17171A; --lat: #0E0E10;
  --vidro: #111113;
  --linha: rgb(255 255 255 / 8%); --linha-forte: rgb(255 255 255 / 15%);
  --texto: #F4F4F5; --texto-2: #A1A1AA; --texto-3: #6E6E78;
  --brilho: 0;
  --sombra: none; --sombra-alta: 0 24px 60px -12px rgb(0 0 0 / 70%);
  --f-titulo: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
}
:root[data-theme="light"] {
  --marca: #F2540F;
  --fundo: #FAFAF9; --superficie: #FFFFFF; --superficie-2: #F4F4F2; --lat: #FFFFFF;
  --vidro: #FFFFFF;
  --linha: #E7E5E4; --linha-forte: #D6D3D1;
  --texto: #0C0A09; --texto-2: #57534E; --texto-3: #8A847E;
  --sombra: 0 1px 2px rgb(12 10 9 / 4%);
}
body { background: var(--fundo); font-family: var(--f-texto); }
body::before, body::after { display: none; }
:root:not([data-theme="light"]) body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.02em; }

/* estrutura */
.app { display: grid; grid-template-columns: 284px minmax(0, 1fr); min-height: 100vh; }
.principal { min-width: 0; padding: 34px 44px 64px; }
main#tela { max-width: 1440px; margin: 0; padding: 0; }

/* menu lateral */
.lateral.topo { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 26px 16px 18px; background: var(--lat); border: 0; border-right: 1px solid var(--linha); backdrop-filter: none; z-index: 30; }
.af-logo { display: block; padding: 0 8px 8px; }
.af-logo img { height: 32px; width: auto; }
.so-claro { display: none; }
:root[data-theme="light"] .so-claro { display: block; }
:root[data-theme="light"] .so-escuro { display: none; }
.perfil { gap: 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie-2); }
.perfil .marca-logo { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--texto); box-shadow: none; font: 700 15px var(--f-titulo); }
.perfil .marca-nome { font: 700 15px var(--f-titulo); max-width: 170px; }
.perfil .marca-sub { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .topo-dir { margin: 0; flex-direction: column; align-items: stretch; gap: 8px; }
.lateral .ws-sel { max-width: none; width: 100%; padding: 10px 12px; border-radius: 12px; border-color: var(--linha); background: var(--superficie); }
.lateral .ws-nome { font-size: 13px; color: var(--texto-3); padding: 0 6px; }
.lateral .ws-eu { border-radius: 12px; padding: 6px 10px 6px 6px; background: transparent; }
.lateral .ws-eu-n { max-width: none; }
.lateral .abas { flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; }
.lateral .aba { justify-content: flex-start; gap: 14px; padding: 13px 14px; border-radius: 10px; font: 600 14px var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; color: var(--texto-2); box-shadow: none; position: relative; }
.lateral .aba:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); color: var(--texto); }
.lateral .aba svg { display: none; }
.lateral .aba .tc { display: none !important; }
.lateral .aba .bul { width: 7px; height: 7px; border: 1.5px solid currentColor; flex: none; opacity: .7; }
.lateral .aba[aria-selected="true"] { background: color-mix(in srgb, var(--marca) 14%, transparent); color: var(--marca); box-shadow: none; }
.lateral .aba[aria-selected="true"] .bul { background: var(--marca); border-color: var(--marca); opacity: 1; }
.lateral .aba .cont { margin-left: auto; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font: 600 12px var(--f-titulo); background: color-mix(in srgb, var(--marca) 20%, transparent); color: var(--marca); box-shadow: none; line-height: 1; }
.lat-grupo { margin-top: 14px; padding: 0 14px; font: 700 13px var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; color: var(--texto); }
.lat-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.lat-rodape .chip-demo { align-self: flex-start; }
.tema-lat { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: 11px; background: var(--superficie-2); }
.tema-lat button { flex: 1; display: grid; place-items: center; padding: 7px; border: 0; border-radius: 8px; background: none; color: var(--texto-3); }
.tema-lat button svg { width: 16px; height: 16px; }
.tema-lat button:hover { color: var(--texto); }
.tema-lat button[aria-pressed="true"] { background: var(--superficie); color: var(--marca); box-shadow: inset 0 0 0 1px var(--linha); }

/* cabeçalho da página */
.cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--linha); }
.saud { margin: 0; font-size: 24px; color: var(--texto-2); letter-spacing: -0.01em; }
.saud b { color: var(--texto); font-weight: 600; }
.cab-sub { margin: 8px 0 0; font: 600 13px var(--f-titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.titulo-pag { font: italic 400 68px/1 var(--f-serif); color: var(--marca); letter-spacing: -0.01em; margin: 0 0 24px; }

/* superfícies e botões no jeito Action Feed */
.cartao, .dia, .ideia, .pauta-col, .auto, .rede-op, .conta-l, .coment { background: var(--superficie); backdrop-filter: none; }
.cartao { box-shadow: var(--sombra); border-radius: 16px; }
.btn { background: transparent; border-color: var(--linha-forte); border-radius: 10px; font-weight: 600; }
.btn:hover { border-color: color-mix(in srgb, var(--marca) 55%, var(--linha-forte)); background: color-mix(in srgb, var(--texto) 4%, transparent); }
.btn.prim, .btn.prim:hover { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); box-shadow: none; }
.btn.prim:hover { filter: brightness(1.07); }
.chip-demo { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 40%, var(--linha)); background: color-mix(in srgb, var(--marca) 9%, transparent); }
.lista, .direct-regras { top: 20px; }
.marca-logo { box-shadow: none; }

/* celular e tablet: barra de cima com a logo, abas embaixo */
@media (max-width: 900px) {
  .app { display: block; }
  .lateral.topo { position: sticky; top: 0; height: auto; overflow: visible; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); border-right: 0; border-bottom: 1px solid var(--linha); background: var(--lat); backdrop-filter: none; }
  .af-logo { padding: 0; flex: none; }
  .af-logo img { max-width: none; }
  .lat-rodape .chip-demo { white-space: nowrap; }
  .af-logo img { height: 22px; }
  .perfil, .lat-grupo, .tema-lat { display: none !important; }
  .lateral .topo-dir { flex-direction: row; align-items: center; margin-left: auto; }
  .lateral .ws-sel { width: auto; max-width: 130px; padding: 6px 8px; }
  .lateral .ws-eu { padding: 3px; border-radius: 99px; }
  .lateral .ws-eu-n, .lateral .ws-nome { display: none; }
  .lat-rodape { margin: 0; padding: 0; }
  .lat-rodape .chip-demo { font-size: 10px; padding: 3px 8px; }
  .lateral .abas-sis { flex-direction: row; gap: 2px; }
  .lateral .abas-sis .aba { padding: 8px; }
  .lateral .abas-sis .aba span.t, .lateral .abas-sis .aba .bul { display: none !important; }
  .lateral .abas-sis .aba svg { display: block; width: 20px; height: 20px; }
  .lateral .abas:not(.abas-sis) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--lat); border-top: 1px solid var(--linha); overflow: visible; width: auto; }
  .lateral .abas:not(.abas-sis) .aba { flex: 1 1 0 !important; min-width: 0; flex-direction: column !important; gap: 3px !important; padding: 6px 2px !important; font: 600 10px var(--f-titulo); letter-spacing: 0; text-transform: none; background: none; }
  .lateral .abas:not(.abas-sis) .aba svg { display: block; width: 21px; height: 21px; }
  .lateral .abas:not(.abas-sis) .aba .bul { display: none; }
  .lateral .abas:not(.abas-sis) .aba span.t { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral .abas:not(.abas-sis) .aba .cont { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; background: var(--marca); color: var(--marca-tinta); }
  .lateral .aba[aria-selected="true"] { background: none; }
  .principal { padding: 18px 16px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .cab { padding-bottom: 14px; margin-bottom: 16px; }
  .saud { font-size: 19px; }
  .cab-sub { font-size: 11px; }
  .titulo-pag { font-size: 46px; margin-bottom: 16px; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) { .lat-rodape .chip-demo { display: none !important; } .lateral .abas-sis .aba { padding: 6px; } }

/* menu lateral v2: ícone em cada item, letra menor e efeitos discretos */
@media (min-width: 901px) {
  .lateral .abas { gap: 2px; }
  .lateral .aba { gap: 12px; padding: 9px 12px; border-radius: 9px; font: 500 13.5px/1.2 var(--f-titulo); letter-spacing: -0.005em; text-transform: none; color: var(--texto-2); transition: background .18s ease, color .18s ease; }
  .lateral .aba .bul { display: none; }
  .lateral .aba svg { display: block; width: 18px; height: 18px; flex: none; stroke-width: 1.6; opacity: .75; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease, color .18s ease; }
  .lateral .aba:hover { background: color-mix(in srgb, var(--texto) 4.5%, transparent); color: var(--texto); }
  .lateral .aba:hover svg { opacity: 1; transform: translateX(2px); }
  .lateral .aba::before { content: ""; position: absolute; left: -16px; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--marca); transform: translateY(-50%); transition: height .22s cubic-bezier(.2,.8,.2,1); }
  .lateral .aba[aria-selected="true"] { background: color-mix(in srgb, var(--marca) 11%, transparent); color: var(--texto); font-weight: 600; }
  .lateral .aba[aria-selected="true"]::before { height: 20px; }
  .lateral .aba[aria-selected="true"] svg { color: var(--marca); opacity: 1; }
  .lateral .aba:active svg { transform: scale(.92); }
  .lateral .aba .cont { min-width: 22px; height: 20px; padding: 0 7px; font: 600 11px var(--f-mono); background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto-2); transition: background .18s ease, color .18s ease; }
  .lateral .aba[aria-selected="true"] .cont, .lateral .aba:hover .cont { background: color-mix(in srgb, var(--marca) 18%, transparent); color: var(--marca); }
  .lat-grupo { margin-top: 18px; padding: 0 12px 4px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; color: var(--texto-3); }
  .lateral .ws-eu, .perfil, .tema-lat button { transition: background .18s ease, border-color .18s ease, color .18s ease; }
  .lateral .ws-eu:hover { background: color-mix(in srgb, var(--texto) 4.5%, transparent); }
  .perfil:hover { border-color: var(--linha-forte); }
}
@media (prefers-reduced-motion: reduce) { .lateral .aba svg, .lateral .aba::before { transition: none; } }

/* tela de Posts: editor que se ajusta ao espaço (não espreme os campos) */
@media (min-width: 901px) { .posts { grid-template-columns: 300px minmax(0, 1fr); } }
.editor { container-type: inline-size; container-name: editor; }
.ed-campos { container-type: inline-size; container-name: campos; }
.ed-previa { position: relative; }
@container editor (min-width: 821px) {
  .ed-corpo { grid-template-columns: 340px minmax(0, 1fr); }
  .ed-previa > #previa { position: sticky; top: 20px; }
}
@container editor (max-width: 820px) {
  .ed-corpo { grid-template-columns: 1fr; }
  .ed-previa { border-right: 0; border-bottom: 1px solid var(--linha); }
  .ed-campos { padding: 18px 22px; }
}
@container campos (max-width: 460px) {
  .linha2 { grid-template-columns: 1fr; }
  .seguir-box { grid-template-columns: 34px 1fr auto; padding: 10px 12px; gap: 10px; }
}
.auto.on { border-color: color-mix(in srgb, var(--marca) 38%, var(--linha)); background: color-mix(in srgb, var(--marca) 6%, transparent); }
.auto-viva-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auto-viva-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.seguir-q { min-width: 0; }
@media (max-width: 1280px) and (min-width: 901px) { .posts { grid-template-columns: 260px minmax(0, 1fr); } }

/* "Já publiquei": escolher o post no Instagram */
.dlg-ig { width: min(620px, calc(100vw - 32px)); }
.ig-lista { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; padding: 2px; }
.ig-op { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: 12px; border: 1px solid var(--linha); background: transparent; transition: border-color .15s, background .15s; }
.ig-op:hover:not(:disabled) { border-color: var(--linha-forte); background: color-mix(in srgb, var(--texto) 3%, transparent); }
.ig-op[aria-pressed="true"] { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 9%, transparent); box-shadow: inset 0 0 0 1px var(--marca); }
.ig-op:disabled { opacity: .45; cursor: not-allowed; }
.ig-capa { width: 56px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--superficie-2); display: block; }
.ig-capa img { width: 100%; height: 100%; object-fit: cover; }
.ig-q { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ig-q b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-q span { font-size: 12.5px; color: var(--texto-3); }
.ig-q em { font-style: normal; color: var(--marca); font-weight: 600; }
.ig-vazio { padding: 22px; text-align: center; color: var(--texto-3); border: 1px dashed var(--linha-forte); border-radius: 12px; }

/* Criar com o Claude e Uso */
.criar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.linha3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.criar-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: 14px; }
.criar-st.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.criar-st.ruim { border-color: color-mix(in srgb, var(--erro) 45%, var(--linha)); background: color-mix(in srgb, var(--erro) 8%, transparent); color: var(--texto); }
.criar-st .seg-t { margin-left: auto; font: 500 12px var(--f-mono); color: var(--texto-3); }
.giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--marca) 30%, transparent); border-top-color: var(--marca); animation: giro .8s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
.uso { display: flex; flex-direction: column; gap: 16px; }
.uso-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.uso-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.uso-tab th { text-align: left; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.uso-tab td { padding: 10px; border-bottom: 1px solid var(--linha); }
.uso-tab tr:last-child td { border-bottom: 0; }
.bloco h3 .btn { font-weight: 500; }
@media (max-width: 1100px) { .criar { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .linha3 { grid-template-columns: 1fr 1fr; } .linha3 .campo:last-child { grid-column: 1 / -1; } .uso-tab { font-size: 12.5px; } .uso-tab th:nth-child(6), .uso-tab td:nth-child(6) { display: none; } }

/* celular como app: nada passa da largura da tela, sem zoom sozinho ao tocar nos campos */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { touch-action: manipulation; overscroll-behavior-x: none; }
.toast, .criar-st, .erro, .aviso, .cartao p, .cartao li { overflow-wrap: anywhere; }
.criar > *, .criar-st > *, .posts > *, .direct-grade > *, .res-grade > *, .pauta-grade > * { min-width: 0; }
img, video, svg, canvas { max-width: 100%; }
@media (max-width: 900px) {
  .app, .principal, #tela { max-width: 100vw; overflow-x: clip; }
  .posts { grid-template-columns: minmax(0, 1fr) !important; }
  input, select, textarea, [contenteditable] { font-size: 16px !important; }
  input, select, textarea { max-width: 100%; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .lateral.topo { max-width: 100vw; overflow-x: clip; }
  .lateral .abas:not(.abas-sis) { width: 100vw !important; max-width: 100vw; box-sizing: border-box; }
}

/* ---------- chat da aba Criar ---------- */
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; height: calc(100dvh - 240px); min-height: 480px; }
.ch-lado { display: flex; flex-direction: column; gap: 14px; max-height: 100%; overflow-y: auto; }
.ch-bloco h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.ch-conv { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--texto); cursor: pointer; font: inherit; }
.ch-conv span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-conv small { font-size: 11px; color: var(--texto-3); }
.ch-conv:hover { background: var(--superficie-2); }
.ch-conv[aria-current="true"] { background: var(--marca-suave, var(--superficie-2)); border-color: var(--marca-borda, var(--linha)); }
.ch-regras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-regras li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; padding: 7px 9px; border-radius: 9px; background: var(--superficie-2); }
.ch-regras li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-x { border: 0; background: none; color: var(--texto-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ch-x:hover { color: var(--erro); }
.ch-main { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
.ch-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ch-m { display: flex; }
.ch-m.voce { justify-content: flex-end; }
.ch-bal { max-width: min(680px, 88%); padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.ch-bal p { margin: 0 0 6px; } .ch-bal p:last-child { margin-bottom: 0; }
.ch-bal ul { margin: 4px 0 8px; padding-left: 20px; }
.ch-m.voce .ch-bal { background: var(--marca); color: var(--marca-tinta, #fff); border-bottom-right-radius: 4px; }
.ch-m.claude .ch-bal { background: var(--superficie-2); border: 1px solid var(--linha); border-bottom-left-radius: 4px; }
.ch-m.erro .ch-bal { background: color-mix(in srgb, var(--erro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--erro) 45%, var(--linha)); }
.ch-sobre { display: block; font-size: 12px; opacity: .85; margin-bottom: 4px; }
.ch-custo { display: block; margin-top: 6px; font: 500 11px var(--f-mono); color: var(--texto-3); }
.ch-st { display: flex; align-items: center; gap: 10px; }
.ch-st .seg-t { font: 500 12px var(--f-mono); color: var(--texto-3); }
.ch-post { margin-top: 10px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.ch-post.apagado { padding: 10px 12px; font-size: 13px; color: var(--texto-3); }
.ch-minis { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: thin; }
.ch-mini { flex: 0 0 auto; width: 76px; height: 95px; object-fit: cover; border-radius: 6px; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-3); }
.ch-mini.vid svg { width: 22px; height: 22px; }
.ch-post-pe { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--linha); }
.ch-post-pe b { display: block; font-size: 14px; }
.ch-post-bt { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-vazio { margin: auto; max-width: 560px; text-align: center; padding: 20px 0; }
.ch-vazio h2 { margin: 0 0 8px; }
.ch-vazio p { color: var(--texto-2); }
.ch-sug { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.ch-sug .btn { white-space: normal; text-align: left; height: auto; padding: 8px 12px; }
.ch-comp { border-top: 1px solid var(--linha); padding: 12px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--superficie); }
.ch-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px 4px 10px; margin-bottom: 8px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); max-width: 100%; }
.ch-ctx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ch-ctx > span { white-space: nowrap; flex: 0 0 auto; }
.ch-linha { display: flex; gap: 8px; align-items: flex-end; }
.ch-linha textarea { flex: 1; min-width: 0; resize: none; min-height: 46px; max-height: 220px; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 15px; line-height: 1.4; }
.ch-env { height: 46px; width: 46px; padding: 0; display: grid; place-items: center; border-radius: 14px; flex: 0 0 auto; }
.ch-env svg { width: 20px; height: 20px; }
.ch-comp .ajuda { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 900px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .ch-lado { order: 2; max-height: none; }
  .ch-main { order: 1; height: calc(100dvh - 300px - env(safe-area-inset-bottom)); min-height: 380px; }
  .ch-msgs { padding: 14px; }
  .ch-bal { max-width: 94%; }
  .ch-comp .ajuda { display: none; }
}

/* ---------- Inspiração ---------- */
.insp { display: flex; flex-direction: column; gap: 14px; }
.in-topo { display: flex; flex-direction: column; gap: 12px; }
.in-add { display: flex; gap: 8px; flex-wrap: wrap; }
.in-add input { flex: 1 1 240px; min-width: 0; }
.in-tit { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.in-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.in-perfil, .in-ref { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.in-perfil.sug { border-style: dashed; }
.in-cab { display: flex; gap: 10px; align-items: center; }
.in-cab > div:not(.in-av) { flex: 1; min-width: 0; }
.in-cab .btn { flex: none; }
.in-topo h2 { margin: 0 0 6px; }
.in-topo .desc { margin: 0; }
.in-cab b { display: block; overflow-wrap: anywhere; }
.in-av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--marca); color: var(--marca-tinta, #fff); }
.in-porque, .in-gancho { margin: 0; font-size: 14px; color: var(--texto-2); }
.in-gancho { font-style: italic; color: var(--texto); }
.in-l small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: 4px; }
.in-l p { margin: 0; font-size: 14px; }
.in-l ul { margin: 0; padding-left: 18px; font-size: 14px; }
.in-chip { display: inline-block; font-size: 12px; padding: 3px 9px; margin: 0 4px 4px 0; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); }
.in-bt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

/* ---------- celular: menu lateral (☰) no lugar da barra de baixo ---------- */
.menu-bt, .menu-fundo { display: none; }
@media (max-width: 900px) {
  .menu-bt { display: grid; place-items: center; width: 40px; height: 40px; flex: none; margin-left: -6px; border: 0; border-radius: 10px; background: none; color: var(--texto); cursor: pointer; }
  .menu-bt svg { width: 24px; height: 24px; }
  .menu-bt:active { background: var(--superficie-2); }
  .lateral .abas:not(.abas-sis) {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
    width: min(300px, 84vw) !important; max-width: 84vw !important; z-index: 60;
    flex-direction: column !important; gap: 4px !important; overflow-y: auto !important;
    padding: calc(70px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--lat) !important; border-top: 0 !important; border-right: 1px solid var(--linha);
    box-shadow: 0 0 40px rgba(0,0,0,.35);
    transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); visibility: hidden;
  }
  .lateral .abas:not(.abas-sis)::before { content: "Menu"; position: absolute; top: calc(26px + env(safe-area-inset-top, 0px)); left: 26px; font: 700 13px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
  body.menu-aberto .lateral .abas:not(.abas-sis) { transform: none; visibility: visible; }
  .lateral .abas:not(.abas-sis) .aba { flex: none !important; flex-direction: row !important; justify-content: flex-start; gap: 14px !important; padding: 13px 12px !important; border-radius: 10px; font: 600 15px var(--f-titulo) !important; color: var(--texto-2); }
  .lateral .abas:not(.abas-sis) .aba svg { width: 21px; height: 21px; }
  .lateral .abas:not(.abas-sis) .aba span.t { display: block !important; }
  .lateral .abas:not(.abas-sis) .aba .tc { display: none !important; }
  .lateral .abas:not(.abas-sis) .aba .cont { position: static; margin-left: auto; }
  .lateral .abas:not(.abas-sis) .aba[aria-selected="true"] { background: color-mix(in srgb, var(--marca) 13%, transparent) !important; color: var(--texto); }
  .lateral .abas:not(.abas-sis) .aba[aria-selected="true"] svg { color: var(--marca); }
  .menu-fundo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }
  body.menu-aberto { overflow: hidden; }
  .principal { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .toasts { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  .ch-main { height: calc(100dvh - 235px - env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .lateral .abas:not(.abas-sis) { transition: none; } }
@media (max-width: 900px) { .lateral.topo { z-index: 70; } }

/* chat: anexar print */
.ch-clip { height: 46px; width: 46px; padding: 0; display: grid; place-items: center; border-radius: 14px; flex: 0 0 auto; cursor: pointer; }
.ch-clip svg { width: 20px; height: 20px; }
.ch-clip[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ch-anexos { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ch-anexo { position: relative; }
.ch-anexo img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linha); display: block; }
.ch-anexo .ch-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linha); display: grid; place-items: center; font-size: 15px; }
.cartao h2:has(.btn) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.in-apr h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.in-camp { margin: 10px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: c; }
.in-camp li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--superficie-2); counter-increment: c; }
.in-camp li::before { content: counter(c); font: 700 13px var(--f-mono); color: var(--texto-3); width: 16px; }
.in-camp li > div { flex: 1; min-width: 0; }
.in-camp b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-x { font: 700 14px var(--f-mono); color: var(--marca); }

/* ---------- Identidade visual (editor) ---------- */
.ide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ide-ctl { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ide-bloco { display: flex; flex-direction: column; gap: 12px; }
.ide-bloco h3 { font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ide-cores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ide-cor { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2); cursor: pointer; }
.ide-cor input[type=color] { width: 46px; height: 46px; border: 0; padding: 0; background: none; border-radius: 10px; cursor: pointer; flex: none; }
.ide-cor input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ide-cor input[type=color]::-webkit-color-swatch { border: 1px solid var(--linha-forte); border-radius: 10px; }
.ide-cor > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ide-cor b { font-size: 13px; }
.ide-hex { width: 96px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 7px; padding: 3px 7px; font-size: 13px; }
.ide-paletas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ide-paletas .rotulo { width: 100%; }
.ide-pal { display: inline-flex; align-items: center; gap: 0; padding: 5px 10px 5px 6px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.ide-pal i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--superficie); margin-right: -5px; }
.ide-pal span { margin-left: 10px; }
.ide-pal:hover { border-color: var(--marca-borda); }
.idps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.idp { position: relative; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1.5px solid var(--linha); background: var(--superficie-2); border-radius: 14px; transition: border-color .15s, transform .1s; }
.idp:hover { border-color: var(--marca-borda); }
.idp.on { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.idp-tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marca-clara); background: var(--marca-suave); padding: 2px 8px; border-radius: 999px; }
.idp-tag.n { color: var(--texto-2); background: var(--linha); }
.idp-t { font-size: 25px; line-height: 1.1; color: var(--texto); }
.idp-x { font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }
.idp-n { font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.idp-p { font-size: 12px; color: var(--texto-2); }
.ide-outra summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: 8px; }
.ide-prev { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ide-prev .ajuda { text-align: center; margin: 0; }
.am-img { position: relative; width: 100%; aspect-ratio: 1080 / 1350; border-radius: 14px; overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linha); display: grid; place-items: center; }
.am-img img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.am-img.carregando img { opacity: .55; }
.am-img .giro { position: absolute; }
.am-erro { padding: 14px; font-size: 12.5px; color: var(--erro); text-align: center; }
.idf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.idf-c { position: relative; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1.5px solid var(--linha); background: var(--superficie-2); border-radius: 14px; }
.idf-c:hover { border-color: var(--marca-borda); }
.idf-c.on { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.idf-c b { font-size: 14px; }
.idf-c > span:not(.idf-mov) { font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.idf-mov { position: absolute; top: 18px; left: 18px; font-size: 10.5px; font-weight: 700; background: rgb(0 0 0 / 70%); color: #fff; padding: 3px 8px; border-radius: 999px; }
.idl { display: flex; flex-direction: column; gap: 8px; }
.idl-i { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2); }
.idl-cores { display: flex; flex: none; }
.idl-cores i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--superficie); margin-right: -8px; }
.idl-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 8px; }
.idl-q > span { font-size: 13px; color: var(--texto-2); }
.idl-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.selo-p { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--marca); color: #fff; padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: 2px; }
.ide-acoes { display: flex; gap: 8px; }
.onb-av { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.onb-av > img, .onb-av > span:first-child { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.onb-av > span:first-child { display: grid; place-items: center; background: var(--superficie-2); border: 1px dashed var(--linha-forte); color: var(--texto-3); }
.onb-av > span:first-child svg { width: 18px; }

/* ---------- Onboarding ---------- */
body.onb-aberto { overflow: hidden; }
.onb { position: fixed; inset: 0; z-index: 55; background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 70%), var(--fundo); display: flex; justify-content: center; overflow: hidden; animation: onbEntra .25s ease-out; }
@keyframes onbEntra { from { opacity: 0; } }
.onb-cx { width: 100%; max-width: 1180px; height: 100%; overflow-y: auto; padding: 18px 24px 60px; display: flex; flex-direction: column; gap: 22px; }
.onb-top { display: flex; align-items: center; gap: 18px; position: sticky; top: -18px; padding: 14px 0; background: linear-gradient(var(--fundo) 75%, transparent); z-index: 2; }
.onb-logo { height: 26px; width: auto; flex: none; }
.onb-passos { flex: 1; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.onb-passos li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-3); font-weight: 600; }
.onb-passos li + li::before { content: ""; width: 22px; height: 2px; background: var(--linha-forte); border-radius: 2px; margin-right: 1px; }
.onb-passos li > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--linha-forte); font-size: 12px; }
.onb-passos li > span svg { width: 13px; }
.onb-passos li.feito > span { background: var(--marca); border-color: var(--marca); color: #fff; }
.onb-passos li.agora { color: var(--texto); }
.onb-passos li.agora > span { border-color: var(--marca); color: var(--marca-clara); box-shadow: 0 0 0 4px var(--marca-suave); }
.onb-corpo { display: flex; justify-content: center; }
.onb-pc { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; animation: sobe .25s ease-out; }
.onb-pc.onb-larga { max-width: 1120px; }
.onb-pc h2 { font-size: 30px; }
.onb-pc > p { color: var(--texto-2); font-size: 15.5px; margin: -4px 0 0; }
.onb-ola { max-width: 860px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 6vh; animation: sobe .3s ease-out; }
.onb-ola h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.05; }
.onb-ola > p { color: var(--texto-2); font-size: 17px; max-width: 620px; margin: 0; }
.onb-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; width: 100%; }
.onb-3 > div { text-align: left; padding: 18px; border-radius: 16px; background: var(--vidro); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 6px; }
.onb-3 p { margin: 0; color: var(--texto-2); font-size: 13.5px; }
.onb-n { width: 30px; height: 30px; border-radius: 9px; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 4px; }
.btn.grande { padding: 12px 20px; font-size: 15.5px; border-radius: 12px; }
.btn.grande svg { width: 18px; height: 18px; }
.onb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.onb-nav.centro { justify-content: center; }
.onb-pular { align-self: center; color: var(--texto-3); }
.onb-guia { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--vidro); border: 1px solid var(--linha); }
.onb-ok { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); display: grid; place-items: center; align-self: center; animation: pulo .4s ease-out; }
.onb-ok svg { width: 34px; height: 34px; }
@keyframes pulo { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
.onb-pc:has(.onb-ok) { text-align: center; align-items: center; }
.onb-fim .am-img { max-width: 320px; }
.onb-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--linha-forte); border-radius: 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.onb-drop:hover, .onb-drop.sobre { border-color: var(--marca); background: var(--marca-suave); }
.onb-drop svg { width: 26px; color: var(--marca-clara); }
.onb-drop span { font-size: 13px; color: var(--texto-3); }
.onb-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.onb-mini > div { position: relative; }
.onb-mini img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--linha); }
.onb-mini .ch-x { position: absolute; top: -7px; right: -7px; }
.onb-analise { align-items: center; text-align: center; padding-top: 8vh; }
.onb-etapa { font-weight: 700; color: var(--texto) !important; font-size: 17px !important; }
.onb-radar { position: relative; width: 120px; height: 120px; }
.onb-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--marca); opacity: 0; animation: radar 2.4s ease-out infinite; }
.onb-radar span:nth-child(2) { animation-delay: .8s; } .onb-radar span:nth-child(3) { animation-delay: 1.6s; }
.onb-radar::after { content: ""; position: absolute; inset: 44px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 30px var(--marca); }
@keyframes radar { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.onb-resumo { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--marca-suave); border: 1px solid var(--marca-borda); }
.onb-resumo svg { width: 20px; flex: none; color: var(--marca-clara); margin-top: 2px; }
.onb-resumo p { margin: 0; }
.onb-faltou { padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent); background: color-mix(in srgb, var(--aviso) 10%, transparent); font-size: 14px; }
.onb-faltou ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 980px) {
  .ide { grid-template-columns: 1fr; }
  .ide-prev { position: static; max-width: 360px; margin: 0 auto; width: 100%; }
  .idf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onb-passos em { display: none; }
}
@media (max-width: 640px) {
  .onb-cx { padding: 10px 14px 40px; }
  .onb-top { gap: 10px; }
  .onb-logo { display: none; }
  .onb-passos li + li::before { width: 8px; }
  .onb-3 { grid-template-columns: 1fr; }
  .onb-pc h2 { font-size: 24px; }
  .ide-cores { grid-template-columns: 1fr; }
  .idl-i { flex-wrap: wrap; }
  .idl-b { width: 100%; justify-content: flex-start; }
  .onb-nav .btn.grande { flex: 1; }
}
.ajustes > #secIdt { grid-column: 1 / -1; }
.idl-q b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.idf-mov { position: static !important; align-self: flex-start; background: var(--marca-suave) !important; color: var(--marca-clara) !important; }
.onb-passos li { white-space: nowrap; }
.onb-pc.onb-media { max-width: 780px; }
@media (max-width: 1180px) { .onb-passos em { display: none; } .onb-passos li.agora em { display: inline; } }
@media (max-width: 640px) { .onb-passos li.agora em { display: none; } }
#secIdt, .onb-pc.onb-larga { container-type: inline-size; }
.ide-cores { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@container (max-width: 820px) {
  .ide { grid-template-columns: 1fr; }
  .ide-prev { position: static; max-width: 340px; margin: 0 auto; width: 100%; }
  .idf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .onb-passos { gap: 3px; justify-content: flex-start; min-width: 0; }
  .onb-passos li { gap: 3px; }
  .onb-passos li > span { width: 22px; height: 22px; font-size: 11px; }
  .onb-passos li + li::before { width: 6px; }
  .onb-top .btn { flex: none; padding: 4px 6px; }
}
.ide-cores { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ide-cor input[type=color] { width: 40px; height: 40px; }
.ide-hex { width: 86px; }
@container (max-width: 820px) { .ide-prev { order: -1; max-width: 280px; } }
/* foto da marca: sempre recortada em círculo, sem fundo nem borda em volta */
.marca-logo:has(img), .onb-av:has(> img) > img { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.marca-logo:has(img) { border-radius: 50%; }
/* ditado por voz */
.com-mic { position: relative; }
.com-mic textarea { width: 100%; padding-right: 54px; }
.mic.dentro { position: absolute; right: 8px; bottom: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.mic svg { width: 18px; height: 18px; }
.mic.on { background: var(--erro); border-color: var(--erro); color: #fff; animation: micPulso 1.2s ease-in-out infinite; }
@keyframes micPulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--erro) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
/* ---------- andamento da criação ---------- */
.prog { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; margin-top: 8px; }
.prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--marca), var(--marca-clara)); transition: width .6s ease; position: relative; }
.prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 35%), transparent); animation: brilhoProg 1.4s linear infinite; }
@keyframes brilhoProg { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ch-st { min-width: min(420px, 100%); }
.ch-st-l { display: flex; align-items: center; gap: 8px; }
.ch-livre { display: flex; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--texto-2); }
.ch-livre svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 2px; }
.ch-criando { display: inline-flex; align-items: center; gap: 5px; color: var(--marca-clara); font-weight: 700; }
.ch-criando .giro { width: 10px; height: 10px; border-width: 2px; }
.dock { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 58; width: min(340px, calc(100vw - 32px)); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; animation: sobe .2s ease-out; }
.dock-cab { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 0; background: transparent; font-size: 14px; text-align: left; }
.dock-cab svg { width: 16px; height: 16px; color: var(--ok); }
.dock-cab b { flex: 1; }
.dock-seta { color: var(--texto-3); }
.dock-l { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; max-height: 50vh; overflow-y: auto; }
.dock-i { padding: 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; }
.dock-t { display: flex; gap: 8px; align-items: baseline; }
.dock-t b { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-e { font-size: 12.5px; color: var(--texto-2); }
.dock-e.ruim { color: var(--erro); }
.dock-b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dock-n { margin: 0; font-size: 12px; color: var(--texto-3); }
@media (max-width: 640px) { .dock { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
.ch-bal.ch-st { display: block; }
.dock { left: auto; right: 16px; }
body:has(#dockCriando) .toasts { right: 372px; }
@media (max-width: 640px) { body:has(#dockCriando) .toasts { right: 16px; bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); } }

/* seletor de workspace no menu: só o nome do workspace; com mais de um, abre uma lista */
.wsd { position: relative; }
.wsd-b, .wsd.so { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); text-align: left; color: var(--texto); }
.wsd-b { cursor: pointer; transition: border-color .15s, background .15s; }
.wsd-b:hover, .wsd-b[aria-expanded="true"] { border-color: var(--linha-forte); background: var(--superficie-2); }
.wsd .ws-av { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.wsd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.wsd-n { font: 700 14px var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsd-p { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.wsd-s { width: 18px; height: 18px; color: var(--texto-3); flex: none; transition: transform .15s; }
.wsd-b[aria-expanded="true"] .wsd-s { transform: rotate(180deg); }
.wsd-l { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; padding: 6px; border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.wsd-l[hidden] { display: none; }
.wsd-h { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 6px 8px 4px; }
.wsd-o { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; cursor: pointer; }
.wsd-o:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.wsd-o.on { background: var(--marca-suave); }
.wsd-c { width: 18px; height: 18px; color: var(--marca-clara); flex: none; }

/* faixa "Termine de configurar" pra quem pulou o passo a passo */
.faixa-onb { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin: 0 0 18px; border: 1px solid color-mix(in srgb, var(--marca) 45%, var(--linha)); border-radius: 16px; background: color-mix(in srgb, var(--marca) 9%, var(--superficie)); }
.fo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fo-t b { font: 700 15px var(--f-titulo); }
.fo-t span { font-size: 13px; color: var(--texto-2); }
.fo-p { display: flex; gap: 5px; flex: none; }
.fo-p i { width: 22px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--texto) 15%, transparent); }
.fo-p i.on { background: var(--marca); }
@media (max-width: 640px) { .faixa-onb { flex-wrap: wrap; } .fo-p { order: 3; } }

/* barra de passos do onboarding: cartão de vidro, passo atual em destaque e progresso embaixo */
.onb-top { top: 10px; margin: 6px 0 10px; padding: 10px 12px 10px 18px; border: 1px solid var(--linha); border-radius: 20px; background: color-mix(in srgb, var(--superficie) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .55); overflow: hidden; }
.onb-top::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--prog, 0%); background: linear-gradient(90deg, var(--marca), var(--marca-clara)); border-radius: 0 3px 3px 0; transition: width .4s ease; }
.onb-top .onb-logo { height: 26px; width: auto; flex: none; }
.onb-passos { gap: 4px; }
.onb-passos em { font-style: normal; letter-spacing: .01em; }
.onb-passos li { padding: 5px 10px 5px 5px; border-radius: 999px; transition: background .2s; }
.onb-passos li + li::before { width: 18px; height: 2px; margin: 0 4px 0 -6px; background: var(--linha); }
.onb-passos li.feito + li::before { background: color-mix(in srgb, var(--marca) 70%, transparent); }
.onb-passos li.feito { color: var(--texto-2); }
.onb-passos li.feito > span { box-shadow: none; }
.onb-passos li.agora { background: var(--marca-suave); color: var(--texto); }
.onb-passos li.agora > span { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }
.onb-passos li > span { width: 26px; height: 26px; font-weight: 700; }
.onb-top .btn.fant { border-radius: 999px; padding: 7px 14px; color: var(--texto-2); }
.onb-top .btn.fant:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 6%, transparent); }
@media (max-width: 640px) { .onb-top { padding: 8px 8px 8px 12px; border-radius: 16px; } .onb-passos li { padding: 3px; } .onb-passos li.agora { padding: 3px 3px; } .onb-passos li + li::before { margin: 0 2px; } }
.wsd .ws-av { position: relative; overflow: hidden; }
.wsd .ws-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.onb-passos { min-width: 0; overflow: hidden; }
.onb-top .btn.fant { flex: none; }
@media (max-width: 1520px) { .onb-passos em { display: none; } .onb-passos li.agora em { display: inline; } .onb-passos li { padding: 4px; } .onb-passos li.agora { padding: 4px 12px 4px 4px; } }

/* perguntas do "O Claude não achou": cada uma com campo e microfone */
.onb-pergs { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.onb-perg label { display: block; font-size: 14px; font-weight: 600; color: var(--texto); margin-bottom: 6px; line-height: 1.35; }
.onb-perg textarea { width: 100%; min-height: 54px; resize: vertical; }
.onb-org { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.onb-org .ajuda { margin: 0; flex: 1; min-width: 220px; }

/* troca da conta do Instagram/TikTok que o workspace usa */
.conta-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.conta-lista { margin: -4px 0 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 8px; }
.cl-h { font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.cl-h b { color: var(--texto); }
.cl-i { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); }
.cl-i.on { border-color: color-mix(in srgb, var(--marca) 50%, var(--linha)); }
.cl-i .q { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-i .q span { font-size: 12px; color: var(--texto-3); }
.cl-pe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cl-pe .ajuda { margin: 0; }

/* tela "Termine a configuração" (as telas de conteúdo abrem quando a configuração inicial termina) */
.trava { max-width: 620px; margin: 40px auto; padding: 34px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.trava-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-clara); }
.trava-ic svg { width: 28px; height: 28px; }
.trava h2 { margin: 4px 0 0; }
.trava .desc { margin: 0; max-width: 480px; }
.trava-l { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.trava-l li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie-2); }
.trava-l li > span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; flex: none; }
.trava-l li.ok > span { background: var(--ok, #22A55B); border-color: var(--ok, #22A55B); color: #fff; }
.trava-l li > span svg { width: 15px; height: 15px; }
.trava-l b { display: block; font-size: 15px; }
.trava-l small { color: var(--texto-3); font-size: 12.5px; }
.trava-l li.ok b { color: var(--texto-2); }
.trava-b { margin-top: 10px; }
/* a barra de passos nunca encolhe na altura (a tela do passo pode ser comprida) */
.onb-top { flex: none; min-height: 52px; }
@media (max-width: 640px) { .onb-top { min-height: 46px; gap: 8px; } .onb-top .btn.fant { padding: 6px 10px; font-size: 13px; } .onb-passos { justify-content: center; } }
/* o passo a passo fica acima do cabeçalho do celular (z 70); os avisos continuam por cima de tudo */
.onb { z-index: 80; }
.toasts { z-index: 95; }
/* celular: a barra mostra só o passo atual ("Sua marca · 4 de 7"), com a linha de progresso embaixo */
.onb-de { display: none; font-weight: 500; color: var(--texto-3); }
@media (max-width: 640px) {
  .onb-passos { justify-content: flex-start; overflow: visible; }
  .onb-passos li { display: none; }
  .onb-passos li.agora { display: flex; padding: 4px 12px 4px 4px; }
  .onb-passos li.agora em { display: inline !important; }
  .onb-passos li.agora::before { display: none; }
  .onb-de { display: inline; }
}
@media (max-width: 820px) {
  .onb-passos { justify-content: flex-start; overflow: visible; }
  .onb-passos li { display: none; }
  .onb-passos li.agora { display: flex; padding: 4px 12px 4px 4px; }
  .onb-passos li.agora em { display: inline !important; }
  .onb-passos li.agora::before { display: none; }
  .onb-de { display: inline; }
}

/* ---------- Ajustes: sua voz nos Reels (ElevenLabs) ---------- */
#secEleven .conta-lista { display: grid; gap: 8px; }
.el-aviso { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--marca-suave); color: var(--texto-2); }
.el-uso { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--marca-suave); border: 1px solid var(--marca-borda); }
.el-uso .q { display: flex; flex-direction: column; min-width: 0; }
.el-uso .q span { font-size: 12.5px; color: var(--texto-3); }
.el-uso .q b { font-size: 17px; overflow-wrap: anywhere; }
.el-onda { display: inline-flex; align-items: center; gap: 3px; height: 26px; flex: none; }
.el-onda i { width: 4px; border-radius: 4px; background: var(--marca); animation: el-onda 1.1s ease-in-out infinite; }
.el-onda i:nth-child(1) { height: 40%; animation-delay: -.2s; } .el-onda i:nth-child(2) { height: 85%; animation-delay: -.5s; } .el-onda i:nth-child(3) { height: 60%; animation-delay: -.1s; } .el-onda i:nth-child(4) { height: 100%; animation-delay: -.7s; } .el-onda i:nth-child(5) { height: 45%; animation-delay: -.35s; }
.el-onda.pq { height: 18px; } .el-onda.pq i { width: 3px; animation: none; opacity: .75; }
@keyframes el-onda { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .el-onda i { animation: none; } }
.el-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.el-clonar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.el-clonar h3 { margin: 0 0 4px; font-size: 16px; }
.el-texto { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); max-height: 230px; overflow: auto; }
.el-texto p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--texto); }
.el-texto p:last-child { margin: 0; }
.el-grava { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.el-grava label.btn { cursor: pointer; }
.el-grava label.btn.desab { opacity: .5; pointer-events: none; }
.el-rec { display: inline-flex; align-items: center; gap: 8px; min-width: 112px; justify-content: center; }
.el-rec .pt { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.el-rec.on { background: var(--erro); border-color: var(--erro); color: #fff; }
.el-rec.on .pt { animation: el-pisca 1s steps(2, start) infinite; }
.el-rec.on #elTempo { font-variant-numeric: tabular-nums; }
@keyframes el-pisca { to { visibility: hidden; } }
.el-amostras { display: grid; gap: 8px; margin-top: 12px; }
.el-am { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid var(--linha); border-radius: 11px; }
.el-am > b { width: 20px; flex: none; color: var(--texto-3); }
#secEleven { min-width: 0; }
.el-amostras { min-width: 0; }
.el-am { min-width: 0; }
.el-am audio { flex: 1 1 0; width: 0; min-width: 0; height: 36px; }
.el-am .num { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.el-am .btn.ic { padding: 6px; display: inline-grid; place-items: center; }
.el-am .btn.ic svg { width: 16px; height: 16px; }
.el-barra { height: 8px; margin-top: 14px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.el-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); transition: width .3s; }
.el-ok { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--texto-2); cursor: pointer; }
.el-ok input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--marca); }
@media (max-width: 560px) {
  .el-am { gap: 6px; padding-left: 10px; }
  .el-am .num { display: none; }
  .el-am > b { width: 14px; }
  .el-acoes .btn, .el-grava .btn { flex: 1 1 auto; }
}

/* celular: Uso, Ajustes e Equipe dentro do menu ☰ (no computador ficam no grupo Sistema da lateral) */
.abas .so-movel, .menu-sis { display: none !important; }
@media (max-width: 900px) {
  .lateral .abas-sis { display: none !important; }
  .lateral .abas:not(.abas-sis) .aba.so-movel { display: flex !important; }
  .lateral .abas:not(.abas-sis) .menu-sis { display: block !important; margin: 14px 12px 4px; padding-top: 14px; border-top: 1px solid var(--linha); font: 700 12px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
}
.el-dica { margin: 0 0 4px; padding: 9px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); }

/* celular: Ajustes nunca passa da largura da tela; botões das contas descem pra baixo do nome quando não cabem */
@media (max-width: 900px) {
  .ajustes { grid-template-columns: minmax(0, 1fr) !important; }
  .ajustes > * { min-width: 0; }
}
@media (max-width: 560px) {
  .conta-l { flex-wrap: wrap; }
  .conta-l .q { flex: 1 1 150px; }
  .conta-l > .btn { flex: 1 1 auto; }
}

/* ---------- Criar: no celular, tela cheia no estilo do app do Claude ---------- */
.ch-topo, .ch-lado-topo, .ch-fundo, .ch-ola { display: none; }
.ch-sug .btn { display: inline-flex; align-items: center; gap: 7px; }
.ch-sug-ic { display: inline-grid; place-items: center; flex: none; }
.ch-sug-ic svg { width: 15px; height: 15px; color: var(--marca); }
@media (max-width: 760px) {
  body.aba-criar .cab, body.aba-criar .titulo-pag, body.aba-criar .faixa-onb { display: none !important; }
  body.aba-criar .principal { padding: 0 !important; }
  body.aba-criar { overflow: hidden; }
  .chat { display: block !important; position: relative; height: calc(100dvh - var(--topo-h, 64px)) !important; min-height: 0 !important; }
  .ch-main { height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .ch-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; flex: none; }
  .ch-topo b { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ch-topo-bt { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie-2); color: var(--texto); display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
  .ch-topo-bt svg { width: 19px; height: 19px; }
  /* conversas: menu que desliza da esquerda */
  .ch-lado { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); max-height: none !important; z-index: 90; background: var(--lat, var(--superficie)); border-right: 1px solid var(--linha); padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility .26s; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .chat.lado-aberto .ch-lado { transform: none; visibility: visible; }
  .ch-fundo { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .chat.lado-aberto .ch-fundo { opacity: 1; pointer-events: auto; }
  .ch-lado-topo { display: flex; align-items: center; justify-content: space-between; }
  .ch-lado-topo b { font: 700 18px var(--f-titulo); }
  /* mensagens com mais espaço */
  .ch-msgs { padding: 8px 14px 12px; gap: 12px; }
  .ch-bal { max-width: 92%; font-size: 15.5px; }
  .ch-m.claude .ch-bal { background: none; border: 0; padding: 4px 2px; max-width: 100%; }
  /* começo: só a saudação, sem texto comprido */
  .ch-vazio { margin: 0; flex: 1; display: flex; flex-direction: column; text-align: left; max-width: none; padding: 0; }
  .ch-vazio > h2, .ch-vazio > p { display: none; }
  .ch-ola { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto 0; padding: 20px 0; text-align: center; }
  .ch-ola-ic svg { width: 34px; height: 34px; color: var(--marca); }
  .ch-ola b { font: 400 34px/1.1 var(--f-serif, "Instrument Serif", Georgia, serif); letter-spacing: -0.01em; }
  .ch-ola span:last-child { color: var(--texto-3); font-size: 15px; }
  /* sugestões: cartões que deslizam pro lado, logo acima do campo */
  .ch-sug { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 10px; margin: 0 -14px; padding: 0 14px 4px; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; }
  .ch-sug::-webkit-scrollbar { display: none; }
  .ch-sug .btn { flex: 0 0 68%; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 16px; min-height: 96px; font-size: 14px; font-weight: 500; line-height: 1.35; background: var(--superficie-2); }
  .ch-sug .btn > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ch-sug-ic svg { width: 18px; height: 18px; }
  /* campo de digitar: pílula, cresce com o texto */
  .ch-comp { border-top: 0 !important; padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important; flex: none; }
  .ch-linha { gap: 2px; padding: 5px; border: 1px solid var(--linha-forte, var(--linha)); border-radius: 26px; background: var(--superficie-2); }
  .ch-linha textarea { order: 2; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 10px 6px !important; min-height: 42px !important; max-height: 38dvh !important; font-size: 16px !important; border-radius: 0 !important; }
  .ch-linha .ch-clip { order: 1; width: 42px !important; height: 42px !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; }
  .ch-linha .mic { order: 3; }
  .ch-env { order: 4; width: 42px !important; height: 42px !important; border-radius: 50% !important; }
  .ch-ctx { max-width: 100%; }
}

/* celular: o quadro "Criando agora" ocupa a largura da tela (nunca passa da borda) e, no Criar, fica acima do campo de digitar */
.dock-i, .dock-t { min-width: 0; }
@media (max-width: 640px) {
  .dock { left: 10px !important; right: 10px !important; width: auto !important; }
  body.aba-criar .dock { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ajustes: avatar do HeyGen ---------- */
#secAvatar { min-width: 0; }
.av-uso { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--marca-suave); border: 1px solid var(--marca-borda); }
.av-uso img, .av-uso .av-sem { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--superficie-2); }
.av-uso .q { display: flex; flex-direction: column; min-width: 0; }
.av-uso .q span { font-size: 12.5px; color: var(--texto-3); }
.av-uso .q b { font-size: 17px; overflow-wrap: anywhere; }
.av-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.av-op { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie-2); color: var(--texto); text-align: left; cursor: pointer; min-width: 0; }
.av-op img, .av-op .av-sem { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--superficie); display: block; }
.av-op b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-op span { font-size: 11.5px; color: var(--texto-3); }
.av-op.on { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 35%, transparent); }

/* celular: a lista de workspaces flutua por cima da página, logo abaixo da barra de cima (a barra corta o que passa dela) */
@media (max-width: 900px) {
  .wsd-l { position: fixed !important; top: calc(var(--topo-h, 64px) + 6px) !important; left: auto !important; right: 10px !important; width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - var(--topo-h, 64px) - 24px); overflow-y: auto; z-index: 96 !important; }
}
/* celular: o texto do "Termine de configurar" ocupa a linha inteira; botão e progresso vão embaixo */
@media (max-width: 640px) { .faixa-onb .fo-t { flex: 1 1 100%; } .faixa-onb { row-gap: 12px; } }

/* Higgsfield: chave em duas partes (ID + segredo) */
#secHiggsfield { min-width: 0; }
.hf-l { flex-wrap: wrap; }
.hf-l input { flex: 1 1 160px; min-width: 0; }
@media (max-width: 560px) { .hf-l .btn { flex: 1 1 100%; } }

/* Uso: tabela por conteúdo rola no celular */
.uso-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.uso-rolar .uso-tab { min-width: 560px; }
.uso-tab td a { color: inherit; text-decoration: underline; text-decoration-color: var(--linha); }

/* ---------- biblioteca de formatos (galeria) e troca de visual no post ---------- */
.gal-fundo { position: fixed; inset: 0; z-index: 120; background: rgb(10 12 16 / 45%); backdrop-filter: blur(2px); }
.gal { position: fixed; z-index: 121; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra-alta); overflow: hidden; }
.gal-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--linha); }
.gal-topo h2 { margin: 0 0 4px; font-size: 20px; }
.gal-topo .desc { margin: 0; }
.gal-topo .ch-topo-bt { display: inline-flex; margin-left: auto; flex: none; }
.gal-corpo { overflow: auto; padding: 14px 20px 20px; }
.gal-corpo h3 { margin: 14px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.gal-corpo h3:first-child { margin-top: 0; }
.fmt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fmt-card { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; background: var(--superficie-2); min-width: 0; }
.fmt-card.off { opacity: .72; }
.fmt-im { position: relative; aspect-ratio: 4 / 5; background: var(--linha); display: grid; place-items: center; overflow: hidden; }
.fmt-im.reels { aspect-ratio: 900 / 533; }
.fmt-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmt-im.carregando img { display: none; }
.fmt-tx { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fmt-tx b { font-size: 15px; }
.fmt-tx p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.fmt-q { color: var(--texto-3) !important; font-size: 12.5px !important; }
.fmt-falta { color: var(--perigo, #b42318) !important; font-size: 12.5px !important; }
.fmt-bt { padding: 10px 14px 14px; margin-top: auto; }
.fmt-bt .btn { width: 100%; justify-content: center; }
.ch-sug-fmt { border-style: dashed; }
.vis-l { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.vis-l label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-3); flex: 1 1 160px; min-width: 0; }
.vis-l select { width: 100%; }
.vis-l .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .gal { left: 0; top: auto; bottom: 0; transform: none; width: 100vw; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .fmt-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fmt-tx { padding: 10px 10px 2px; }
  .fmt-tx b { font-size: 14px; }
  .fmt-tx p { font-size: 12.5px; }
  .vis-l .btn { flex: 1 1 100%; justify-content: center; }
}
body.com-galeria { overflow: hidden; }
.vis-l + .ajuda { margin-top: 10px; }
.gal-corpo { min-height: 0; -webkit-overflow-scrolling: touch; }

/* ---------- banco de ganchos (Inspiração) ---------- */
.gan-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.gan { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie-2); min-width: 0; }
.gan b { font-size: 15px; line-height: 1.3; }
.gan p { margin: 0; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.gan .gan-rod { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.gan .gan-rod .ajuda { margin-right: auto; }
.gan-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gan-add input { flex: 1 1 220px; min-width: 0; }
.gan-min { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--marca-suave); border: 1px solid var(--marca-borda); }
.gan-min .q { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.gan { position: relative; }
.gan > .gan-rod .ch-x { position: absolute; top: 8px; right: 8px; }
.gan b { padding-right: 24px; }
.in-fs .gan b .rotulo { margin-left: 6px; vertical-align: middle; }