/* HWStudio — composição no padrão de estúdio (imagem: grade + barra de prompt; vídeo: painel + histórico)
   com a identidade H&W: preto profundo, serifada itálica + pincel laranja. */

:root {
  --laranja: #ff4700;
  --laranja-2: #ff6a2b;
  --laranja-texto: #ff7a40;
  --laranja-suave: rgba(255, 71, 0, .12);
  --laranja-borda: rgba(255, 71, 0, .5);

  --fundo: #f3f2ef;
  --painel: #ffffff;
  --painel-2: #f7f6f3;
  --chip: #eeede9;
  --chip-hover: #e5e3de;
  --elevada: #ffffff;
  --borda: rgba(20, 18, 15, .08);
  --borda-forte: rgba(20, 18, 15, .16);
  --texto: #15130f;
  --texto-2: #5a564f;
  --texto-3: #8d887f;
  --sombra: 0 1px 2px rgba(20, 18, 15, .05), 0 8px 24px rgba(20, 18, 15, .06);
  --sombra-forte: 0 24px 70px rgba(20, 18, 15, .22);
  --palco: #e9e7e2;
  --ok: #16a34a;
  --erro: #dc2626;
  --marca-hw: #15130f;

  --raio: 14px;
  --raio-p: 10px;
  --raio-g: 20px;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --pincel: "Permanent Marker", "Marker Felt", cursive;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0a0a0b; --painel: #141416; --painel-2: #19191c; --chip: #222226; --chip-hover: #2b2b30;
    --elevada: #1d1d21; --borda: rgba(255, 255, 255, .06); --borda-forte: rgba(255, 255, 255, .12);
    --texto: #f4f2ee; --texto-2: #a6a29b; --texto-3: #6c6964;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-forte: 0 30px 90px rgba(0, 0, 0, .7);
    --palco: #0f0f11; --marca-hw: #f4f2ee; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0a0a0b; --painel: #141416; --painel-2: #19191c; --chip: #222226; --chip-hover: #2b2b30;
  --elevada: #1d1d21; --borda: rgba(255, 255, 255, .06); --borda-forte: rgba(255, 255, 255, .12);
  --texto: #f4f2ee; --texto-2: #a6a29b; --texto-3: #6c6964;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-forte: 0 30px 90px rgba(0, 0, 0, .7);
  --palco: #0f0f11; --marca-hw: #f4f2ee; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
a { color: var(--laranja-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--laranja); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ───────── topo ───────── */
.app { display: grid; grid-template-rows: 52px 1fr; height: 100vh; }
.topo { display: flex; align-items: center; gap: 22px; padding: 0 16px; position: relative; z-index: 20; }
.marca { display: flex; align-items: baseline; gap: 5px; text-decoration: none !important; user-select: none; flex: none; }
.marca .hw { font-family: var(--serif); font-style: italic; font-size: 25px; line-height: 1; color: var(--marca-hw); letter-spacing: -.4px; }
.marca .studio { font-family: var(--pincel); font-size: 19px; line-height: 1; color: var(--laranja); transform: rotate(-4deg) translateY(1px); }
.nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--texto-3); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color .15s; }
.nav a:hover { color: var(--texto); }
.nav a.ativo { color: var(--laranja-texto); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pilula { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--chip); border: 0; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.pilula .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pilula.off .ponto { background: var(--erro); }
.pilula b { color: var(--texto); font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--laranja), #a32a00); color: #fff; font-weight: 600; font-size: 12.5px; display: grid; place-items: center; }

.vista { min-height: 0; overflow: hidden; position: relative; }

/* ───────── chips e popovers ───────── */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 11px;
  border: 0; background: var(--chip); color: var(--texto); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s;
}
.chip:hover { background: var(--chip-hover); }
.chip svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }
.chip .seta svg { width: 13px; height: 13px; }
.chip.ligado { color: var(--laranja-texto); }
.chip.ligado svg { color: var(--laranja-texto); }
.chip.dupla { padding: 0; gap: 0; }
.chip.dupla button { height: 36px; min-width: 38px; border: 0; background: none; display: grid; place-items: center; color: var(--texto-2); }
.chip.dupla button:hover { color: var(--texto); }
.chip.dupla button:disabled { opacity: .3; cursor: default; }
.chip.dupla .sep { width: 1px; height: 16px; background: var(--borda-forte); }
.chip.dupla button.on { color: var(--laranja-texto); }
.passo { display: inline-flex; align-items: center; height: 36px; border-radius: 11px; background: var(--chip); padding: 0 4px; gap: 2px; font-size: 13.5px; font-weight: 500; }
.passo button { width: 28px; height: 28px; border: 0; background: none; color: var(--texto-2); border-radius: 8px; display: grid; place-items: center; }
.passo button:hover:not(:disabled) { background: var(--chip-hover); color: var(--texto); }
.passo button:disabled { opacity: .3; cursor: default; }
.passo button svg { width: 14px; height: 14px; }
.passo span { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.passo span small { color: var(--texto-3); font-size: 13.5px; }

.popover {
  position: fixed; z-index: 70; min-width: 200px; max-width: min(560px, calc(100vw - 16px)); max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--elevada); border: 1px solid var(--borda-forte); border-radius: 16px; box-shadow: var(--sombra-forte);
  animation: pop .16s ease both;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.985); } }
.pop-rolagem { overflow-y: auto; padding: 6px; }
.pop-titulo { font-size: 12.5px; color: var(--texto-3); padding: 8px 10px 6px; }
.pop-item {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--texto);
}
.pop-item:hover, .pop-item.foco { background: var(--chip); }
.pop-item.ativo { background: var(--chip); }
.pop-item .ico { width: 22px; display: grid; place-items: center; color: var(--texto-2); flex: none; }
.pop-item .ico svg { width: 16px; height: 16px; }
.pop-item .check { margin-left: auto; color: var(--laranja-texto); display: grid; }
.pop-item .check svg { width: 16px; height: 16px; }
.pop-item .forma { border: 1.6px solid currentColor; border-radius: 3px; }
.pop-busca { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.pop-busca svg { width: 18px; height: 18px; color: var(--texto-3); }
.pop-busca input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; }
.pop-grupo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); padding: 12px 12px 6px; }
.pop-grupo svg { width: 14px; height: 14px; }
.modelo-item { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; text-align: left; padding: 10px; border-radius: 12px; }
.modelo-item:hover, .modelo-item.foco { background: var(--chip); }
.modelo-item.ativo { background: var(--chip); }
.modelo-item .tile { width: 44px; height: 44px; border-radius: 11px; background: var(--chip-hover); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--texto-2); letter-spacing: .02em; }
.modelo-item.ativo .tile { color: var(--laranja-texto); }
.modelo-item .n { font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modelo-item .d { font-size: 12.5px; color: var(--texto-3); margin-top: 1px; }
.modelo-item .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; border-radius: 6px; background: var(--chip-hover); color: var(--texto-2); font-size: 11.5px; font-weight: 500; }
.tag svg { width: 11px; height: 11px; }
.selo { display: inline-flex; height: 19px; padding: 0 7px; align-items: center; border-radius: 6px; font-size: 10.5px; font-weight: 800; font-style: italic; letter-spacing: .03em; background: var(--laranja); color: #fff; text-transform: uppercase; }
.modelo-item .check { margin-left: auto; color: var(--laranja-texto); }
.modelo-item .check svg { width: 18px; height: 18px; }
.pop-form { padding: 14px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; width: 360px; max-width: 100%; }

/* ───────── campos de formulário (avançado, modais) ───────── */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.campo label, .campo .titulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.campo .obrig { color: var(--laranja); margin-left: 3px; }
.campo .valor { font-family: var(--mono); font-size: 12px; }
.ajuda { font-size: 12px; color: var(--texto-3); line-height: 1.45; }
input.texto, select.texto, textarea.texto {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--painel-2); outline: 0; transition: border-color .2s, box-shadow .2s;
}
textarea.texto { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
input.texto:focus, select.texto:focus, textarea.texto:focus { border-color: var(--laranja-borda); box-shadow: 0 0 0 4px var(--laranja-suave); }
select.texto { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d887f' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.segmento { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--chip); border-radius: 12px; }
.segmento button { flex: 1 0 auto; min-width: 44px; border: 0; background: none; padding: 7px 10px; border-radius: 9px; color: var(--texto-2); font-size: 13px; font-weight: 500; }
.segmento button:hover { color: var(--texto); }
.segmento button.ativo { background: var(--elevada); color: var(--texto); box-shadow: var(--sombra); }
.deslizante { display: flex; align-items: center; gap: 12px; }
input[type=range] { flex: 1; appearance: none; height: 4px; border-radius: 4px; background: var(--borda-forte); outline: 0; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.deslizante input[type=number] { width: 76px; text-align: center; font-family: var(--mono); font-size: 12.5px; height: 34px; padding: 0 6px; }
.chave-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chave-linha .t { font-size: 13.5px; font-weight: 500; }
.chave-linha .s { font-size: 12px; color: var(--texto-3); }
.interruptor { position: relative; width: 40px; height: 24px; flex: none; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--borda-forte); transition: background .2s; }
.interruptor span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.interruptor input:checked + span { background: var(--laranja); }
.interruptor input:checked + span::after { transform: translateX(16px); }

/* mídia (caixas de envio) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--chip); display: grid; place-items: center; color: var(--texto-3); }
.slot.vazio { border: 1.5px dashed var(--borda-forte); background: none; cursor: pointer; }
.slot.vazio:hover, .arrastando { border-color: var(--laranja) !important; color: var(--laranja-texto); background: var(--laranja-suave) !important; }
.slot img, .slot video { width: 100%; height: 100%; object-fit: cover; }
.slot .dica { font-size: 11px; text-align: center; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slot .dica svg { width: 18px; height: 18px; }
.remover { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.remover svg { width: 12px; height: 12px; }
.slot:hover .remover, .caixa-midia:hover .remover, .ref:hover .remover { opacity: 1; }
.carregando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.giro { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--laranja); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.audio-ico { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--texto-2); padding: 6px; word-break: break-all; text-align: center; }
.audio-ico svg { width: 20px; height: 20px; color: var(--laranja-texto); }
.link-url { font-size: 12px; color: var(--texto-3) !important; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.link-url:hover { color: var(--texto) !important; }

/* ───────── página IMAGEM ───────── */
.pg-imagem { height: 100%; display: flex; flex-direction: column; }
.barra-res { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; }
.barra-res .filtros { display: flex; gap: 6px; }
.barra-res .dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tamanho { display: flex; align-items: center; gap: 8px; width: 150px; color: var(--texto-3); }
.tamanho svg { width: 14px; height: 14px; flex: none; }
.filtro { height: 32px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--texto-3); font-size: 13px; font-weight: 500; }
.filtro:hover { color: var(--texto); }
.filtro.ativo { background: var(--chip); color: var(--texto); }
.res-rolagem { flex: 1; overflow-y: auto; padding: 0 16px 230px; }
.grade { columns: auto var(--col, 280px); column-gap: 6px; }

.composer {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px)); z-index: 10;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch;
  padding: 14px 14px 14px 18px; border-radius: 22px;
  background: color-mix(in srgb, var(--painel) 92%, transparent); border: 1px solid var(--borda-forte);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--sombra-forte);
}
.comp-esq { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.comp-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.ref { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--chip); flex: none; }
.ref img, .ref video { width: 100%; height: 100%; object-fit: cover; }
.composer textarea {
  width: 100%; border: 0; outline: 0; background: none; resize: none; font-size: 15px; line-height: 1.5;
  min-height: 26px; max-height: 180px; padding: 2px 0;
}
.composer textarea::placeholder { color: var(--texto-3); }
.comp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gerar-grande {
  width: 150px; border: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 10px 30px rgba(255, 71, 0, .35);
  transition: transform .15s, opacity .2s, box-shadow .2s;
}
.gerar-grande small, .gerar-largo small { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; opacity: .95; }
.gerar-grande small svg, .gerar-largo small svg { width: 13px; height: 13px; }
.gerar-grande:hover:not(:disabled), .gerar-largo:hover:not(:disabled) { transform: translateY(-1px); }
.gerar-grande:disabled, .gerar-largo:disabled { background: var(--chip-hover); color: var(--texto-3); box-shadow: none; cursor: not-allowed; }
.gerar-grande .falta { font-size: 11px; font-weight: 500; opacity: .9; text-align: center; padding: 0 8px; line-height: 1.3; }

/* cartões de resultado */
.cartao { break-inside: avoid; margin-bottom: 6px; position: relative; border-radius: 6px; overflow: hidden; background: var(--painel); cursor: zoom-in; animation: entrar .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: scale(.985); } }
.cartao .midia { position: relative; background: var(--palco); }
.cartao .midia img, .cartao .midia video { width: 100%; height: auto; }
.cartao .midia.varias { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cartao .tag-tipo { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 500; backdrop-filter: blur(8px); }
.cartao .tag-tipo svg { width: 11px; height: 11px; }
.cartao .sobre { position: absolute; inset: auto 0 0 0; padding: 40px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; opacity: 0; transition: opacity .2s; display: flex; align-items: flex-end; gap: 8px; }
.cartao:hover .sobre { opacity: 1; }
.cartao .sobre .txt { flex: 1; min-width: 0; }
.cartao .sobre p { margin: 0; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao .sobre .autor { font-size: 11px; opacity: .7; margin-top: 3px; }
.cartao .sobre .acoes { display: flex; gap: 4px; flex: none; }
.cartao .sobre .acoes button, .cartao .sobre .acoes a { width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); }
.cartao .sobre .acoes button:hover, .cartao .sobre .acoes a:hover { background: var(--laranja); }
.cartao .sobre .acoes svg { width: 15px; height: 15px; }
.cartao.processando, .cartao.falhou { cursor: default; }
.cartao.processando .midia { aspect-ratio: var(--ar, 1); display: grid; place-items: center; overflow: hidden; background: linear-gradient(110deg, var(--painel) 30%, var(--painel-2) 50%, var(--painel) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; }
.cartao.processando .midia::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 71, 0, .3), transparent); filter: blur(10px); animation: pulsar 2.4s ease-in-out infinite; }
@keyframes brilhar { to { background-position: -150% 0; } }
@keyframes pulsar { 50% { transform: scale(1.25); opacity: .6; } }
.estado { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px; }
.estado .t { font-weight: 600; font-size: 13px; }
.estado .s { font-size: 11.5px; color: var(--texto-3); font-family: var(--mono); }
.estado > svg { width: 28px; height: 28px; color: var(--texto-3); }
.estado .cancelar { margin-top: 2px; height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--chip); font-size: 12px; color: var(--texto-2); }
.estado .cancelar:hover { color: var(--erro); }
.cartao.falhou .midia { aspect-ratio: var(--ar, 1); display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--painel) 0 10px, var(--painel-2) 10px 20px); }
.cartao.falhou .estado > svg, .cartao.falhou .estado .t { color: var(--erro); }
.cartao.falhou .estado .s { font-family: var(--sans); max-width: 240px; }
.cartao.falhou .apagar { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--chip); display: grid; place-items: center; color: var(--texto-2); }
.cartao.falhou .apagar svg { width: 13px; height: 13px; }

.vazio-res { min-height: 50vh; display: grid; place-items: center; text-align: center; color: var(--texto-3); padding: 24px; }
.vazio-res .grande { font-family: var(--serif); font-style: italic; font-size: 46px; color: var(--texto); line-height: 1.05; margin-bottom: 10px; letter-spacing: -.5px; }
.vazio-res .grande em { font-family: var(--pincel); font-style: normal; color: var(--laranja); font-size: 40px; }
.vazio-res p { margin: 0 auto; max-width: 400px; }

/* ───────── página VÍDEO ───────── */
.pg-video { height: 100%; display: grid; grid-template-columns: 330px 1fr; gap: 10px; padding: 4px 16px 16px; }
.vpainel { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.vabas { display: flex; gap: 18px; padding: 14px 16px 0; border-bottom: 1px solid var(--borda); flex: none; }
.vabas button { border: 0; background: none; padding: 0 0 12px; color: var(--texto-3); font-size: 14.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vabas button:hover { color: var(--texto); }
.vabas button.ativo { color: var(--texto); border-bottom-color: var(--texto); }
.vrolagem { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vrodape { padding: 10px; flex: none; }
.gerar-largo {
  width: 100%; height: 50px; border: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 10px 30px rgba(255, 71, 0, .3);
  transition: transform .15s;
}
.falta-txt { font-size: 12px; color: var(--texto-3); text-align: center; margin-bottom: 8px; }

.capa-modelo { position: relative; height: 130px; border-radius: 14px; overflow: hidden; flex: none; background: #111; isolation: isolate; }
.capa-modelo .fundo-capa { position: absolute; inset: 0; z-index: -2; }
.capa-modelo .fundo-capa img, .capa-modelo .fundo-capa video { width: 100%; height: 100%; object-fit: cover; }
.capa-modelo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .75)); }
.capa-modelo .nome { position: absolute; left: 12px; bottom: 26px; right: 12px; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: 24px; line-height: 1; color: var(--laranja); text-transform: uppercase; letter-spacing: .01em; }
.capa-modelo .sub { position: absolute; left: 12px; bottom: 9px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.capa-modelo .trocar { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 9px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; backdrop-filter: blur(8px); }
.capa-modelo .trocar:hover { background: var(--laranja); }
.capa-modelo .trocar svg { width: 13px; height: 13px; }

.quadros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.caixa-midia {
  position: relative; min-height: 130px; border-radius: 14px; border: 1.5px dashed var(--borda-forte); background: var(--painel-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 14px 10px; cursor: pointer;
  color: var(--texto-2); transition: border-color .15s, background .15s; overflow: hidden;
}
.caixa-midia:hover { border-color: var(--laranja-borda); }
.caixa-midia .circ { width: 40px; height: 40px; border-radius: 50%; background: var(--chip-hover); display: grid; place-items: center; color: var(--texto); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.caixa-midia .circ svg { width: 17px; height: 17px; }
.caixa-midia .t { font-weight: 600; font-size: 13.5px; color: var(--texto); line-height: 1.3; }
.caixa-midia .s { font-size: 12px; color: var(--texto-3); }
.caixa-midia .opc { position: absolute; top: 7px; right: 7px; font-size: 10.5px; color: var(--texto-3); background: var(--chip); padding: 2px 6px; border-radius: 6px; }
.caixa-midia.cheia { border-style: solid; border-color: var(--borda); padding: 6px; cursor: default; }
.caixa-midia.cheia > img, .caixa-midia.cheia > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caixa-midia .mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; width: 100%; }
.caixa-midia .mini .ref { width: auto; height: auto; aspect-ratio: 1; }
.caixa-midia .mais { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--borda-forte); display: grid; place-items: center; color: var(--texto-3); background: none; }
.caixa-midia .mais svg { width: 16px; height: 16px; }
.caixa-midia.multi { cursor: default; justify-content: flex-start; align-items: stretch; text-align: left; }
.caixa-midia.multi .cab { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); }

.prompt-v { background: var(--painel-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.prompt-v textarea { border: 0; outline: 0; background: none; resize: none; min-height: 110px; max-height: 300px; line-height: 1.5; font-size: 14px; width: 100%; }
.prompt-v textarea::placeholder { color: var(--texto-3); }
.prompt-v .chips-in { display: flex; gap: 6px; flex-wrap: wrap; }
.prompt-v .chip { height: 30px; font-size: 12.5px; padding: 0 9px; background: var(--chip); }
.linha-v { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--painel-2); border-radius: 14px; padding: 12px 14px; }
.linha-v .t { font-size: 14px; font-weight: 500; }
.ajuste-v {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: var(--painel-2);
  border-radius: 14px; padding: 10px 14px; transition: background .15s; min-width: 0;
}
.ajuste-v:hover { background: var(--chip); }
.ajuste-v > div { min-width: 0; }
.ajuste-v .r { font-size: 12px; color: var(--texto-3); }
.ajuste-v .v { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajuste-v .v svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }
.ajuste-v > svg { margin-left: auto; width: 16px; height: 16px; color: var(--texto-3); flex: none; }
.ajustes-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ajustes-grade .ajuste-v { padding: 10px 12px; }
.ajustes-grade .ajuste-v .v { font-size: 14px; }
details.avancado { background: var(--painel-2); border-radius: 14px; }
details.avancado summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: var(--texto-2); }
details.avancado summary::-webkit-details-marker { display: none; }
details.avancado summary svg { width: 15px; height: 15px; transition: transform .2s; }
details.avancado[open] summary svg { transform: rotate(180deg); }
details.avancado .conteudo { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 16px; }
.tomadas { display: flex; flex-direction: column; gap: 8px; }
.tomada { display: grid; grid-template-columns: 1fr 62px 28px; gap: 6px; align-items: start; }
.tomada textarea { min-height: 52px; }
.tomada .x { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--chip); color: var(--texto-2); display: grid; place-items: center; margin-top: 6px; }
.tomada .x svg { width: 13px; height: 13px; }
.botao-mais { height: 34px; padding: 0 12px; border: 1px dashed var(--borda-forte); border-radius: 10px; background: none; color: var(--texto-2); font-size: 12.5px; }
.botao-mais:hover { color: var(--laranja-texto); border-color: var(--laranja); }
.cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cor { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borda-forte); overflow: hidden; }
.cor input { position: absolute; inset: -6px; width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer; }
.cor .x { position: absolute; top: 0; right: 0; width: 15px; height: 15px; border: 0; background: var(--texto); color: var(--fundo); font-size: 10px; line-height: 15px; display: none; }
.cor:hover .x { display: block; }

.vpalco { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.vbarra { display: flex; align-items: center; gap: 8px; padding: 12px 14px; flex: none; flex-wrap: wrap; }
.vbarra .aba { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--chip); font-size: 13.5px; font-weight: 500; }
.vbarra .aba svg { width: 15px; height: 15px; }
.vbarra .dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.alternar { display: flex; gap: 2px; }
.alternar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 0; background: none; color: var(--texto-3); font-size: 13px; font-weight: 500; }
.alternar button svg { width: 15px; height: 15px; }
.alternar button.ativo { background: var(--chip); color: var(--texto); }
.vconteudo { flex: 1; overflow-y: auto; padding: 0 14px 14px; }
.lista-v { display: flex; flex-direction: column; gap: 12px; }
.item-v { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; }
.item-v .palco-v { position: relative; background: var(--palco); border-radius: 14px; overflow: hidden; height: var(--alt, 460px); display: grid; place-items: center; }
.item-v .palco-v video, .item-v .palco-v img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; cursor: zoom-in; }
.item-v .palco-v .estado { position: absolute; inset: 0; justify-content: center; }
.item-v .palco-v.processando { background: linear-gradient(110deg, var(--palco) 30%, var(--painel-2) 50%, var(--palco) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; }
.item-v .palco-v.falhou .estado > svg, .item-v .palco-v.falhou .estado .t { color: var(--erro); }
.item-v .palco-v.falhou .estado .s { font-family: var(--sans); }
.info-v { background: var(--painel-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.info-v .modelo-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; background: var(--chip); font-size: 12px; font-weight: 600; }
.info-v .entradas { display: flex; gap: 6px; flex-wrap: wrap; }
.info-v .entradas .ref { width: 42px; height: 42px; border-radius: 8px; }
.info-v .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.info-v .tags .tag { background: var(--chip); height: 24px; padding: 0 8px; font-size: 12px; }
.info-v .prompt { font-size: 12.5px; color: var(--texto-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.info-v .autor { font-size: 11.5px; color: var(--texto-3); }
.info-v .rod { margin-top: auto; display: flex; align-items: center; gap: 4px; }
.info-v .rod button, .info-v .rod a { height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; text-decoration: none; }
.info-v .rod button:hover, .info-v .rod a:hover { background: var(--chip); color: var(--texto); }
.info-v .rod svg { width: 15px; height: 15px; }
.info-v .rod .esp { flex: 1; }

/* ───────── modais / visor ───────── */
.fundo-modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 6, .6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; animation: aparecer .2s ease both; }
@keyframes aparecer { from { opacity: 0; } }
.modal { width: min(980px, 100%); max-height: min(800px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--painel); border: 1px solid var(--borda-forte); border-radius: var(--raio-g); box-shadow: var(--sombra-forte); animation: subir .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal.pequeno { width: min(480px, 100%); }
.modal-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.modal-topo h3 { margin: 0; flex: 1; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.1; }
.modal-corpo { overflow-y: auto; padding: 18px; }
.icone-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--chip); color: var(--texto-2); flex: none; }
.icone-btn:hover { color: var(--texto); background: var(--chip-hover); }
.icone-btn svg { width: 16px; height: 16px; }
.acoes-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--borda); }
.botao { height: 40px; padding: 0 14px; border-radius: 11px; border: 0; background: var(--chip); font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; color: var(--texto) !important; transition: background .15s; }
.botao:hover { background: var(--chip-hover); }
.botao svg { width: 15px; height: 15px; }
.botao.primario { background: var(--laranja); color: #fff !important; }
.botao.primario:hover { background: var(--laranja-2); }
.botao.perigo:hover { color: var(--erro) !important; }
.botao.cheio { grid-column: 1 / -1; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.visor { width: min(1280px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-columns: 1fr 340px; }
.visor .palco { background: #050506; display: grid; place-items: center; min-height: 0; position: relative; }
.visor .palco img, .visor .palco video { max-width: 100%; max-height: calc(100vh - 48px); object-fit: contain; }
.visor .navega { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.visor .navega:hover { background: var(--laranja); }
.visor .navega svg { width: 18px; height: 18px; }
.visor .navega.esq { left: 14px; }
.visor .navega.dir { right: 14px; }
.visor .miniaturas { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.visor .miniaturas button { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #000; }
.visor .miniaturas button.ativo { border-color: var(--laranja); }
.visor .miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.visor .lado { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--borda); }
.visor .lado .modal-corpo { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.prompt-txt { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ficha { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; margin: 0; }
.ficha dt { color: var(--texto-3); }
.ficha dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ───────── páginas de texto ───────── */
.pagina { height: 100%; overflow-y: auto; }
.pagina-miolo { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cabeca h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.8px; }
.cabeca p { margin: 8px 0 0; color: var(--texto-2); max-width: 580px; }
.blocos { display: grid; gap: 14px; }
.bloco { border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--painel); padding: 22px; }
.bloco h3 { margin: 0 0 4px; font-size: 16px; }
.bloco > p { margin: 0 0 16px; color: var(--texto-2); font-size: 13.5px; }
.linha-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aviso { font-size: 12.5px; color: var(--texto-2); background: var(--laranja-suave); border: 1px solid var(--laranja-borda); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.aviso svg { width: 16px; height: 16px; color: var(--laranja-texto); flex: none; margin-top: 2px; }
.estado-chave { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.estado-chave .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--erro); }
.estado-chave.ok .ponto { background: var(--ok); }
code.cam, pre.cmd { font-family: var(--mono); font-size: 12px; background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; word-break: break-all; }
code.cam { padding: 2px 7px; }
pre.cmd { margin: 0; padding: 12px 14px; white-space: pre-wrap; line-height: 1.6; position: relative; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; color: var(--texto-2); font-size: 13.5px; }
.passos li::marker { color: var(--laranja-texto); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 0 10px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.papel { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--chip); color: var(--texto-2); }
.papel.admin { background: var(--laranja-suave); color: var(--laranja-texto); }
.inativo { opacity: .5; }

.personagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.personagem { border-radius: var(--raio); overflow: hidden; background: var(--painel); border: 1px solid var(--borda); }
.personagem .capa { aspect-ratio: 4 / 5; background: var(--palco); position: relative; }
.personagem .capa img { width: 100%; height: 100%; object-fit: cover; }
.personagem .capa .st { position: absolute; left: 10px; bottom: 10px; }
.personagem .info { padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.personagem .info .n { font-weight: 600; }
.personagem .info .v { font-size: 11.5px; color: var(--texto-3); }
.etiqueta { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, .6); color: #fff; }
.etiqueta.ok { background: rgba(22, 163, 74, .9); }
.etiqueta.erro { background: rgba(220, 38, 38, .9); }

/* login */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 20% -10%, rgba(255, 71, 0, .18), transparent 60%), var(--fundo); }
.cartao-login { width: min(400px, 100%); background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 24px; padding: 30px 26px 26px; box-shadow: var(--sombra-forte); display: flex; flex-direction: column; gap: 14px; }
.cartao-login .marca { justify-content: center; margin-bottom: 4px; }
.cartao-login .marca .hw { font-size: 40px; }
.cartao-login .marca .studio { font-size: 31px; }
.cartao-login h2 { margin: 0; text-align: center; font-weight: 500; font-size: 15px; color: var(--texto-2); }
.cartao-login .botao { height: 46px; font-size: 15px; }
.cartao-login .erro-msg { color: var(--erro); font-size: 13px; text-align: center; min-height: 18px; }

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 10px 14px; border-radius: 12px; background: var(--texto); color: var(--fundo); font-size: 13px; box-shadow: var(--sombra-forte); animation: subir .25s ease both; }
.toast.erro { background: var(--erro); color: #fff; }
.toast svg { width: 16px; height: 16px; flex: none; }

/* ───────── responsivo ───────── */
@media (max-width: 1100px) {
  .item-v { grid-template-columns: 1fr; }
  .visor { grid-template-columns: 1fr; overflow-y: auto; }
  .visor .lado { border-left: 0; border-top: 1px solid var(--borda); }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr; }
  .topo { flex-wrap: wrap; padding: 10px 16px; gap: 10px 16px; }
  .nav { order: 3; width: 100%; }
  .vista, .pagina, .res-rolagem, .vconteudo { overflow: visible; height: auto; }
  .pg-imagem { height: auto; }
  .res-rolagem { padding: 0 16px 280px; }
  .grade { columns: 2 140px; }
  .composer { position: fixed; bottom: 10px; grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .gerar-grande { width: 100%; height: 52px; flex-direction: row; }
  .tamanho { display: none; }
  .pg-video { grid-template-columns: 1fr; height: auto; padding: 4px 16px 16px; }
  .vrolagem { overflow: visible; }
  .vrodape { position: sticky; bottom: 0; background: var(--painel); }
  .item-v .palco-v { height: 320px; }
  .linha-form { grid-template-columns: 1fr; }
  .cabeca h1 { font-size: 36px; }
  .pagina-miolo { padding: 20px 16px 48px; }
  .tabela { font-size: 12.5px; }
  .tabela .some { display: none; }
  .fundo-modal { padding: 0; align-items: end; }
  .modal { max-height: 92vh; border-radius: var(--raio-g) var(--raio-g) 0 0; }
}

/* popover: a rolagem fica dentro, o cabeçalho de busca fica fixo */
.popover > .pop-rolagem, .popover > .pop-form { flex: 1 1 auto; min-height: 0; }
.pop-coluna { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pop-coluna > .pop-rolagem { flex: 1 1 auto; min-height: 0; }
@media (max-width: 860px) {
  .barra-res { flex-wrap: wrap; }
  .barra-res .filtros { flex-wrap: wrap; }
  .barra-res .filtro { white-space: nowrap; }
  .barra-res .dir { width: 100%; margin-left: 0; }
  .barra-res .dir input.texto { width: 100% !important; max-width: none !important; }
}
.cartao-login .erro-msg { font-size: 14px; font-weight: 600; background: rgba(220, 38, 38, .12); border-radius: 10px; padding: 0; }
.cartao-login .erro-msg:not(:empty) { padding: 10px 12px; }

/* estilos do Genjutsu (galeria no popover) */
.estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 4px 6px 8px; }
.estilo { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--chip); cursor: pointer; }
.estilo img, .estilo video { width: 100%; height: 100%; object-fit: cover; }
.estilo .sem { display: grid; place-items: center; height: 100%; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--texto-3); }
.estilo .n { position: absolute; inset: auto 0 0 0; padding: 18px 8px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: 12px; font-weight: 600; text-align: left; }
.estilo:hover { border-color: var(--borda-forte); }
.estilo.ativo { border-color: var(--laranja); }

/* provedores extras */
.prov-linha { border-top: 1px solid var(--borda); padding-top: 16px; margin-top: 16px; }
.titulo-mini { font-size: 12px; font-weight: 600; color: var(--texto-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.lista-prov { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }
.item-prov { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--painel-2); }
.item-prov img, .item-prov .sem-capa { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; background: var(--chip); }
.item-prov .sem-capa { display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--texto-3); }
.item-prov .n { font-weight: 600; font-size: 13.5px; }
.item-prov .resumo-prov { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.item-prov .botao { flex: none; height: 34px; }
.tag-prov { background: var(--laranja-suave) !important; color: var(--laranja-texto) !important; }

/* ───────── página WORKFLOW (tela de blocos) ───────── */
.wf { height: 100%; display: grid; grid-template-rows: auto 1fr; position: relative; }
.wf-topo { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; }
.wf-nome { border: 0; background: none; font-family: var(--serif); font-style: italic; font-size: 26px; outline: 0; min-width: 120px; width: 380px; max-width: 40vw; color: var(--texto); }
.wf-nome:focus { border-bottom: 1px solid var(--borda-forte); }
.wf-topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wf-rodar { width: auto; height: 38px; padding: 0 18px; font-size: 14.5px; }
.wf-rodar:disabled { opacity: .6; }
.wf-ferramentas { position: absolute; left: 16px; top: 70px; z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); }
.wf-ferramentas button { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--texto-2); text-align: left; }
.wf-ferramentas button:hover { background: var(--chip); color: var(--texto); }
.wf-ferramentas button svg { width: 16px; height: 16px; }
.wf-tela { position: relative; overflow: hidden; margin: 0 16px 16px; border-radius: var(--raio-g); border: 1px solid var(--borda);
  background-color: var(--fundo); background-image: radial-gradient(circle, var(--borda-forte) 1px, transparent 1.2px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.wf-tela.arrastando-tela { cursor: grabbing; }
.wf-camada { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wf-fios { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.wf-fio { fill: none; stroke-width: 2.4; pointer-events: none; opacity: .9; }
.wf-fio.temp { stroke-dasharray: 6 5; }
.wf-fio-toque { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.wf-fio-toque:hover { stroke: rgba(220, 38, 38, .35); }
.wf-no { position: absolute; width: 290px; background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 16px; box-shadow: var(--sombra); cursor: default; }
.wf-no.sel { border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave), var(--sombra); }
.wf-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); cursor: grab; user-select: none; }
.wf-cab:active { cursor: grabbing; }
.wf-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--chip); color: var(--laranja-texto); }
.wf-ico svg { width: 14px; height: 14px; }
.wf-titulo { font-weight: 600; font-size: 13.5px; flex: 1; }
.wf-x { width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); display: grid; place-items: center; }
.wf-x:hover { background: var(--chip); color: var(--erro); }
.wf-x svg { width: 13px; height: 13px; }
.wf-corpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.wf-porta { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--painel); border: 2.5px solid var(--cor, #999); z-index: 2; }
.wf-porta.saida { right: -8px; top: 16px; cursor: crosshair; }
.wf-porta.saida:hover { transform: scale(1.25); background: var(--cor); }
.wf-entradas { display: flex; flex-direction: column; gap: 6px; margin: 0 -12px; padding: 0 12px 4px; }
.wf-entrada-linha { position: relative; display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 12.5px; color: var(--texto-2); }
.wf-entrada-linha .wf-porta { position: absolute; left: -20px; top: 3px; }
.wf-porta.entrada.ligada { background: var(--cor); }
.wf-texto { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--borda); border-radius: 10px; background: var(--painel-2); padding: 9px 10px; font-size: 13px; line-height: 1.45; outline: 0; }
.wf-texto.pequeno { min-height: 54px; }
.wf-texto:focus { border-color: var(--laranja-borda); }
.wf-midia { position: relative; min-height: 120px; border-radius: 12px; overflow: hidden; background: var(--painel-2); display: grid; place-items: center; cursor: pointer; }
.wf-midia.vazia { border: 1.5px dashed var(--borda-forte); }
.wf-midia img, .wf-midia video { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.dica-wf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.dica-wf svg { width: 16px; height: 16px; }
.wf-modelo { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 10px; background: var(--chip); padding: 7px 9px; text-align: left; font-size: 12.5px; font-weight: 500; }
.wf-modelo:hover { background: var(--chip-hover); }
.wf-modelo .tile { width: 26px; height: 26px; border-radius: 7px; background: var(--chip-hover); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 10.5px; color: var(--laranja-texto); flex: none; }
.wf-modelo .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-modelo svg { width: 13px; height: 13px; color: var(--texto-3); }
.wf-params { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-sel { appearance: none; border: 0; border-radius: 8px; background: var(--chip); padding: 5px 8px; font-size: 12px; color: var(--texto); max-width: 100%; cursor: pointer; }
.wf-resultado { position: relative; border-radius: 12px; overflow: hidden; background: var(--palco); min-height: 80px; display: grid; place-items: center; }
.wf-resultado img, .wf-resultado video { width: 100%; max-height: 300px; object-fit: contain; display: block; cursor: zoom-in; }
.wf-resultado.rodando { background: linear-gradient(110deg, var(--palco) 30%, var(--painel-2) 50%, var(--palco) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; min-height: 140px; }
.wf-resultado.falhou .estado > svg { color: var(--erro); }
.wf-gerar { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 0; border-radius: 11px; background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 13.5px; }
.wf-gerar svg { width: 13px; height: 13px; }
.wf-gerar:disabled { background: var(--chip-hover); color: var(--texto-3); cursor: default; }
@media (max-width: 860px) {
  .wf { height: calc(100vh - 110px); }
  .wf-ferramentas { flex-direction: row; flex-wrap: wrap; left: 16px; right: 16px; top: auto; bottom: 26px; }
  .wf-ferramentas button span:last-child { display: none; }
  .wf-nome { width: 160px; font-size: 20px; }
}

/* ───────── página MCP ───────── */
.mcp { max-width: 980px; text-align: left; }
.mcp-abas { display: flex; justify-content: center; gap: 4px; padding: 4px; margin: 4px auto 26px; width: fit-content; max-width: 100%; flex-wrap: wrap; background: var(--chip); border-radius: 999px; }
.mcp-abas button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.mcp-abas button.ativo { background: var(--texto); color: var(--fundo); }
.mcp-titulo { text-align: center; margin: 0 auto 10px; font-family: var(--display); font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: clamp(30px, 5vw, 52px); line-height: 1.02; letter-spacing: -.01em; max-width: 860px; }
.mcp-titulo em { font-style: normal; color: var(--laranja-texto); }
.mcp-marca { display: inline-flex; align-items: baseline; gap: 6px; text-transform: none; vertical-align: baseline; }
.mcp-marca .hw { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05em; }
.mcp-marca .studio { font-family: var(--pincel); font-weight: 400; color: var(--laranja); font-size: .85em; transform: rotate(-4deg); display: inline-block; }
.mcp-sub { text-align: center; color: var(--texto-2); margin: 0 auto 26px; max-width: 620px; }
.mcp-token { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda); margin-bottom: 14px; }
.mcp-caixa { border-radius: 16px; background: var(--painel); border: 1px solid var(--borda-forte); margin-bottom: 12px; overflow: hidden; }
.mcp-caixa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: 13px; font-weight: 600; }
.mcp-copiar { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--laranja); color: #fff; font-size: 12.5px; font-weight: 600; flex: none; }
.mcp-copiar svg { width: 14px; height: 14px; }
.mcp-caixa pre { margin: 0; padding: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--texto-2); max-height: 340px; overflow: auto; }
.mcp-sec { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; margin: 34px 0 14px; }
.mcp-exemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mcp-exemplo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: var(--painel); position: relative; }
.mcp-exemplo:hover { border-color: var(--laranja-borda); }
.mcp-exemplo .txt { font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.mcp-exemplo .cp { position: absolute; top: 12px; right: 12px; color: var(--texto-3); }
.mcp-exemplo .cp svg { width: 15px; height: 15px; }
.mcp-ferramentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mcp-ferr { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; background: var(--painel-2); font-size: 12.5px; color: var(--texto-2); }
.mcp-ferr code { font-family: var(--mono); font-size: 12.5px; color: var(--laranja-texto); }
.tag-sem { background: rgba(220, 38, 38, .14) !important; color: #f87171 !important; }

/* ───────── pastas ───────── */
.pg-biblioteca { height: 100%; display: grid; grid-template-columns: 240px 1fr; }
.pg-biblioteca .pg-imagem { min-width: 0; }
.lado-pastas { border-right: 1px solid var(--borda); padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pasta-linha { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; font-size: 13.5px; color: var(--texto-2); cursor: pointer; border: 1.5px dashed transparent; }
.pasta-linha:hover { background: var(--chip); color: var(--texto); }
.pasta-linha.ativo { background: var(--chip); color: var(--texto); font-weight: 600; }
.pasta-linha.alvo { border-color: var(--laranja); background: var(--laranja-suave); }
.pasta-linha .ico { display: grid; color: var(--texto-3); }
.pasta-linha.ativo .ico { color: var(--laranja-texto); }
.pasta-linha .ico svg { width: 15px; height: 15px; }
.pasta-linha .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasta-linha .c { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pasta-linha .acoes-pasta { display: none; gap: 2px; }
.pasta-linha:hover .acoes-pasta { display: flex; }
.pasta-linha:hover .c { display: none; }
.acoes-pasta button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); display: grid; place-items: center; }
.acoes-pasta button:hover { background: var(--chip-hover); color: var(--texto); }
.acoes-pasta svg { width: 13px; height: 13px; }
.grade.selecionando .cartao { cursor: pointer; }
.grade.selecionando .cartao::after { content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .35); z-index: 3; }
.grade.selecionando .cartao.selecionado { outline: 3px solid var(--laranja); outline-offset: -3px; }
.grade.selecionando .cartao.selecionado::after { background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--laranja); }
.barra-selecao { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--elevada); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); font-size: 13.5px; font-weight: 500; }
@media (max-width: 860px) {
  .pg-biblioteca { grid-template-columns: 1fr; height: auto; }
  .lado-pastas { border-right: 0; border-bottom: 1px solid var(--borda); flex-direction: row; flex-wrap: wrap; }
  .lado-pastas .titulo-mini, .lado-pastas .ajuda { width: 100%; }
}
.tam-livre { display: flex; align-items: center; gap: 6px; padding: 4px 10px 8px; }
.tam-livre input { height: 36px; width: 96px; text-align: center; }
.tam-livre .botao { height: 36px; }
.tam-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.tam-atalhos .tag { border: 0; cursor: pointer; height: 26px; }
.tam-atalhos .tag:hover { background: var(--laranja-suave); color: var(--laranja-texto); }

/* escolher do estúdio */
.btn-estudio { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--laranja-texto); font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.btn-estudio:hover { background: var(--laranja-suave); }
.btn-estudio svg { width: 13px; height: 13px; }
.caixa-midia .btn-estudio { margin-top: 2px; }
.estudio-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.estudio-item { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--palco); cursor: pointer; }
.estudio-item img, .estudio-item video { width: 100%; height: 100%; object-fit: cover; }
.estudio-item:hover { border-color: var(--borda-forte); }
.estudio-item.sel { border-color: var(--laranja); }
.estudio-rot { position: absolute; inset: auto 0 0 0; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estudio-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); color: #fff; display: grid; place-items: center; }
.estudio-check svg { width: 13px; height: 13px; }
.catalogo-barra { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.catalogo-barra .busca { position: relative; flex: 1; min-width: 200px; }
.catalogo-barra .busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.catalogo-barra .busca input { padding-left: 36px; height: 38px; }

/* ───────── lipsync: fonte do áudio (arquivo × voz + texto) ───────── */
.fonte-audio button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.fonte-audio button svg { width: 15px; height: 15px; }
.tts-bloco { display: grid; gap: 8px; }
.tts-estado { display: flex; align-items: center; gap: 10px; padding: 0 4px; flex-wrap: wrap; }
.tts-estado .ajuda { flex: 1; min-width: 160px; }
.tts-estado audio { flex: 1; min-width: 180px; height: 36px; }

/* ═════════════════════════ ACABAMENTO PREMIUM ═════════════════════════
   Mesma composição; muda a pele: luz laranja ambiente, grão, vidro, bordas em degradê, marca assinada. */
:root {
  --laranja-3: #ff9a5c;
  --brilho: rgba(255, 255, 255, .06);
  --aresta: linear-gradient(180deg, rgba(20, 18, 15, .10), rgba(20, 18, 15, .04) 45%, rgba(255, 71, 0, .16));
  --grao-op: .025;
  --vidro: rgba(255, 255, 255, .72);
  --gerar: linear-gradient(135deg, #ff8a3d 0%, #ff5410 45%, #e63b00 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #060607; --painel: #101012; --painel-2: #16161a; --chip: #1c1c21; --chip-hover: #26262c; --elevada: #18181c;
    --brilho: rgba(255, 255, 255, .05);
    --aresta: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 40%, rgba(255, 71, 0, .22));
    --grao-op: .045; --vidro: rgba(10, 10, 12, .62); --sombra-composer: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);
  }
}
:root[data-theme="dark"] {
  --fundo: #060607; --painel: #101012; --painel-2: #16161a; --chip: #1c1c21; --chip-hover: #26262c; --elevada: #18181c;
  --brilho: rgba(255, 255, 255, .05);
  --aresta: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 40%, rgba(255, 71, 0, .22));
  --grao-op: .045; --vidro: rgba(10, 10, 12, .62); --sombra-composer: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);
}

/* fundo: luz ambiente + grão de filme */
body {
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(255, 71, 0, .13), transparent 62%),
    radial-gradient(900px 600px at 105% 110%, rgba(255, 71, 0, .07), transparent 60%),
    var(--fundo);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: var(--grao-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
::selection { background: rgba(255, 71, 0, .85); }

/* marca assinada */
.marca { align-items: flex-end; gap: 7px; padding-bottom: 3px; }
.marca .hw { font-size: 27px; letter-spacing: -.6px; }
.studio-sel { position: relative; display: inline-block; transform: rotate(-5deg) translateY(-1px); }
.marca .studio { display: block; transform: none; font-size: 19px; letter-spacing: .02em; text-shadow: 0 0 22px rgba(255, 71, 0, .45); }
.marca .pincel { position: absolute; left: -3px; right: -6px; bottom: -8px; height: 8px; color: var(--laranja); opacity: .85; display: block; }
.marca .pincel svg { width: 100%; height: 100%; display: block; }
.marca:hover .studio { text-shadow: 0 0 28px rgba(255, 71, 0, .7); }

/* topo em vidro, aba ativa em pílula */
.app { grid-template-rows: 60px 1fr; }
.topo { gap: 26px; padding: 0 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--fundo) 70%, transparent), transparent); }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 71, 0, .35) 18%, var(--borda-forte) 45%, transparent); }
.nav { gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--painel) 70%, transparent); box-shadow: inset 0 0 0 1px var(--borda); }
.nav a { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; color: var(--texto-2); transition: color .15s, background .2s, box-shadow .2s; }
.nav a:hover { color: var(--texto); background: var(--brilho); text-decoration: none; }
.nav a.ativo { color: #fff; background: linear-gradient(180deg, rgba(255, 106, 43, .95), rgba(230, 59, 0, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 18px rgba(255, 71, 0, .35); }
.avatar { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px rgba(255, 71, 0, .55), 0 6px 18px rgba(255, 71, 0, .3); }
.pilula { background: color-mix(in srgb, var(--painel) 80%, transparent); box-shadow: inset 0 0 0 1px var(--borda); }
.pilula .ponto { box-shadow: 0 0 8px currentColor; color: var(--ok); }

/* superfícies: borda em degradê + luz no topo */
.vpainel, .composer, .modal, .popover, .cartao-login, .wf-no, .mcp-caixa {
  border: 1px solid transparent;
  background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box;
}
.popover { background: linear-gradient(var(--elevada), var(--elevada)) padding-box, var(--aresta) border-box; }
.composer {
  background: linear-gradient(color-mix(in srgb, var(--painel) 88%, transparent), color-mix(in srgb, var(--painel) 88%, transparent)) padding-box, var(--aresta) border-box;
  box-shadow: var(--sombra-composer, var(--sombra-forte)), inset 0 1px 0 var(--brilho);
}
.vpainel { box-shadow: inset 0 1px 0 var(--brilho), 0 20px 50px rgba(0, 0, 0, .25); }
.wf-no.sel { border-color: transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, linear-gradient(180deg, var(--laranja-3), var(--laranja)) border-box; }

/* chips, ajustes e caixas com relevo sutil */
.chip, .ajuste-v, .filtro.ativo, .segmento, .icone-btn, .botao:not(.primario) { box-shadow: inset 0 1px 0 var(--brilho), inset 0 0 0 1px var(--borda); }
.chip:hover, .ajuste-v:hover { box-shadow: inset 0 1px 0 var(--brilho), inset 0 0 0 1px var(--borda-forte); }
.chip.ligado { box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .45), 0 0 16px rgba(255, 71, 0, .12); }
.segmento button.ativo { background: linear-gradient(180deg, var(--chip-hover), var(--elevada)); box-shadow: inset 0 1px 0 var(--brilho), 0 2px 8px rgba(0, 0, 0, .25); }
.caixa-midia { border-color: color-mix(in srgb, var(--borda-forte) 80%, rgba(255, 71, 0, .25)); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .05), transparent 60%), var(--painel-2); }
.caixa-midia:hover { border-color: var(--laranja); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .1), transparent 60%), var(--painel-2); }

/* abas do painel: sublinhado laranja com brilho */
.vabas button.ativo { border-bottom-color: var(--laranja); }
.vabas button { position: relative; }
.vabas button.ativo::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 8px; background: radial-gradient(50% 100% at 50% 100%, rgba(255, 71, 0, .55), transparent); filter: blur(3px); pointer-events: none; }

/* capa do modelo: título com brilho */
.capa-modelo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.capa-modelo .nome { text-shadow: 0 0 24px rgba(255, 71, 0, .45), 0 2px 0 rgba(0, 0, 0, .35); }

/* botão Gerar: degradê vivo, brilho que passa */
.gerar-grande, .gerar-largo, .botao.primario { position: relative; overflow: hidden; background: var(--gerar); isolation: isolate; }
.gerar-grande, .gerar-largo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 12px 34px rgba(255, 71, 0, .38), 0 0 0 1px rgba(255, 120, 60, .35); }
.botao.primario { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px rgba(255, 71, 0, .28); }
.botao.primario:hover { background: var(--gerar); filter: brightness(1.07); }
.gerar-grande::after, .gerar-largo::after, .botao.primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%);
}
.gerar-grande:hover:not(:disabled)::after, .gerar-largo:hover:not(:disabled)::after, .botao.primario:hover:not(:disabled)::after { transition: transform .8s ease; transform: translateX(120%); }
.gerar-grande:disabled, .gerar-largo:disabled { background: var(--chip); box-shadow: inset 0 0 0 1px var(--borda); }

/* resultados */
.cartao { border-radius: 10px; box-shadow: 0 0 0 1px var(--borda); transition: box-shadow .2s, transform .2s; }
.cartao:hover { box-shadow: 0 0 0 1px rgba(255, 71, 0, .45), 0 14px 40px rgba(0, 0, 0, .45); }
.grade { column-gap: 8px; }
.cartao { margin-bottom: 8px; }
.vazio-res .grande { font-size: 58px; letter-spacing: -1px; }
.vazio-res .grande em { font-size: 50px; text-shadow: 0 0 34px rgba(255, 71, 0, .45); display: inline-block; transform: rotate(-3deg); }
.modal-topo h3 { font-size: 30px; }

/* login em vitrine */
.tela-login { position: relative; overflow: hidden; background: var(--fundo); }
.login-luz { position: absolute; inset: 0; pointer-events: none; }
.login-luz::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -58%); border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 71, 0, .0), rgba(255, 71, 0, .35), rgba(255, 140, 60, .12), rgba(255, 71, 0, .0) 60%, rgba(255, 71, 0, .25), rgba(255, 71, 0, 0));
  filter: blur(90px); opacity: .55; animation: girar 24s linear infinite; }
.login-luz::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--borda) 1px, transparent 1px), linear-gradient(90deg, var(--borda) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%); }
@keyframes girar { to { transform: translate(-50%, -58%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-luz::before { animation: none; } }
.login-coluna { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(420px, 100%); }
.cartao-login { width: 100%; padding: 38px 30px 28px; border-radius: 28px; gap: 14px;
  background: linear-gradient(var(--vidro), var(--vidro)) padding-box, var(--aresta) border-box;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 1px 0 var(--brilho); }
.cartao-login .marca { margin: 0 auto 10px; }
.cartao-login .marca .hw { font-size: 54px; letter-spacing: -1.2px; }
.cartao-login .marca .studio { font-size: 40px; }
.cartao-login .marca .pincel { height: 13px; bottom: -13px; }
.cartao-login h2 { font-size: 14.5px; margin-top: 6px; }
.cartao-login input.texto { height: 48px; border-radius: 13px; }
.cartao-login .botao { height: 50px; border-radius: 14px; font-size: 15.5px; }
.cartao-login .erro-msg { background: none; min-height: 0; }
.cartao-login .erro-msg:not(:empty) { background: rgba(220, 38, 38, .12); }
.login-rodape { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.login-rodape i { width: 4px; height: 4px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }

/* marca grande da página MCP acompanha a assinatura */
.mcp-marca .studio { text-shadow: 0 0 26px rgba(255, 71, 0, .45); }
.mcp-abas button.ativo { background: var(--gerar); color: #fff; box-shadow: 0 6px 18px rgba(255, 71, 0, .3); }

@media (max-width: 860px) {
  .nav { background: none; box-shadow: none; padding: 0; }
  .marca .hw { font-size: 23px; }
  .marca .studio { font-size: 16px; }
}

/* ───────── marcações @Image1 / @Video1 / @Audio1 ───────── */
.marcas-caixa { position: relative; display: flex; flex-direction: column; min-width: 0; }
.marcas-caixa > textarea.com-marcas { position: relative; z-index: 1; background: transparent !important; }
.marcas-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: transparent; border: 0; margin: 0; }
.marcas-fundo mark { color: transparent; border-radius: 5px; background: rgba(255, 71, 0, .26); box-shadow: 0 0 0 1.5px rgba(255, 71, 0, .55), 0 0 12px rgba(255, 71, 0, .25); }
.marcas-fundo mark.ruim { background: rgba(220, 38, 38, .14); box-shadow: 0 0 0 1.5px rgba(220, 38, 38, .7); }
.ref { position: relative; }
.marca-ref { position: absolute; left: 3px; bottom: 3px; z-index: 2; padding: 1px 5px; border-radius: 6px; font: 600 9.5px/1.4 var(--mono); color: #fff; background: rgba(255, 71, 0, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }
.marca-item { gap: 10px; }
.marca-mini { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: var(--chip); flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--borda); }
.marca-mini img, .marca-mini video { width: 100%; height: 100%; object-fit: cover; }
.marca-mini svg { width: 16px; height: 16px; color: var(--laranja-texto); }
.marca-token { flex: 1; font: 600 13px var(--mono); color: var(--laranja-texto); }
.dica-marca b { color: var(--laranja-texto); font-family: var(--mono); }
.comp-refs .ref-mais { display: grid; place-items: center; border: 1.5px dashed var(--borda-forte); background: none; color: var(--texto-3); cursor: pointer; }
.comp-refs .ref-mais:hover { border-color: var(--laranja); color: var(--laranja-texto); }
.comp-refs .ref-mais svg { width: 18px; height: 18px; }
.botao.perigo-cheio { background: rgba(220, 38, 38, .14); color: #ff6b6b !important; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .4); }
.botao.perigo-cheio:hover:not(:disabled) { background: #dc2626; color: #fff !important; }
.botao.perigo-cheio[data-c] { background: #dc2626; color: #fff !important; }
.grade.selecionando .cartao .apagar { display: none; }

/* ═════════ ADMIN: Debug e Log ═════════ */
.nav a.nav-admin { position: relative; }
.badge-erro { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font: 700 10px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--fundo), 0 0 12px rgba(220, 38, 38, .6); }
.adm { max-width: 1240px; }
.adm-abas { margin-bottom: 18px; }
.adm-abas a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--texto-2); text-decoration: none !important; }
.adm-abas a svg { width: 14px; height: 14px; }
.adm-abas a.ativo { background: var(--gerar); color: #fff; box-shadow: 0 6px 18px rgba(255, 71, 0, .3); }
.adm-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin-bottom: 16px; }
.adm-cab p { flex: 1 1 360px; margin: 0; }
.adm-titulo { width: 100%; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.5px; }
.adm-titulo em { font-family: var(--pincel); font-style: normal; color: var(--laranja); font-size: .78em; text-shadow: 0 0 24px rgba(255, 71, 0, .4); }
.adm-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: linear-gradient(var(--fundo) 70%, transparent); }
.adm-barra select.texto { width: auto; height: 38px; }
.adm-barra input.texto { flex: 1 1 220px; height: 38px; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.chip.ligado .ponto-vivo { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
.adm-log { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.adm-ev { border-radius: 10px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); overflow: hidden; }
.adm-ev-linha { width: 100%; display: grid; grid-template-columns: 128px 58px 150px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border: 0; background: none; text-align: left; font-size: 13px; }
.adm-ev-linha:hover { background: var(--brilho); }
.adm-hora { font: 12px var(--mono); color: var(--texto-3); white-space: nowrap; }
.adm-nivel { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; text-align: center; background: var(--chip); color: var(--texto-2); }
.nivel-erro .adm-nivel { background: rgba(220, 38, 38, .16); color: #ff6b6b; }
.nivel-aviso .adm-nivel { background: rgba(245, 158, 11, .16); color: #f5b041; }
.nivel-erro { box-shadow: inset 3px 0 0 #dc2626, inset 0 0 0 1px var(--borda); }
.nivel-aviso { box-shadow: inset 3px 0 0 #f59e0b, inset 0 0 0 1px var(--borda); }
.adm-tipo { color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ev.aberto .adm-msg { white-space: normal; }
.adm-quem { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.adm-det { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borda); }
.adm-det pre { margin: 0; max-height: 320px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--fundo); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; color: var(--texto-2); }
.adm-det .botao { align-self: flex-start; height: 32px; }
.adm-mais { align-self: center; margin-top: 8px; }
.adm-kvs { display: flex; flex-direction: column; }
.adm-kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; }
.adm-kv:last-child { border-bottom: 0; }
.adm-kv span { color: var(--texto-3); }
.adm-kv code { font: 12px var(--mono); color: var(--texto); word-break: break-all; }
.adm-kv.ruim code { color: #ff6b6b; }
.adm-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto-2); }
.adm-pill.ok .ponto { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.adm-pill.ativo { color: var(--laranja-texto); box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .45); }
.adm-pill.erro { color: #ff6b6b; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .5); background: rgba(220, 38, 38, .08); }
.adm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
.adm-card { border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); min-width: 0; }
.adm-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.adm-card h3 svg { width: 16px; height: 16px; color: var(--laranja-texto); }
.adm-card > .botao { align-self: flex-start; }
.adm-sub { font-size: 12px; color: var(--texto-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.adm-provs { display: flex; flex-direction: column; gap: 6px; }
.adm-prov { display: grid; grid-template-columns: 130px 80px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.adm-prov .botao { height: 32px; }
.adm-prov-nome { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.adm-prov .ponto { width: 8px; height: 8px; border-radius: 50%; }
.adm-prov .ponto.ok { background: #22c55e; } .adm-prov .ponto.off { background: var(--texto-3); }
.adm-teste { font-size: 12px; color: var(--texto-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-teste.ok { color: #22c55e; } .adm-teste.erro { color: #ff6b6b; }
.adm-tabela { display: flex; flex-direction: column; font-size: 12.5px; }
.adm-tr { display: grid; grid-template-columns: 1.6fr .9fr 1fr .6fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.adm-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tr.cab { color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.adm-tr.lento span:nth-child(4) { color: #ff6b6b; font-weight: 600; }
.adm-tr .botao { height: 28px; font-size: 12px; padding: 0 10px; }
.adm-erros { display: flex; flex-direction: column; gap: 6px; }
.adm-erro-linha { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: var(--painel-2); }
.adm-erro-linha b { color: #ff6b6b; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.adm-erro-linha span { color: var(--texto-2); word-break: break-word; }
@media (max-width: 760px) {
  .adm-ev-linha { grid-template-columns: 1fr auto; }
  .adm-ev-linha .adm-tipo, .adm-ev-linha .adm-quem { display: none; }
  .adm-ev-linha .adm-msg { grid-column: 1 / -1; }
  .adm-grade { grid-template-columns: 1fr; }
  .adm-prov { grid-template-columns: 1fr auto; }
}
.adm-kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.adm-kvs.compacto .adm-kv { grid-template-columns: minmax(0, 1fr) auto; }
.adm-kvs.compacto .adm-kv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-family: var(--mono); font-size: 12px; }
.adm-det .adm-kv { grid-template-columns: 140px 1fr; }
.adm-prov { grid-template-columns: 1fr auto auto; row-gap: 2px; }
.adm-prov .adm-teste { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
.adm-teste:empty { display: none; }

/* ───────── correções do teste (07/10) ───────── */
/* avisos no canto de cima: embaixo tapavam a barra de prompt */
.toasts { top: 72px; bottom: auto; left: auto; right: 16px; transform: none; align-items: flex-end; }
/* cabeçalho das caixas de mídia: o título encolhe, o "Do estúdio" não quebra */
.caixa-midia .cab { gap: 8px; }
.caixa-midia .cab > span:first-child { flex: 1; min-width: 0; }
.caixa-midia .cab .btn-estudio, .caixa-midia .cab > span:last-child { white-space: nowrap; flex: none; }
/* celular: a camada premium tinha fixado o topo em 60px */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .app { grid-template-rows: auto 1fr; }
  .topo { padding: 10px 12px; gap: 8px 12px; }
  .topo::after { display: none; }
  .nav { order: 3; width: 100%; max-width: 100%; overflow-x: auto; padding: 3px; }
  .nav a { padding: 6px 11px; font-size: 13px; }
  .toasts { top: auto; bottom: 90px; left: 12px; right: 12px; align-items: center; }
  .composer { width: calc(100% - 20px); left: 10px; transform: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .topo, .vista { min-width: 0; max-width: 100vw; }
  .nav { flex-wrap: nowrap; }
}

/* ───────── saldo dos provedores (topo) ───────── */
.saldo-pilula { cursor: pointer; gap: 10px; padding: 0 12px; border: 0; }
.saldo-pilula:hover { box-shadow: inset 0 0 0 1px var(--borda-forte); }
.saldo-pilula .saldo-ico svg { width: 13px; height: 13px; color: var(--laranja-texto); display: block; }
.saldo-item { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.saldo-item i { font-style: normal; color: var(--texto-3); font-size: 11.5px; }
.saldo-item b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--texto); }
.saldo-item.vazio b { color: var(--texto-3); }
.saldo-item.baixo b { color: #f59e0b; }
.saldo-pilula.baixo { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55), 0 0 14px rgba(245, 158, 11, .18); }
.saldo-pop { gap: 6px; }
.saldo-linha { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); margin: 0 6px 6px; }
.saldo-linha.baixo { box-shadow: inset 3px 0 0 #f59e0b; }
.saldo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.saldo-valor { font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
.saldo-linha.baixo .saldo-valor { color: #f59e0b; }
.saldo-aviso { color: var(--texto-2); }
.saldo-ajuste { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; margin-top: 6px; }
.saldo-ajuste label { display: grid; gap: 3px; font-size: 11.5px; color: var(--texto-3); min-width: 0; }
.saldo-ajuste input.texto { height: 32px; font-size: 13px; }
.saldo-ajuste .botao { height: 32px; }
.saldo-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px 6px; }
.saldo-rodape .botao { height: 30px; }
.saldo-admin { display: grid; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--borda); }
@media (max-width: 860px) {
  .saldo-pilula .saldo-item i { display: none; }
  .saldo-pilula { gap: 7px; padding: 0 9px; }
}

/* ═════════ aba Voz (estilo ElevenLabs) ═════════ */
.pg-voz { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; padding: 4px 16px 16px; min-height: 0; }
.voz-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 2px; }
.voz-abas { border-bottom: 1px solid var(--borda); padding: 6px 4px 0; }
.voz-principal { display: grid; gap: 10px; }
.voz-editor { position: relative; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); display: flex; flex-direction: column; }
.voz-texto { width: 100%; min-height: 260px; max-height: 52vh; resize: vertical; border: 0; outline: 0; background: none; padding: 20px 22px; font: 400 17px/1.65 var(--sans); color: var(--texto); }
.voz-texto::placeholder { color: var(--texto-3); }
.voz-editor-rodape { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.voz-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.voz-tags .chip { height: 26px; font: 500 11.5px var(--mono); padding: 0 8px; }
.voz-conta { margin-left: auto; font: 500 12px var(--mono); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.voz-conta.estoura { color: #ff6b6b; }
.voz-lado { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 12px; border-radius: var(--raio-g); border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); }
.voz-acao { margin-top: auto; display: grid; gap: 8px; position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent, var(--painel) 30%); }
.voz-nota { text-align: center; min-height: 16px; }
#voz-gerar span { pointer-events: none; }
#voz-gerar svg { width: 18px; height: 18px; }
#voz-gerar.enviando { opacity: .7; }
.voz-cartao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: 14px; padding: 10px 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-cartao:hover { box-shadow: inset 0 0 0 1px var(--borda-forte); }
.voz-cartao > span:last-child svg { width: 16px; height: 16px; color: var(--texto-3); }
.voz-cartao-txt { flex: 1; min-width: 0; display: grid; }
.voz-cartao-txt .r { font-size: 12px; color: var(--texto-3); }
.voz-cartao-txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 13px var(--display); color: #fff; background: conic-gradient(from 210deg, #ff8a3d, #e63b00, #7a2bff, #ff8a3d); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.voz-avatar svg { width: 16px; height: 16px; }
.voz-slider { display: grid; gap: 6px; padding: 4px 4px 2px; }
.voz-slider .campo-topo { display: flex; justify-content: space-between; font-size: 13px; }
.voz-slider .valor { font: 500 12px var(--mono); color: var(--texto-2); }
.voz-slider input[type=range] { width: 100%; accent-color: var(--laranja); }
.voz-zona { border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--borda-forte) 80%, rgba(255, 71, 0, .3)); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .06), transparent 60%), var(--painel); padding: 26px 18px; display: grid; gap: 16px; justify-items: center; cursor: pointer; }
.voz-zona.arrastando, .voz-zona:hover { border-color: var(--laranja); }
.voz-zona.cheia { cursor: default; border-style: solid; }
.voz-arquivo { display: grid; gap: 10px; justify-items: center; text-align: center; width: 100%; max-width: 560px; }
.voz-arquivo audio { width: 100%; }
.voz-arquivo .circ { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); }
.voz-arquivo .circ svg { width: 22px; height: 22px; color: var(--laranja-texto); }
.botao.gravando { background: #dc2626; color: #fff !important; animation: pulsar 1.4s ease-in-out infinite; }
.voz-hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 0; }
.voz-hist-cab h3 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; }
.voz-hist { display: grid; gap: 6px; }
.voz-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-item-txt { min-width: 0; display: grid; gap: 2px; }
.voz-item-txt p { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.voz-item audio { width: 100%; height: 36px; }
.voz-item-acoes { display: flex; gap: 6px; }
.voz-hist-estado { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-3); }
.voz-hist-estado .giro { width: 18px; height: 18px; }
.voz-hist-estado.erro { color: #ff6b6b; }
.voz-hist-estado.erro svg { width: 15px; height: 15px; flex: none; }
.voz-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voz-filtros .segmento { flex: 1 1 260px; }
.voz-filtros input.texto { flex: 1 1 200px; height: 38px; }
.voz-filtros select.texto { width: auto; height: 38px; }
.voz-lista { display: grid; gap: 6px; margin-top: 8px; }
.voz-linha { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-linha.ativa { box-shadow: inset 0 0 0 1.5px var(--laranja); }
.voz-linha-txt { min-width: 0; display: grid; gap: 1px; }
.voz-linha-txt b { font-size: 14.5px; }
.voz-linha .icone-btn.tocando { color: var(--laranja-texto); box-shadow: inset 0 0 0 1px var(--laranja); }
@media (max-width: 860px) {
  .pg-voz { grid-template-columns: 1fr; height: auto; }
  .voz-col, .voz-lado { overflow: visible; }
  .voz-item { grid-template-columns: 1fr; }
  .voz-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .voz-linha .voz-avatar { display: none; }
}
.voz-ref { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-ref.ligada { box-shadow: inset 0 0 0 1.5px var(--laranja); }
.voz-ref .campo-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.voz-ref .botao { height: 32px; font-size: 12.5px; }
.voz-transcricao { display: grid; gap: 8px; min-width: 0; }
.voz-transcricao p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2); max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; }
.voz-transcricao .botao { height: 30px; font-size: 12px; }
/* topo nunca mais largo que a tela: o menu encolhe e rola, o selo de saldo fica compacto */
html, body { overflow-x: hidden; }
.app { width: 100%; grid-template-columns: minmax(0, 1fr); }
.topo { min-width: 0; }
.topo .nav { min-width: 0; flex: 0 1 auto; overflow-x: auto; }
.topo-dir { flex: none; }
@media (max-width: 1560px) {
  .saldo-pilula .saldo-item i { display: none; }
  .saldo-pilula { gap: 8px; }
}
.saldo-item i.curto { display: none; }
@media (max-width: 1560px) {
  .saldo-pilula .saldo-item i.longo { display: none; }
  .saldo-pilula .saldo-item i.curto { display: inline; }
}

/* ═════════ marca v2: H&W serifada, & laranja, STUDIO espaçado (sem pincel) ═════════ */
.marca.marca-v2 { align-items: center; gap: 12px; padding: 0; }
.marca-v2 .hw { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 29px; line-height: 1; letter-spacing: -.02em; color: var(--marca-hw); display: inline-flex; align-items: baseline; }
.marca-v2 .hw em { font-style: italic; color: var(--laranja); font-size: 1.06em; margin: 0 .03em 0 .01em; text-shadow: 0 0 20px rgba(255, 71, 0, .35); }
.marca-v2 .fio { width: 1px; height: 20px; flex: none; background: linear-gradient(180deg, transparent, var(--borda-forte) 25%, var(--borda-forte) 75%, transparent); }
.marca-v2 .studio { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 10.5px; line-height: 1; letter-spacing: .44em; margin-right: -.44em; text-transform: uppercase; color: var(--texto-2); transform: none; text-shadow: none; }
.marca.marca-v2:hover .hw em { text-shadow: 0 0 26px rgba(255, 71, 0, .6); }
.marca.marca-v2:hover .studio { color: var(--texto); text-shadow: none; }
.cartao-login .marca.marca-v2 { gap: 18px; margin: 4px auto 12px; }
.cartao-login .marca-v2 .hw { font-size: 60px; letter-spacing: -.03em; }
.cartao-login .marca-v2 .fio { height: 42px; }
.cartao-login .marca-v2 .studio { font-size: 15px; letter-spacing: .5em; margin-right: -.5em; }
.mcp-marca.marca-v2 { display: inline-flex; align-items: center; gap: .3em; vertical-align: middle; text-transform: none; }
.mcp-marca.marca-v2 .hw { font-size: 1.15em; }
.mcp-marca.marca-v2 .fio { height: .8em; }
.mcp-marca.marca-v2 .studio { font-size: .32em; }
@media (max-width: 860px) {
  .marca-v2 .hw { font-size: 24px; }
  .marca.marca-v2 { gap: 9px; }
  .marca-v2 .studio { font-size: 9px; }
}
/* destaques que usavam a fonte de pincel viram serifa itálica laranja */
.vazio-res .grande em, .adm-titulo em, .mcp-titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1em; letter-spacing: -.01em; transform: none; color: var(--laranja); text-shadow: 0 0 30px rgba(255, 71, 0, .3); }
.login-rodape { letter-spacing: .22em; }
/* H&W = arte original da marca (assets/hw-marca.png, 364×150) usada como máscara: branco no escuro, quase preto no claro */
.hw-arte { display: inline-block; flex: none; height: 30px; aspect-ratio: 364 / 150; background: var(--marca-hw);
  -webkit-mask: url("assets/hw-marca.png") center / contain no-repeat; mask: url("assets/hw-marca.png") center / contain no-repeat; }
.marca-v2 .studio { color: var(--laranja-texto); }
.marca.marca-v2:hover .studio { color: var(--laranja); }
.cartao-login .marca-v2 .hw-arte { height: 66px; }
.mcp-marca.marca-v2 .hw-arte { height: 1em; }
@media (max-width: 860px) { .marca-v2 .hw-arte { height: 25px; } }

/* ───────── emoções por frase (IA) ───────── */
.voz-ia { height: 30px; font-size: 12.5px; color: var(--laranja-texto) !important; box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .4); }
.voz-ia:hover:not(:disabled) { background: var(--laranja-suave); }
.voz-ia svg { width: 14px; height: 14px; }
.emo-corpo { display: grid; gap: 12px; }
.emo-direcao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); font-size: 13px; cursor: pointer; }
.emo-direcao input { margin-top: 3px; accent-color: var(--laranja); }
.emo-lista { display: grid; gap: 6px; }
.emo-linha { display: grid; grid-template-columns: 26px minmax(0, 1fr) 210px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.emo-linha.marcada { box-shadow: inset 3px 0 0 var(--laranja), inset 0 0 0 1px var(--borda); }
.emo-n { font: 600 12px var(--mono); color: var(--texto-3); text-align: center; }
.emo-txt { min-width: 0; display: grid; gap: 2px; }
.emo-txt p { margin: 0; font-size: 14px; line-height: 1.45; }
.emo-sel { height: 36px; font-size: 13px; }
.emo-chip { justify-self: start; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--texto-2); }
@media (max-width: 760px) { .emo-linha { grid-template-columns: 22px minmax(0, 1fr); } .emo-sel, .emo-chip { grid-column: 2; } }
.voz-nota.aviso-texto { color: #f5b041; }