/* ============================================================
   COMBUS PRO - Folha de estilos principal
   Tema escuro com gradientes verde-matrix/ciano (vibe robotica)
   ============================================================ */

:root {
    --fundo: #0a0a12;
    --fundo-2: #10101c;
    --fundo-3: #171726;
    --borda: rgba(255, 255, 255, 0.08);
    --texto: #e8e8f0;
    --texto-fraco: #9a9ab0;
    --primaria: #00c853;
    --primaria-2: #00e676;
    --ciano: #22d3ee;
    --verde: #22c55e;
    --vermelho: #ef4444;
    --amarelo: #f59e0b;
    --gradiente: linear-gradient(135deg, #00af49 0%, #00c88c 50%, #1eb8d0 100%);
    --raio: 14px;
    --sombra: 0 10px 40px rgba(0, 0, 0, 0.4);
    --sombra-texto-botao: 0 1px 1px rgba(0, 0, 0, .75), 0 0 10px rgba(0, 0, 0, .4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    max-width: 100%;
}

/* ------------------------------------------------------------
   BARRA DE ROLAGEM ESTILIZADA (tema verde, discreta)
   ------------------------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 200, 83, 0.35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 200, 83, 0.5);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: clip;
    max-width: 100%;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; line-height: 1.2; }

a { color: var(--ciano); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------
   BOTOES
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    text-decoration: none !important;
    font-family: inherit;
}

.btn-primario {
    background: var(--gradiente);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 175, 73, 0.35);
    text-shadow: var(--sombra-texto-botao);
}
.btn-primario .btn-rotulo {
    text-shadow: inherit;
}
.pill.ativo small {
    text-shadow: inherit;
}
.btn-primario .btn-icone,
.btn-primario img,
.btn-primario svg {
    text-shadow: none;
    filter: none;
}
.btn-primario:hover,
.btn-primario:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 175, 73, 0.49);
    color: #fff;
    text-shadow: var(--sombra-texto-botao);
}

.btn-outline {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--borda);
}
.btn-outline:hover { border-color: var(--primaria-2); color: var(--primaria-2); }

.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-lg { padding: 17px 36px; font-size: 1.1rem; }
.btn-bloco { width: 100%; }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover { color: #fff; box-shadow: 0 8px 24px rgba(239, 68, 68, .35); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ------------------------------------------------------------
   CABECALHO
   ------------------------------------------------------------ */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 18, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
}

.cabecalho .container {
    padding-left: 12px;
    padding-right: 12px;
}

.cabecalho-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--texto) !important;
    text-decoration: none !important;
}
.logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: min(230px, 50vw);
    object-fit: contain;
}
.logo-icone { font-size: 1.6rem; }
.logo-texto {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
}
.logo-texto strong {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav-principal { display: flex; gap: 28px; }
.nav-principal a {
    color: var(--texto-fraco);
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    transition: color .15s;
}
.nav-principal a:hover { color: var(--texto); }

.cabecalho-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cabecalho-btn-curto { display: none; }

.nav-so-mobile,
.cabecalho-conta-menu a.nav-so-mobile { display: none; }
.cabecalho-conta { position: relative; }
.cabecalho-conta-seta { font-size: .75em; margin-left: 2px; }
.cabecalho-conta-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    width: 196px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: rgba(12, 16, 28, .92);
    border: 1px solid rgba(0, 200, 140, .28);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 232, 180, .06) inset;
    backdrop-filter: blur(16px);
    z-index: 40;
    text-align: left;
}
.cabecalho-conta-menu[hidden] { display: none; }
.cabecalho-conta-menu a,
.nav-conta a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--texto);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .01em;
    text-align: left;
}
.cabecalho-conta-menu a {
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.cabecalho-conta-menu a:hover,
.nav-conta a:hover {
    background: rgba(0, 200, 120, .1);
    border-color: rgba(0, 232, 160, .35);
    color: #e8fff4;
}
.cabecalho-conta-menu .nav-conta-sair,
.nav-conta .nav-conta-sair {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #ff8b8b;
}
.cabecalho-conta-menu .nav-conta-sair:hover {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .35);
    color: #ffd0d0;
}

.menu-hamburguer {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.menu-hamburguer span {
    width: 24px; height: 2px;
    background: var(--texto);
    border-radius: 2px;
    transition: .2s;
}

.aviso-manutencao {
    background: var(--amarelo);
    color: #1a1a1a;
    text-align: center;
    padding: 8px;
    font-weight: 600;
    font-size: .9rem;
}
.aviso-impersonacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    background: rgba(34, 211, 238, .16);
    border-bottom: 1px solid rgba(34, 211, 238, .35);
    color: var(--texto);
    text-align: center;
    padding: 9px 16px;
    font-size: .88rem;
}
.aviso-impersonacao a {
    color: #67e8f9;
    font-weight: 700;
    text-decoration: underline;
}

.aviso-assinar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 200, 83, .28);
    background: rgba(0, 200, 83, .1);
}
.aviso-assinar-texto {
    margin: 0;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--texto);
}
.aviso-assinar-texto strong {
    color: var(--primaria-2);
    font-weight: 700;
    margin-right: 4px;
}
.aviso-assinar-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.aviso-assinar-link:hover {
    color: var(--primaria);
}
.aviso-assinar .btn {
    width: 100%;
    justify-content: center;
    text-decoration: none;
}
.painel-sidebar .usuario-resumo:has(+ .aviso-assinar) {
    margin-bottom: 12px;
}

/* ------------------------------------------------------------
   ALERTAS
   ------------------------------------------------------------ */
.alerta {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 500;
    border: 1px solid transparent;
}
.alerta-sucesso { background: rgba(0, 200, 83, .16); color: #69f0ae; border-color: rgba(0, 200, 83, .45); }
.alerta-erro    { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239,68,68,.3); }
.alerta-info    { background: rgba(34, 211, 238, .1); color: #67e8f9; border-color: rgba(34,211,238,.3); }

/* Alertas flash (topo): botão fechar + auto-dismiss (app.js) */
.alerta-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: opacity .4s ease, transform .4s ease;
}
.alerta-flash .alerta-texto { flex: 1; min-width: 0; }
.alerta-fechar {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1.1;
    cursor: pointer;
    opacity: .55;
    padding: 0 2px;
    flex-shrink: 0;
}
.alerta-fechar:hover { opacity: 1; }
.alerta-flash.alerta-ocultando { opacity: 0; transform: translateY(-8px); }

/* Confirmação de e-mail */
.email-confirmar-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 620px;
    margin: 0 0 26px;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .04));
    border: 1px solid rgba(245, 158, 11, .3);
}
.email-confirmar-icone {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(245, 158, 11, .16);
    font-size: 1.25rem;
}
.email-confirmar-corpo { flex: 1; min-width: 0; }
.email-confirmar-corpo h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #fcd34d;
}
.email-confirmar-corpo p {
    margin: 0 0 12px;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--texto-fraco, #9ca3af);
}
.email-confirmar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.email-confirmar-form input[name="codigo"] {
    width: 118px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(0, 0, 0, .3);
    color: var(--texto, #e5e7eb);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
}
.email-confirmar-form input[name="codigo"]::placeholder {
    color: rgba(255, 255, 255, .25);
    font-weight: 400;
    letter-spacing: 4px;
}
.email-confirmar-form input[name="codigo"]:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
@media (max-width: 560px) {
    .email-confirmar-card { flex-direction: column; gap: 12px; }
}
.email-status { font-size: .85rem; margin-top: 8px; }
.email-status-ok { color: #4ade80; }
.email-status-pendente {
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fbbf24;
}
.email-status-pendente p { margin: 0 0 10px; font-size: .85rem; }
.email-status-pendente .email-confirmar-form input[name="codigo"] {
    background: rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
    position: relative;
    padding: 110px 0 90px;
    text-align: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% -5%, rgba(0, 200, 83, 0.35), transparent),
        radial-gradient(ellipse 40% 35% at 85% 20%, rgba(34, 211, 238, 0.15), transparent);
    pointer-events: none;
}

.hero .container { position: relative; }

.hero-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 200, 83, 0.45);
    background: rgba(0, 200, 83, 0.12);
    color: var(--primaria-2);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 26px;
}

.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 700;
    margin-bottom: 22px;
    letter-spacing: -1.5px;
}

.hero h1 .destaque {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--texto-fraco);
    max-width: 720px;
    margin: 0 auto 38px;
}
.hero-traco {
    display: inline-block;
    font-size: .72em;
    font-weight: 400;
    opacity: .7;
    margin: 0 .12em;
    transform: scaleY(.72);
    transform-origin: center;
    vertical-align: middle;
}

.hero-botoes {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 55px;
}
.hero-cta-cadastro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
    overflow: visible;
    position: relative;
    z-index: 3;
}
.hero-stat strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-stat span { color: var(--texto-fraco); font-size: .9rem; }
.hero-stat-valor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.hero-raio {
    width: 1.55rem;
    height: 1.55rem;
    display: block;
    flex: none;
    filter: drop-shadow(0 0 8px rgba(0, 200, 140, .45));
}
.hero-stat--modelos {
    max-width: 280px;
    text-align: center;
    overflow: visible;
    position: relative;
    z-index: 2;
}
.hero-stat--modelos .hero-stat-logos {
    display: grid;
    grid-template-columns: repeat(5, 30px);
    justify-content: center;
    justify-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 8px;
    padding: 0;
    border: none;
    overflow: visible;
}
.hero-stat--modelos .plano-logo {
    width: 30px;
    height: 30px;
    overflow: visible;
    position: relative;
    border-color: transparent;
    background: transparent;
}
.hero-stat--modelos .plano-logo img {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #fff;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   SEÇÕES GERAIS
   ------------------------------------------------------------ */
.secao { padding: 90px 0; }
.secao-alternada { background: var(--fundo-2); }
#recursos.secao { padding-top: 40px; }
#casos-de-uso,
#faq,
#planos,
.cta-final,
#blog {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

.secao-cabecalho { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.secao-cabecalho .etiqueta {
    color: var(--primaria-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .8rem;
    display: block;
    margin-bottom: 12px;
}
.secao-cabecalho h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; letter-spacing: -.5px; }
.secao-cabecalho h2:last-child { margin-bottom: 0; }
.secao-cabecalho p { color: var(--texto-fraco); font-size: 1.08rem; }

/* ------------------------------------------------------------
   GRADE DE RECURSOS
   ------------------------------------------------------------ */
.grade-recursos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.cartao-recurso {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 22px 22px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.cartao-recurso:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 200, 83, 0.5);
    box-shadow: 0 16px 40px rgba(0, 200, 83, 0.18);
    z-index: 2;
}
a.cartao-recurso {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
a.cartao-recurso:hover,
a.cartao-recurso:focus {
    color: inherit;
}
.cartao-recurso-topo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 8px;
}
.cartao-recurso .icone {
    display: block;
    font-size: 2.02rem;
    margin: 0 0 13px auto;
    padding: 0;
    line-height: 1;
    overflow: visible;
}
.cartao-recurso .icone .chat-vazio-robo-bob {
    animation: none;
}
.cartao-recurso .icone svg,
.cartao-recurso .icone-svg {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
}
.cartao-recurso .icone-svg-explosao {
    width: 1.18em;
    height: 1.18em;
}
.cartao-recurso .icone-svg-quadro {
    width: 1.56em;
    height: 1.56em;
}
.cartao-recurso .icone-svg-doc {
    width: 1.38em;
    height: 1.38em;
    color: #c7d2fe;
}
.cartao-recurso h3 {
    font-size: 1.35rem;
    margin: 0;
    width: 100%;
    line-height: 1.28;
}
.cartao-recurso--gratis { padding-top: 16px; }
.cartao-recurso--gratis h3 { padding-right: 0; }
.cartao-recurso p { color: var(--texto-fraco); font-size: .93rem; margin: 0; }
.cartao-recurso .plano-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(5 * 30px + 4 * 8px);
    max-width: 100%;
    gap: 8px;
    margin: 14px 0 0 auto;
    padding: 0;
    border: none;
    overflow: visible;
    position: relative;
}
.cartao-recurso .plano-logo {
    width: 30px;
    height: 30px;
    border-color: transparent;
    background: transparent;
    overflow: visible;
    position: relative;
    flex: 0 0 30px;
}
.cartao-recurso .plano-logo img {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #fff;
    box-sizing: border-box;
}
.cartao-recurso .plano-logo-nome,
.hero-stat--modelos .plano-logo-nome {
    display: flex;
    align-items: center;
    position: absolute;
    right: 14px;
    top: 50%;
    height: 30px;
    padding: 0 18px 0 10px;
    background: #fff;
    color: #111;
    border: 1px solid #000;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translate(8px, -50%) scaleX(.45);
    transform-origin: right center;
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    transition: transform .28s ease, opacity .18s ease;
}
.cartao-recurso .plano-logo:hover,
.cartao-recurso .plano-logo:focus-within,
.hero-stat--modelos .plano-logo:hover,
.hero-stat--modelos .plano-logo:focus-within {
    z-index: 6;
    border-color: transparent;
    box-shadow: none;
}
.cartao-recurso .plano-logo:hover .plano-logo-nome,
.cartao-recurso .plano-logo:focus-within .plano-logo-nome,
.hero-stat--modelos .plano-logo:hover .plano-logo-nome,
.hero-stat--modelos .plano-logo:focus-within .plano-logo-nome {
    opacity: 1;
    transform: translate(0, -50%) scaleX(1);
}

.cartao-recurso .em-breve {
    display: inline-block;
    margin-top: 12px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--amarelo);
    background: rgba(245, 158, 11, .12);
    padding: 4px 10px;
    border-radius: 999px;
}

.cartao-recurso--mais {
    grid-column: span 2;
    width: auto;
    justify-self: stretch;
}
.cartao-recurso--mais .cartao-recurso-topo {
    margin-bottom: 2px;
    text-align: left;
}
.cartao-recurso--mais h3 {
    text-align: left;
}
.cartao-recurso--mais:hover {
    transform: none;
}
.cartao-recurso--mais .icone-svg {
    color: var(--primaria-2, #69f0ae);
}
.cartao-recurso-mais-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    flex: 1;
}
.cartao-recurso-mais-lista li {
    min-width: 0;
}
.cartao-recurso-mais-lista a,
.cartao-recurso-mais-lista .mais-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    min-width: 0;
}
.cartao-recurso-mais-lista a:hover,
.cartao-recurso-mais-lista a:focus {
    background: rgba(0, 200, 83, 0.08);
    border-color: rgba(0, 200, 83, 0.28);
    color: inherit;
}
.cartao-recurso-mais-lista .mais-item--embreve {
    opacity: .88;
    cursor: default;
}
.cartao-recurso--mais .cartao-recurso-mais-lista .icone {
    flex-shrink: 0;
    font-size: 1.12rem;
    margin: 0;
    animation: none;
    transform: none;
}
.cartao-recurso-mais-lista .mais-nome {
    flex: 1;
    min-width: 0;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
}
.cartao-recurso-mais-lista .mais-gratis {
    flex-shrink: 0;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primaria-2, #69f0ae);
    background: rgba(0, 200, 83, .14);
    border: 1px solid rgba(0, 200, 83, .35);
    border-radius: 999px;
    padding: 1px 6px;
}
.cartao-recurso-mais-lista .em-breve,
.em-breve--mini {
    margin-top: 0;
    margin-left: 0;
    flex-shrink: 0;
    font-size: .55rem;
    letter-spacing: .35px;
    padding: 1px 6px;
    line-height: 1.3;
}
.mais-item-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 38px;
}

@media (max-width: 1100px) {
    .grade-recursos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cartao-recurso--mais {
        grid-column: 1 / -1;
        width: auto;
        justify-self: stretch;
    }
}
@media (max-width: 768px) {
    .grade-recursos {
        grid-template-columns: 1fr;
    }
    .cartao-recurso--mais {
        grid-column: auto;
    }
    .cartao-recurso-mais-lista {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   COMO FUNCIONA
   ------------------------------------------------------------ */
.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    counter-reset: passo;
}
.passo {
    text-align: center;
    padding: 20px;
}
.passo-numero {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradiente);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 200, 83, 0.4);
    text-shadow: var(--sombra-texto-botao);
}
.passo h3 { margin-bottom: 10px; }
.passo p { color: var(--texto-fraco); }

/* ------------------------------------------------------------
   CASOS DE USO (index)
   ------------------------------------------------------------ */
.casos-bloco {
    display: grid;
    gap: 28px;
    margin-bottom: 72px;
}
.casos-bloco:last-child { margin-bottom: 0; }
.casos-bloco-texto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 36px;
    max-width: none;
}
.casos-bloco-copy {
    flex: 1;
    min-width: 0;
    max-width: 720px;
}
.casos-bloco-texto .btn {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}
.casos-bloco-texto h3 {
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: -.4px;
    margin: 0 0 12px;
}
.casos-bloco-texto p {
    color: var(--texto-fraco);
    font-size: 1.05rem;
    margin: 0 0 14px;
}
.casos-bloco-copy > :last-child { margin-bottom: 0; }
.casos-bloco-texto--imagens .casos-bloco-copy {
    max-width: none;
    flex: 1 1 0;
}
.casos-bloco-texto--imagens p {
    font-size: .88rem;
    line-height: 1.42;
    margin: 0;
}
.casos-bloco-texto--imagens h3 {
    margin-bottom: 8px;
}
.casos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 1 280px;
    max-width: 300px;
}
.casos-lista li {
    color: var(--texto);
    font-size: .95rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.45;
}
.casos-lista li::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-top: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradiente);
    box-shadow: 0 0 10px rgba(0, 200, 83, .45);
}
.casos-galeria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(118px, 14vw);
    gap: 12px;
}
.casos-midia {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #0d0d16;
    min-height: 0;
    height: 100%;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.casos-midia--grande { grid-column: span 2; grid-row: span 2; }
.casos-midia--alta { grid-column: span 1; grid-row: span 2; }
.casos-midia--larga { grid-column: span 2; grid-row: span 1; }
.casos-midia img,
.casos-midia video,
.casos-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.casos-midia img,
.casos-midia video {
    object-fit: cover;
    display: block;
}
.casos-midia[data-casos-rotacao] img {
    opacity: 0;
    transition: opacity 1.4s ease;
    z-index: 0;
}
.casos-midia[data-casos-rotacao] img.ativo {
    opacity: 1;
    z-index: 1;
}
.casos-ph {
    min-height: 0;
    display: flex;
    align-items: flex-end;
    padding: 14px 16px 40px;
    background:
        radial-gradient(120% 80% at 10% 0%, rgba(0, 200, 83, .22), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(34, 211, 238, .16), transparent 50%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, #161624, #0c0c14);
}
.casos-midia:nth-child(2) .casos-ph {
    background:
        radial-gradient(100% 80% at 80% 10%, rgba(34, 211, 238, .2), transparent 50%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, #18182a, #0c0c14);
}
.casos-midia:nth-child(3) .casos-ph,
.casos-midia:nth-child(6) .casos-ph {
    background:
        radial-gradient(90% 80% at 20% 80%, rgba(0, 230, 118, .18), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, #141422, #0b0b12);
}
.casos-ph-marca {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(232, 232, 240, .45);
}
.casos-midia-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 28px 14px 12px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.casos-passos {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-56%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(48%, 250px);
    pointer-events: none;
}
.casos-passo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(10, 10, 20, .78);
    border: 1px solid rgba(0, 230, 118, .38);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}
.casos-passo-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    color: #04140a;
    background: var(--gradiente);
    box-shadow: 0 0 10px rgba(0, 200, 83, .45);
}
.casos-passo-txt {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: #f4f4fa;
    line-height: 1.25;
}
.casos-ph-rotulo {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto);
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.casos-videos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.casos-video {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.casos-video-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #0d0d16;
    overflow: hidden;
}
.casos-video-frame video,
.casos-video-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.casos-video-frame .casos-ph {
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-direction: column;
    gap: 10px;
}
.casos-gif-icone {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.casos-video:nth-child(1) .casos-ph {
    background:
        radial-gradient(90% 80% at 20% 10%, rgba(239, 68, 68, .28), transparent 50%),
        linear-gradient(180deg, #1a1014, #0c0c14);
}
.casos-video:nth-child(2) .casos-ph {
    background:
        radial-gradient(90% 80% at 80% 20%, rgba(139, 92, 246, .28), transparent 50%),
        linear-gradient(180deg, #12101c, #0c0c14);
}
.casos-video:nth-child(3) .casos-ph {
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(244, 114, 182, .26), transparent 50%),
        linear-gradient(180deg, #1a1218, #0c0c14);
}
.casos-video:nth-child(4) .casos-ph {
    background:
        radial-gradient(90% 80% at 10% 80%, rgba(251, 191, 36, .22), transparent 50%),
        linear-gradient(180deg, #16120c, #0c0c14);
}
.casos-video:nth-child(5) .casos-ph {
    background:
        radial-gradient(90% 80% at 90% 50%, rgba(56, 189, 248, .24), transparent 50%),
        linear-gradient(180deg, #0c141c, #0c0c14);
}
.casos-video:nth-child(6) .casos-ph {
    background:
        radial-gradient(90% 80% at 40% 100%, rgba(52, 211, 153, .22), transparent 50%),
        linear-gradient(180deg, #101816, #0c0c14);
}
.casos-play {
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradiente);
    color: #fff;
    font-size: 1.15rem;
    padding-left: 4px;
    box-shadow: 0 10px 28px rgba(0, 200, 83, .45);
    pointer-events: none;
}
.casos-video h4 {
    margin: 0;
    padding: 14px 16px 4px;
    font-size: 1.02rem;
}
.casos-video p {
    margin: 0;
    padding: 0 16px 16px;
    color: var(--texto-fraco);
    font-size: .88rem;
}
@media (max-width: 860px) {
    .casos-lista {
        flex: 1 1 100%;
        max-width: none;
    }
    .casos-bloco-texto {
        flex-wrap: wrap;
        gap: 16px;
    }
    .casos-bloco-texto .btn { margin-left: auto; }
    .casos-galeria {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(120px, 28vw);
    }
    .casos-midia--grande { grid-column: span 2; grid-row: span 2; }
    .casos-midia--alta,
    .casos-midia--larga { grid-column: span 1; grid-row: span 1; }
    .casos-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .casos-passos {
        width: min(54%, 210px);
        gap: 6px;
        right: 10px;
    }
    .casos-passo { padding: 7px 8px; }
    .casos-passo-txt { font-size: .7rem; }
}
.casos-mosaico {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, 255px);
    gap: 10px;
}
.casos-mosaico .casos-midia img {
    object-fit: cover;
    object-position: center;
}
.mosaico-produto { grid-column: 1 / 4; grid-row: 1 / 3; }
.mosaico-retrato { grid-column: 4 / 5; grid-row: 1 / 3; }
.mosaico-luta { grid-column: 5 / 6; grid-row: 1 / 2; }
.mosaico-anime { grid-column: 6 / 7; grid-row: 1 / 2; }
.mosaico-comercial { grid-column: 5 / 6; grid-row: 2 / 3; }
.mosaico-fantasia { grid-column: 6 / 7; grid-row: 2 / 3; }
.mosaico-campanha { grid-column: 1 / 3; grid-row: 3 / 4; }
.mosaico-personagem { grid-column: 3 / 5; grid-row: 3 / 5; }
.mosaico-cinematico { grid-column: 5 / 6; grid-row: 3 / 4; }
.mosaico-conceitual { grid-column: 6 / 7; grid-row: 3 / 4; }
.mosaico-fundo { grid-column: 1 / 3; grid-row: 4 / 5; }
.mosaico-restaurada { grid-column: 5 / 7; grid-row: 4 / 5; }
.mosaico-produto img { object-position: center 40%; }
.mosaico-retrato img,
.mosaico-personagem img { object-position: center 18%; }
.mosaico-campanha img,
.mosaico-fundo img,
.mosaico-restaurada img { object-position: center 40%; }
.mosaico-produto .casos-passos {
    width: min(54%, 230px);
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    gap: 7px;
    z-index: 4;
}
.mosaico-produto .casos-passo { padding: 8px 10px; }
.mosaico-produto .casos-passo-txt { font-size: .74rem; }
.casos-mosaico .casos-midia-legenda {
    font-size: .72rem;
    padding: 22px 10px 8px;
}
.casos-mosaico-selo {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(8, 8, 16, .62);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
}
.casos-mosaico-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 28px;
}
.casos-mosaico-ctas .btn {
    min-width: 260px;
    padding-left: 44px;
    padding-right: 44px;
}
@media (max-width: 860px) {
    .casos-mosaico {
        grid-template-rows: repeat(4, 200px);
    }
    .mosaico-produto .casos-passos {
        width: min(58%, 200px);
        gap: 6px;
    }
    .mosaico-produto .casos-passo { padding: 7px 8px; }
    .mosaico-produto .casos-passo-txt { font-size: .68rem; }
}
@media (max-width: 700px) {
    .casos-mosaico {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-auto-rows: minmax(200px, 48vw);
        gap: 8px;
    }
    .casos-mosaico .mosaico-produto {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
        align-self: stretch;
    }
    .casos-mosaico .mosaico-produto img {
        object-fit: contain;
        object-position: center;
    }
    .mosaico-luta { grid-column: 1 / 2; grid-row: 2 / 3; }
    .mosaico-anime { grid-column: 2 / 3; grid-row: 2 / 3; }
    .mosaico-comercial { grid-column: 1 / 2; grid-row: 3 / 4; }
    .mosaico-fantasia { grid-column: 2 / 3; grid-row: 3 / 4; }
    .mosaico-retrato { grid-column: 1 / 2; grid-row: 4 / 6; }
    .mosaico-campanha { grid-column: 2 / 3; grid-row: 4 / 5; }
    .mosaico-cinematico { grid-column: 2 / 3; grid-row: 5 / 6; }
    .mosaico-personagem { grid-column: 1 / 2; grid-row: 6 / 8; }
    .mosaico-conceitual { grid-column: 2 / 3; grid-row: 6 / 7; }
    .mosaico-fundo { grid-column: 2 / 3; grid-row: 7 / 8; }
    .mosaico-restaurada { grid-column: 1 / 3; grid-row: 8 / 9; }
    .mosaico-produto .casos-passos {
        width: min(52%, 168px);
        right: 8px;
        gap: 5px;
    }
    .mosaico-produto .casos-passo { padding: 6px 8px; }
    .mosaico-produto .casos-passo-num { width: 18px; height: 18px; font-size: .64rem; }
    .mosaico-produto .casos-passo-txt { font-size: .64rem; }
    .casos-mosaico .casos-midia-legenda {
        font-size: .68rem;
        padding: 18px 10px 8px;
    }
    .casos-mosaico-ctas .btn {
        flex: 1 1 auto;
        min-width: 140px;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   PLANOS
   ------------------------------------------------------------ */
.ciclo-toggle {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 45px;
}
.ciclo-toggle button {
    padding: 11px 24px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: transparent;
    color: var(--texto-fraco);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}
.ciclo-toggle button.ativo {
    background: var(--gradiente);
    color: #fff;
    border-color: transparent;
    text-shadow: var(--sombra-texto-botao);
}
.ciclo-toggle .economia {
    font-size: .78rem;
    display: block;
    color: var(--verde);
}
.ciclo-toggle button.ativo .economia {
    color: #fff;
    text-shadow: inherit;
}

.grade-planos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}
.grade-planos:not(.grade-planos--painel) .cartao-plano {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 22px 14px 18px;
}
.grade-planos:not(.grade-planos--painel) .cartao-plano h3 {
    font-size: 1.18rem;
}
.grade-planos:not(.grade-planos--painel) .plano-descricao {
    font-size: .86rem;
}
.grade-planos:not(.grade-planos--painel) .plano-preco .valor {
    font-size: 1.75rem;
}
.grade-planos:not(.grade-planos--painel) .plano-lista li {
    font-size: .82rem;
    padding: 5px 0;
}
.grade-planos--painel {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 280px));
    gap: 14px;
    justify-content: center;
}
.grade-planos--painel .cartao-plano {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 280px;
    padding: 22px 16px 18px;
}

.cartao-plano {
    position: relative;
    flex: 1 1 320px;
    min-width: 300px;
    max-width: 360px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    transition: transform .2s, border-color .2s;
}
.cartao-plano:hover { transform: translateY(-6px); }

.cartao-plano.destaque {
    border-color: var(--primaria);
    background: linear-gradient(180deg, rgba(124,58,237,.14), var(--fundo-3) 45%);
    box-shadow: 0 20px 60px rgba(0, 200, 83, 0.25);
}

.selo-destaque {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradiente);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: var(--sombra-texto-botao);
}

.cartao-plano h3 { font-size: 1.38rem; margin-bottom: 6px; }
.cartao-plano .plano-descricao { color: var(--texto-fraco); font-size: .95rem; line-height: 1.45; margin-bottom: 16px; min-height: 0; }

/* Plano que o usuario ja assina */
.cartao-plano.plano-atual { border-color: var(--verde); }
.cartao-plano.plano-contato .valor-contato .valor-numero,
.cartao-plano.plano-gratis .valor-contato .valor-numero {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.cartao-plano.plano-contato .plano-preco small,
.cartao-plano.plano-gratis .plano-preco small { display: none; }
.cartao-plano.plano-gratis {
    border-color: rgba(0, 200, 83, .28);
}
.selo-atual { background: var(--verde); color: #042a14; text-shadow: none; }
.btn-plano-atual {
    text-align: center;
    opacity: .65;
    cursor: default;
    pointer-events: none;
}

.plano-preco {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borda);
}
.plano-preco .valor {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.1;
}
.plano-preco .valor small { font-size: 1.05rem; color: var(--texto-fraco); font-weight: 500; }
.plano-preco .periodo { color: var(--texto-fraco); font-size: .92rem; }
.plano-equiv {
    margin: 8px 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--primaria);
    line-height: 1.3;
}

.plano-lista {
    list-style: none;
    margin-bottom: 20px;
    flex: 1;
}
.plano-lista li {
    padding: 6px 0;
    color: var(--texto-fraco);
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: .95rem;
    line-height: 1.42;
}
.plano-lista li::before { content: '✓'; color: var(--verde); font-weight: 700; flex-shrink: 0; }
.plano-lista li.forte { color: var(--texto); font-weight: 600; }
.plano-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
}
.plano-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--borda);
    background: #fff;
    cursor: default;
}
.plano-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.plano-logo:hover {
    border-color: var(--primaria);
    box-shadow: 0 0 0 2px rgba(0, 200, 83, .22);
}
.plano-logo-nome { display: none; }
.grade-planos--painel .plano-lista li {
    font-size: .82rem;
    padding: 5px 0;
}
.plano-estimativa-nota {
    margin: -28px 0 28px;
    color: var(--texto-fraco);
    font-size: .78rem;
    line-height: 1.4;
    text-align: center;
}
.cartao-plano .btn {
    padding: 12px 16px;
    font-size: 1rem;
}
.cartao-plano .btn-primario,
.cartao-plano .btn-primario .btn-rotulo {
    text-shadow: var(--sombra-texto-botao);
}


/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-lista { max-width: 780px; margin: 0 auto; }
.faq-item {
    border: 1px solid var(--borda);
    border-radius: 12px;
    margin-bottom: 14px;
    background: var(--fundo-3);
    overflow: hidden;
}
.faq-pergunta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    color: var(--texto);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.faq-pergunta .seta { transition: transform .2s; color: var(--primaria-2); flex-shrink: 0; }
.faq-item.aberto .faq-pergunta .seta { transform: rotate(180deg); }
.faq-resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.faq-resposta p {
    padding: 0 24px 22px;
    color: var(--texto-fraco);
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------ */
.cta-final {
    text-align: center;
    padding: 100px 0;
    background:
        radial-gradient(ellipse 50% 60% at 50% 100%, rgba(0, 200, 83, 0.3), transparent),
        var(--fundo-2);
}
.cta-final h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 18px; }
.cta-final p { color: var(--texto-fraco); margin-bottom: 34px; font-size: 1.15rem; }
.cta-final-botoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ------------------------------------------------------------
   RODAPE
   ------------------------------------------------------------ */
.rodape {
    background: var(--fundo-2);
    border-top: 1px solid var(--borda);
    padding: 65px 0 30px;
}
.rodape-grade {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 50px;
}
.rodape-marca p { color: var(--texto-fraco); font-size: .92rem; margin: 16px 0 20px; max-width: 300px; }
.rodape-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Especificidade maior que ".rodape-coluna a" (display:block; margin-bottom) */
.rodape-coluna .rodape-social a.rodape-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    text-decoration: none;
    color: #e8e8f0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    line-height: 0;
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.rodape-coluna .rodape-social a.rodape-social-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.rodape-coluna .rodape-social a.rodape-social-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}
.rodape-coluna .rodape-social a.rodape-social-instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.rodape-coluna .rodape-social a.rodape-social-youtube:hover { background: #ff0000; }
.rodape-coluna .rodape-social a.rodape-social-x:hover { background: #111; border-color: rgba(255,255,255,.25); }
.rodape-coluna .rodape-social a.rodape-social-tiktok:hover { background: #010101; box-shadow: 0 0 0 1px #25f4ee, 0 8px 18px rgba(0,0,0,.28); }
.rodape-coluna .rodape-social a.rodape-social-facebook:hover { background: #1877f2; }
.rodape-coluna .rodape-social a.rodape-social-linkedin:hover { background: #0a66c2; }

.rodape-coluna h4 {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--texto);
    margin-bottom: 18px;
}
.rodape-coluna a {
    display: block;
    color: var(--texto-fraco);
    font-size: .92rem;
    margin-bottom: 11px;
    text-decoration: none;
    transition: color .15s;
}
.rodape-coluna a:hover { color: var(--texto); }
/* Impede quebra no meio do numero de telefone */
.rodape-nowrap { white-space: nowrap; }

.rodape-final {
    border-top: 1px solid var(--borda);
    padding-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--texto-fraco);
    font-size: .87rem;
    text-align: center;
}
.rodape-final p { margin: 0; }

.rodape-idioma {
    position: relative;
    font-size: .78rem;
    color: var(--texto-fraco);
}
.rodape-idioma > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    color: var(--texto-fraco);
    opacity: .85;
}
.rodape-idioma > summary::-webkit-details-marker,
.rodape-idioma > summary::marker { display: none; content: none; }
.rodape-idioma > summary::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .7;
}
.rodape-idioma[open] > summary {
    opacity: 1;
    color: var(--texto);
}
.rodape-idioma-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 132px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 20;
    text-align: left;
}
.rodape-idioma-menu a {
    color: var(--texto-fraco);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: .82rem;
}
.rodape-idioma-menu a:hover,
.rodape-idioma-menu a.ativo {
    color: var(--texto);
    background: rgba(255,255,255,.04);
}

/* ------------------------------------------------------------
   AUTENTICACAO (login/cadastro)
   ------------------------------------------------------------ */
.auth-pagina {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background:
        radial-gradient(ellipse 45% 40% at 20% 0%, rgba(0, 200, 83, 0.22), transparent),
        radial-gradient(ellipse 40% 35% at 90% 90%, rgba(34, 211, 238, 0.12), transparent);
}

.auth-cartao {
    width: 100%;
    max-width: 440px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 42px 38px;
    box-shadow: var(--sombra);
}
.auth-cartao h1 { font-size: 1.7rem; margin-bottom: 8px; text-align: center; }
.auth-cartao .subtitulo { color: var(--texto-fraco); text-align: center; margin-bottom: 30px; font-size: .95rem; }

.auth-popup {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-popup[hidden] { display: none !important; }
.auth-popup-caixa {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--sombra);
}
.auth-popup-fechar {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--texto-fraco);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.auth-popup-fechar:hover { color: var(--texto); }
.auth-popup-abas {
    display: flex;
    gap: 6px;
    margin: 4px 0 18px;
    padding: 4px;
    background: var(--fundo-2);
    border-radius: 12px;
}
.auth-popup-aba {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--texto-fraco);
    font-weight: 600;
    font-size: .92rem;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
}
.auth-popup-aba.ativo {
    background: var(--fundo-3);
    color: var(--texto);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.auth-popup-titulo {
    font-size: 1.25rem;
    margin: 0 0 6px;
    text-align: center;
}
.auth-popup-sub {
    color: var(--texto-fraco);
    text-align: center;
    font-size: .88rem;
    margin: 0 0 18px;
}
.auth-popup-erro {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fecaca;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .88rem;
    margin: 0 0 16px;
}
.auth-popup-erro[hidden] { display: none !important; }

.campo { margin-bottom: 18px; }
.campo label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--texto);
}
.campo-rotulo-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}
.campo-rotulo-linha label { margin-bottom: 0; }
.auth-link-esqueci {
    font-size: .82rem;
    font-weight: 500;
    color: var(--primaria);
    text-decoration: none;
    white-space: nowrap;
}
.auth-link-esqueci:hover { text-decoration: underline; }
.campo-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.campo input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.campo select,
.campo textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.campo input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.22);
}
.campo .dica { font-size: .78rem; color: var(--texto-fraco); margin-top: 6px; }
.campo-anexo-cabeca {
    margin-bottom: 8px;
}
.campo-anexo-cabeca > label {
    margin-bottom: 6px;
}
.anexo-limites {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.anexo-limite-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .045);
    color: var(--texto-fraco);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
}
.anexo-limite-icone {
    font-size: .92em;
    line-height: 1;
}
.chat-opcao-dica {
    position: fixed;
    z-index: 420;
    max-width: min(280px, calc(100vw - 16px));
    padding: 8px 11px;
    background: var(--fundo-3, #1c1c1c);
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--texto);
    font-size: .78rem;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    pointer-events: none;
}

/* Checkbox de formulario (ex: "manter-me conectado") */
.campo-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 22px;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--texto-fraco);
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.campo-check:hover { color: var(--texto); }
.campo-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--primaria);
    cursor: pointer;
}
.campo-check strong { color: var(--texto); font-weight: 600; }

.auth-rodape-form { text-align: center; margin-top: 24px; color: var(--texto-fraco); font-size: .93rem; }

/* ------------------------------------------------------------
   PAINEL DO USUARIO / ADMIN
   ------------------------------------------------------------ */
.painel-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: calc(100vh - 70px);
    width: 100%;
    max-width: 100%;
}

.painel-sidebar {
    background: var(--fundo-2);
    border-right: 1px solid var(--borda);
    padding: 28px 16px;
    position: relative;
    z-index: 20;
    overflow: visible;
}
.painel-sidebar .usuario-resumo {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--fundo-3);
    margin-bottom: 16px;
}
.painel-sidebar .usuario-resumo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.painel-sidebar .usuario-resumo-dados {
    min-width: 0;
    flex: 1;
}
.painel-sidebar .usuario-resumo .nome {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.painel-sidebar .usuario-resumo .email {
    font-size: .75rem;
    color: var(--texto-fraco);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.painel-sidebar .pontos-saldo {
    margin-top: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 200, 83, .15);
    color: var(--primaria-2);
    font-weight: 700;
    font-size: .8rem;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.painel-sidebar .pontos-saldo-rotulo {
    font-weight: 600;
    opacity: .9;
}
.painel-sidebar .usuario-resumo-plano {
    margin-top: 8px;
    font-size: .78rem;
    line-height: 1.3;
}
.painel-sidebar .usuario-resumo--convidado {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.painel-sidebar .usuario-resumo-convite {
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--texto-fraco);
}
.painel-menu .js-abrir-auth {
    width: 100%;
    justify-content: center;
    margin: 4px 0 8px;
}
.logo-img-rodape {
    height: 48px;
    max-width: 240px;
}

.painel-menu { list-style: none; }
.painel-menu li { margin-bottom: 4px; }
.painel-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--texto-fraco);
    font-weight: 500;
    font-size: .93rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.painel-menu a:hover { background: var(--fundo-3); color: var(--texto); }
.painel-menu a.ativo {
    background: rgba(0, 200, 83, .15);
    color: var(--primaria-2);
    font-weight: 600;
}
.painel-menu .menu-ferramenta-icone {
    flex: 0 0 1.25em;
    width: 1.25em;
    height: 1.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.painel-menu .menu-ferramenta-icone svg,
.painel-menu .menu-ferramenta-icone .icone-svg {
    display: block;
    width: 1.18em;
    height: 1.18em;
    overflow: visible;
}
.painel-menu .menu-ferramenta-icone .icone-svg-quadro {
    width: 1.56em;
    height: 1.56em;
}
.painel-menu .menu-ferramenta-icone .icone-svg-doc {
    width: 1.22em;
    height: 1.22em;
    color: #c7d2fe;
}
.painel-menu .chat-vazio-robo-bob {
    animation: none;
}
.painel-menu .menu-badge {
    margin-left: auto;
    min-width: 21px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ciano);
    color: #062430;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}
.painel-menu .menu-divisor {
    margin: 16px 0 8px;
    padding: 0 14px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--texto-fraco);
}

.painel-sidebar-toggle {
    display: none;
}

.painel-menu .menu-folder {
    position: relative;
    z-index: 30;
}
.painel-menu .menu-folder-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-fraco);
    font-family: inherit;
    font-weight: 500;
    font-size: .93rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.painel-menu .menu-folder-rotulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.painel-menu .menu-folder-seta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    width: 1.15em;
    text-align: center;
    opacity: 1;
    color: var(--texto);
    transition: transform .18s ease;
}
.painel-menu .menu-folder-btn:hover,
.painel-menu .menu-folder:hover > .menu-folder-btn {
    background: var(--fundo-3);
    color: var(--texto);
}
.painel-menu .menu-folder--ativa > .menu-folder-btn {
    background: rgba(0, 200, 83, .15);
    color: var(--primaria-2);
    font-weight: 600;
}
.painel-menu .menu-folder.aberto > .menu-folder-btn .menu-folder-seta {
    transform: rotate(180deg);
}
.painel-menu .menu-folder-lista {
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px;
    border-radius: 12px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
    position: absolute;
    top: 0;
    left: calc(70% + 20px);
    z-index: 50;
    min-width: 250px;
    width: max-content;
    max-width: min(320px, 72vw);
}
.painel-menu .menu-folder-lista::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 30px;
    height: 100%;
}
.painel-menu .menu-folder.aberto > .menu-folder-lista {
    display: block;
}
.painel-menu .menu-folder-lista li { margin-bottom: 2px; }
.painel-menu .menu-folder-lista li:last-child { margin-bottom: 0; }
.painel-menu .menu-folder-lista a {
    font-size: .88rem;
    padding: 9px 12px;
    white-space: normal;
    line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
    .painel-menu .menu-folder:hover > .menu-folder-lista {
        display: block;
    }
}

@media (min-width: 961px) {
    .painel-menu .menu-folder-seta,
    .painel-menu .menu-folder.aberto > .menu-folder-btn .menu-folder-seta,
    .painel-menu .menu-folder:hover > .menu-folder-btn .menu-folder-seta {
        transform: rotate(-90deg);
    }
}

.painel-conteudo {
    padding: 36px;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.painel-conteudo:has(.ferramenta-area) {
    padding-top: 36px;
}
.painel-conteudo:has(.chat-pagina-cabecalho) {
    padding-top: 12px;
    padding-bottom: 12px;
}
.chat-pagina-cabecalho {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}
.chat-pagina-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.painel-conteudo .chat-pagina-cabecalho h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pagina-icone-ferramenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.pagina-icone-ferramenta svg,
.pagina-icone-ferramenta .icone-svg,
.editor-cabecalho-icone svg,
.editor-cabecalho-icone .icone-svg,
.cartao-conversa .conversa-icone svg {
    display: block;
    width: 1.15em;
    height: 1.15em;
    overflow: visible;
}
.pagina-icone-ferramenta .icone-svg-quadro,
.editor-cabecalho-icone .icone-svg-quadro,
.cartao-conversa .conversa-icone .icone-svg-quadro {
    width: 1.52em;
    height: 1.52em;
}
.pagina-icone-ferramenta .icone-svg-doc,
.editor-cabecalho-icone .icone-svg-doc,
.cartao-conversa .conversa-icone .icone-svg-doc {
    width: 1.22em;
    height: 1.22em;
    color: #c7d2fe;
}
.pagina-icone-ferramenta .chat-vazio-robo-bob,
.editor-cabecalho-icone .chat-vazio-robo-bob,
.cartao-conversa .conversa-icone .chat-vazio-robo-bob {
    animation: none;
}
.painel-conteudo .chat-pagina-cabecalho .subtitulo-pagina {
    margin: 0;
    flex: none;
    min-width: 0;
    line-height: 1.35;
    font-size: calc(.7rem + 1pt);
}
.ferramenta-coluna-esq .subtitulo-pagina.chat-pagina-lead--apos-modelo {
    margin: 2px 2px 0;
    padding: 0 4px;
    line-height: 1.35;
    font-size: calc(.7rem + 1pt);
    text-align: center;
}
@media (min-width: 1181px) {
    .ferramenta-coluna-esq .chat-pagina-cabecalho .chat-pagina-lead {
        display: none;
    }
}
.chat-lead-info {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: var(--fundo-2);
    color: var(--texto-fraco);
    cursor: pointer;
}
.chat-pagina-titulo .ferramenta-selo-gratis-linha,
.editor-cabecalho-topo .ferramenta-selo-gratis-linha {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.pa-voltar-cab .btn { white-space: nowrap; }
.chat-pagina-titulo .editor-selo-gratis {
    margin-left: 0;
    font-size: .72rem;
    padding: 4px 10px;
}
.chat-lead-info svg {
    display: block;
}
.chat-lead-info:hover,
.chat-lead-info:focus-visible,
.chat-lead-info[aria-expanded="true"] {
    border-color: var(--primaria);
    color: var(--primaria-2);
    outline: none;
}
@media (hover: none) and (pointer: coarse) {
    .chat-lead-info { display: inline-flex; }
    .ferramenta-coluna-esq:has(.chat-lead-info) .chat-pagina-lead--apos-modelo { display: none; }
    .painel-conteudo .chat-pagina-cabecalho .chat-pagina-lead {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 8;
        margin: 0;
        padding: 10px 12px;
        background: var(--fundo-3);
        border: 1px solid var(--borda);
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
        font-size: .85rem;
        line-height: 1.4;
        color: var(--texto);
    }
    .painel-conteudo .chat-pagina-cabecalho .chat-pagina-lead.aberto {
        display: block;
    }
}
.painel-conteudo:has(.cartao-criacao-submenu:not([hidden])),
.painel-conteudo:has(.cartao-criacao-menu:not([hidden])) {
    overflow-x: visible;
    position: relative;
    z-index: 6;
}
.painel-conteudo h1 { font-size: 1.7rem; margin-bottom: 6px; }
.painel-conteudo .subtitulo-pagina { color: var(--texto-fraco); margin-bottom: 30px; }
.painel-conteudo:has(.ferramenta-area) > .subtitulo-pagina { margin-bottom: 20px; }
.campo-label-direita {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.favoritos-config {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.favorito-btn {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: transparent;
    transition: color .15s, transform .12s, filter .15s;
}
.favorito-btn:hover {
    color: rgba(255, 213, 79, .28);
    transform: translateY(-1px);
}
.favorito-btn.tem-salvo {
    color: rgba(255, 213, 79, .55);
}
.favorito-btn.ativo {
    color: #ffd54f;
    filter: drop-shadow(0 0 6px rgba(255, 213, 79, .55));
}
.favorito-svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: currentColor;
    stroke: rgba(255, 213, 79, .24);
    stroke-width: 1.15;
    stroke-linejoin: round;
    paint-order: stroke fill;
}
.favorito-btn.tem-salvo .favorito-svg,
.favorito-btn.ativo .favorito-svg {
    stroke: rgba(255, 213, 79, .32);
}
.favorito-btn:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    border-radius: 6px;
}
.favorito-menu {
    position: fixed;
    z-index: 430;
    min-width: 228px;
    padding: 4px;
    background: var(--fundo-3, #1c1c1c);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.favorito-menu[hidden] { display: none; }
.favorito-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: .82rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.favorito-menu-item:hover,
.favorito-menu-item:focus-visible {
    background: rgba(255, 255, 255, .07);
    outline: none;
}

/* Cards de estatisticas (admin) */
.grade-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 36px;
}
.cartao-stat {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px;
}
.cartao-stat .stat-rotulo { color: var(--texto-fraco); font-size: .83rem; margin-bottom: 8px; }
.cartao-stat .stat-valor {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
}
.cartao-stat .stat-valor.destaque { color: var(--primaria-2); }
.cartao-stat .stat-valor.verde { color: var(--verde); }
.cartao-stat .stat-valor.ciano { color: var(--ciano); }
.cartao-stat .stat-valor.amarelo { color: var(--amarelo); }

/* Cards das ferramentas (painel usuario) */
.grade-ferramentas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.cartao-ferramenta {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px 22px;
    text-decoration: none !important;
    color: var(--texto);
    transition: transform .15s, border-color .15s;
    display: block;
    position: relative;
}
.cartao-ferramenta:hover { transform: translateY(-4px); border-color: var(--primaria); }
.cartao-ferramenta .icone {
    font-size: 1.8rem;
    margin-bottom: 14px;
    line-height: 1;
    overflow: visible;
}
.cartao-ferramenta .icone .chat-vazio-robo-bob {
    animation: none;
}
.cartao-ferramenta .icone svg,
.cartao-ferramenta .icone-svg {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
}
.cartao-ferramenta .icone-svg-explosao {
    width: 1.18em;
    height: 1.18em;
}
.cartao-ferramenta .icone-svg-quadro {
    width: 1.56em;
    height: 1.56em;
}
.cartao-ferramenta .icone-svg-doc {
    width: 1.38em;
    height: 1.38em;
    color: #c7d2fe;
}
.cartao-ferramenta h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cartao-ferramenta--gratis h3 { padding-right: 52px; }
.cartao-ferramenta p { color: var(--texto-fraco); font-size: .87rem; }
.cartao-ferramenta .custo { display: inline-block; margin-top: 12px; font-size: .78rem; color: var(--ciano); font-weight: 600; }
.selo-ferramenta-gratis {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0, 200, 83, .18);
    color: var(--primaria-2, #69f0ae);
    border: 1px solid rgba(0, 200, 83, .4);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.cartao-recurso .selo-ferramenta-gratis {
    left: 10px;
    right: auto;
}
.cartao-ferramenta--gratis,
.cartao-recurso--gratis { border-color: rgba(0, 200, 83, .28); }
.selo-ferramenta-admin {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(167, 139, 250, .18);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, .45);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.selo-ferramenta-admin--cab {
    position: static;
    margin-left: 8px;
    vertical-align: middle;
}
.menu-tag-admin {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(167, 139, 250, .16);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, .35);
    flex: 0 0 auto;
}

/* Tabelas admin */
.tabela-caixa {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow-x: auto;
}
table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.tabela th, .tabela td { padding: 13px 16px; text-align: left; }
.tabela th {
    background: var(--fundo-2);
    color: var(--texto-fraco);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--borda);
}
.tabela td { border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: rgba(255,255,255,.02); }

.etiqueta-status {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.status-ativo, .status-paga, .status-ativa, .status-concluida { background: rgba(34,197,94,.14); color: #4ade80; }
.status-pendente, .status-processando, .status-aguardando { background: rgba(245,158,11,.14); color: #fbbf24; }
.status-suspenso, .status-banido, .status-cancelada, .status-recusada, .status-erro { background: rgba(239,68,68,.14); color: #f87171; }
.status-expirada, .status-inadimplente, .status-estornada { background: rgba(154,154,176,.16); color: #9a9ab0; }
.status-aberto { background: rgba(245,158,11,.14); color: #fbbf24; }
.status-respondido { background: rgba(34,211,238,.16); color: #67e8f9; }
.status-resolvido { background: rgba(34,197,94,.14); color: #4ade80; }
.status-fechado { background: rgba(154,154,176,.16); color: #9a9ab0; }

.admin-usuario-voltar { margin-bottom: 10px; }
.admin-usuario-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 8px;
}
.admin-usuario-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.admin-usuario-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
    margin: 8px 0 26px;
}
.admin-usuario-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
    align-items: start;
}
.admin-usuario-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
.admin-dash-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    margin-bottom: 22px;
}
.admin-dash-topo-titulo { margin-bottom: 0; min-width: 0; }
.admin-dash-topo-titulo h1 { margin-bottom: 4px; }
.admin-dash-topo-titulo .subtitulo-pagina { margin-bottom: 0; }
.admin-dash-planos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
}
.admin-dash-plano {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--fundo-3);
    min-width: 112px;
}
.admin-dash-plano span {
    font-size: .78rem;
    color: var(--texto-fraco);
    line-height: 1.2;
}
.admin-dash-plano strong {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}
.admin-uso {
    margin: 8px 0 36px;
}
.admin-uso-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
}
.admin-uso-topo h2 {
    font-size: 1.1rem;
    margin: 0;
}
.admin-uso-topo .subtitulo-pagina {
    margin: 4px 0 0;
}
.admin-uso-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.admin-uso-kpis .cartao-stat { padding: 14px 16px; }
.admin-uso-kpis .stat-valor { font-size: 1.35rem; }
.admin-uso-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.admin-uso-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    height: 100%;
    padding: 12px 13px 11px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.admin-uso-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.admin-uso-card-topo h3 {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}
.admin-uso-card-icone { flex: 0 0 auto; line-height: 1.2; }
.admin-uso-card-topo h3 span:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.admin-uso-card-tipo {
    flex: 0 0 auto;
    max-width: 5.6rem;
    padding-top: 2px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: right;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.admin-uso-card-inativa {
    margin: -2px 0 0;
    font-size: .72rem;
    color: var(--texto-fraco);
}
.admin-uso-card-destaque {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 2px;
    border-top: 1px solid var(--borda);
}
.admin-uso-card-destaque span {
    font-size: .72rem;
    color: var(--texto-fraco);
}
.admin-uso-card-destaque strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ciano);
}
.admin-uso-card-linha {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.admin-uso-card-dado { min-width: 0; }
.admin-uso-card-dado--dir { text-align: right; }
.admin-uso-card-dado span {
    display: block;
    margin-bottom: 2px;
    font-size: .68rem;
    color: var(--texto-fraco);
}
.admin-uso-card-dado strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .98rem;
    font-weight: 700;
}
.admin-uso-card-pontos {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--borda);
}
.admin-uso-card-pontos span {
    font-size: .68rem;
    color: var(--texto-fraco);
}
.admin-uso-card-pontos strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--verde);
}
.admin-uso-vazio {
    color: var(--texto-fraco);
    margin: 0;
}
.admin-usuario-acoes-suporte {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-usuario-saldo {
    margin: 0 0 14px;
    font-size: .95rem;
}
.admin-usuario-pontos-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.admin-usuario-pontos-form .campo input {
    width: 140px;
}
.admin-usuario-acoes-assinatura {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.admin-usuario-reembolso {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
}
.admin-usuario-reembolso h4 {
    margin: 0 0 8px;
}
.admin-usuario-reembolso-form,
.admin-usuario-ativar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 12px;
}
.admin-usuario-ativar-form .campo {
    margin: 0;
    min-width: 160px;
    flex: 1 1 160px;
}
.admin-usuario-ativar-form .opcao-switch {
    flex: 1 1 220px;
}
.admin-usuario-dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: .92rem;
}
.admin-usuario-dl dt { color: var(--texto-fraco); }
.admin-usuario-dl dd { margin: 0; }
.admin-usuario-lista-simples {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.admin-usuario-lista-simples li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.admin-usuario-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
@media (max-width: 960px) {
    .admin-usuario-grade { grid-template-columns: 1fr; }
    .admin-usuario-dl { grid-template-columns: 1fr; gap: 2px 0; }
}

/* Lista de criacoes do usuario */
.grade-criacoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    overflow: visible;
}
.cartao-criacao {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}
.cartao-criacao .criacao-midia {
    aspect-ratio: 16/10;
    background:
        repeating-linear-gradient(-45deg, #161625 0 8px, #12121c 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}
.cartao-criacao .criacao-midia img,
.cartao-criacao .criacao-midia video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}
.cartao-criacao .criacao-corpo { padding: 16px; }
.cartao-criacao .criacao-tipo { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ciano); font-weight: 700; }
.cartao-criacao .criacao-prompt {
    font-size: .85rem;
    color: var(--texto-fraco);
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cartao-criacao .criacao-data { font-size: .75rem; color: var(--texto-fraco); }

/* Carrossel de conversas (ferramenta de imagens) */
.secao-conversas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 38px 0 18px;
}
.inicio-galeria + .inicio-galeria .secao-conversas-topo {
    margin-top: 63px;
}
.secao-conversas-topo h2 {
    font-size: 1.15rem;
    margin: 0;
}
.carrossel-conversas {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.carrossel-seta {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.carrossel-seta:hover:not(:disabled) {
    border-color: var(--primaria);
    color: var(--primaria-2);
    background: var(--fundo-2);
}
.carrossel-seta:disabled {
    opacity: .28;
    cursor: default;
}
.carrossel-trilho {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    padding: 4px 2px 8px;
}
.carrossel-trilho:has(.cartao-pasta) {
    padding-top: 18px;
}
.carrossel-trilho .cartao-criacao--com-menu:has(.cartao-criacao-menu:not([hidden])) {
    z-index: 30;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho .cartao-criacao {
    flex: 0 0 250px;
    width: 250px;
    min-width: 250px;
}
.cartao-ver-todas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 100%;
    text-align: center;
    text-decoration: none !important;
    color: inherit;
    border-style: dashed;
    transition: border-color .15s, background .15s;
}
.cartao-ver-todas:hover {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .06);
}
.cartao-ver-todas-icone { font-size: 2rem; opacity: .85; }
.cartao-ver-todas-texto {
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto);
    padding: 0 12px;
}

.carrossel-seta[hidden] {
    display: none;
}

/* Galeria de todas as imagens (ferramenta de imagens) */
.secao-galeria-titulo {
    font-size: 1.15rem;
    margin: 38px 0 18px;
}
.galeria-imagens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
    max-height: 720px;
    overflow-y: auto;
    /* padding extra no topo: hover com borda/sombra não fica cortado */
    padding: 8px 6px 10px 2px;
}
.galeria-item {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    background: var(--fundo-2);
    cursor: zoom-in;
    aspect-ratio: 1;
    transition: border-color .15s, box-shadow .15s;
}
.galeria-item:hover {
    border-color: var(--primaria);
    box-shadow: 0 0 0 1px var(--primaria), 0 8px 20px rgba(0, 0, 0, .25);
}
.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Filtros da pagina de conversas */
.conversas-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 26px;
}
.conversas-filtros select {
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--fundo-2);
    color: var(--texto);
    border: 1px solid var(--borda);
    font-family: inherit;
    font-size: .9rem;
}
.conversas-busca {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 340px;
    margin: 0;
}
.conversas-busca input[type="search"] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--fundo-2);
    color: var(--texto);
    border: 1px solid var(--borda);
    font-family: inherit;
    font-size: .9rem;
    box-sizing: border-box;
}
.conversas-busca input[type="search"]:focus {
    outline: none;
    border-color: var(--primaria);
}
.conversas-voltar {
    margin: -8px 0 16px;
    font-size: .9rem;
}
.conversas-voltar a {
    color: var(--primaria-2);
    text-decoration: none;
}
.conversas-voltar-sep {
    margin: 0 8px;
    color: var(--texto-fraco);
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.conversas-atalhos {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.conversas-atalho {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.conversas-atalho:hover {
    border-color: var(--primaria);
    color: var(--primaria-2);
}
.conversas-atalho.ativo {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .14);
    box-shadow: 0 0 0 2px rgba(0, 200, 83, .18);
}
.conversas-atalho--criar {
    width: auto;
    padding: 0 18px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    gap: 8px;
}
.conversas-vistas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--fundo-2);
}
.conversas-vista {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-fraco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.conversas-vista:hover { color: var(--texto); }
.conversas-vista.ativo {
    background: rgba(0, 200, 83, .16);
    color: var(--primaria-2);
}
.criacao-detalhes-cols { display: none; }
.grade-criacoes.vista-detalhes,
html.conversas-vista-detalhes .grade-criacoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vista-detalhes .cartao-criacao,
html.conversas-vista-detalhes .cartao-criacao {
    display: flex;
    align-items: stretch;
    overflow: visible;
}
.vista-detalhes .cartao-criacao-link,
html.conversas-vista-detalhes .cartao-criacao-link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    padding: 8px 52px 8px 8px;
}
.vista-detalhes .criacao-midia,
html.conversas-vista-detalhes .criacao-midia {
    width: 72px;
    height: 72px;
    aspect-ratio: auto;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 1.8rem;
}
.vista-detalhes .criacao-midia img,
.vista-detalhes .criacao-midia video,
html.conversas-vista-detalhes .criacao-midia img,
html.conversas-vista-detalhes .criacao-midia video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.vista-detalhes .cartao-criacao--com-menu .criacao-midia,
html.conversas-vista-detalhes .cartao-criacao--com-menu .criacao-midia {
    border-radius: 10px;
}
.vista-detalhes .criacao-corpo,
html.conversas-vista-detalhes .criacao-corpo {
    padding: 2px 0;
    flex: 1.1 1 220px;
    min-width: 0;
}
.vista-detalhes .criacao-prompt,
html.conversas-vista-detalhes .criacao-prompt {
    -webkit-line-clamp: 1;
    margin: 2px 0 8px;
    color: var(--texto);
    font-weight: 600;
}
.vista-detalhes .criacao-data,
html.conversas-vista-detalhes .criacao-data { display: none; }
.vista-detalhes .criacao-detalhes-cols,
html.conversas-vista-detalhes .criacao-detalhes-cols {
    display: flex;
    flex: 1.8 1 320px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    min-width: 0;
    padding-right: 4px;
}
.criacao-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .88rem;
    color: var(--texto);
    flex: 1 1 0;
    min-width: 0;
}
.criacao-col small {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
    font-weight: 700;
}
.vista-detalhes .cartao-criacao-opcoes,
html.conversas-vista-detalhes .cartao-criacao-opcoes {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
.vista-detalhes .cartao-criacao-menu,
html.conversas-vista-detalhes .cartao-criacao-menu {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    right: 52px;
}
.cartao-criacao[draggable="true"] { cursor: grab; }
.cartao-criacao.arrastando {
    opacity: .45;
    cursor: grabbing;
}
body.conversas-arrastando .cartao-pasta,
body.conversas-arrastando [data-drop] {
    box-shadow: 0 0 0 2px rgba(232, 192, 58, .35);
}
body.conversas-arrastando [data-drop].drop-alvo,
.cartao-pasta.drop-alvo {
    border-color: #F0C84A !important;
    box-shadow: 0 0 0 3px rgba(232, 192, 58, .45);
    background: transparent;
}
.cartao-criacao {
    position: relative;
}
.cartao-criacao--com-menu {
    overflow: visible;
}
.cartao-criacao--com-menu .criacao-midia {
    border-radius: var(--raio) var(--raio) 0 0;
}
.cartao-criacao-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.cartao-criacao--com-menu .criacao-corpo {
    padding-right: 46px;
}
.cartao-criacao-opcoes {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
.cartao-criacao-opcoes:hover,
.cartao-criacao-opcoes[aria-expanded="true"] {
    border-color: var(--primaria);
    color: var(--primaria-2);
}
.cartao-criacao-menu {
    position: absolute;
    right: 10px;
    bottom: 48px;
    z-index: 4;
    min-width: 168px;
    max-width: 240px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
    overflow: visible;
}
.cartao-criacao--com-menu:has(.cartao-criacao-menu:not([hidden])) {
    z-index: 20;
}
.cartao-criacao-menu[hidden] { display: none !important; }
.cartao-criacao[hidden] { display: none !important; }
.cartao-criacao-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--texto);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.cartao-criacao-menu button:hover {
    background: rgba(0, 200, 83, .14);
    color: var(--primaria-2);
}
.cartao-criacao-mover {
    position: relative;
}
.cartao-criacao-submenu {
    position: absolute;
    right: calc(100% + 8px);
    top: 0;
    z-index: 40;
    min-width: 180px;
    max-width: 260px;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.cartao-criacao-submenu.cartao-criacao-submenu--direita {
    right: auto;
    left: calc(100% + 8px);
}
.conversas-filtro-vazio {
    margin-top: 0;
    margin-bottom: 18px;
}
.criacao-midia--pasta {
    position: relative;
    font-size: inherit;
    overflow: hidden;
    background: transparent;
}
.pasta-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pasta-aba {
    position: absolute;
    left: 11%;
    top: 0;
    width: 36%;
    height: 17%;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 244, 196, .35) 0%, transparent 42%),
        linear-gradient(165deg, rgba(248, 224, 138, .92) 0%, rgba(232, 192, 58, .9) 100%);
    border: 1px solid rgba(255, 224, 130, .45);
    border-bottom: none;
    border-radius: 11px 18px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 252, 230, .4);
}
.pasta-aba::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 18px;
    height: 70%;
    background: linear-gradient(135deg, rgba(232, 192, 58, .85) 0%, transparent 70%);
    clip-path: polygon(0 100%, 0 0, 100% 100%);
    opacity: .75;
}
.pasta-corpo {
    position: absolute;
    left: 0;
    right: 0;
    top: 13%;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 5px 14px 12px 12px;
    background:
        linear-gradient(180deg, rgba(255, 236, 170, .22) 0%, transparent 18%),
        linear-gradient(165deg, rgba(240, 200, 74, .88) 0%, rgba(212, 160, 23, .9) 52%, rgba(196, 146, 14, .92) 100%);
    border: 1px solid rgba(255, 224, 130, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 210, .28),
        0 10px 22px rgba(0, 0, 0, .38);
}
.pasta-bolso {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 60%;
    bottom: 28%;
    z-index: 2;
}
.pasta-visual--capa .pasta-bolso {
    height: 50%;
    bottom: 31%;
}
.pasta-visual--capa.pasta-visual--n2 .pasta-bolso,
.pasta-visual--capa.pasta-visual--n3 .pasta-bolso {
    height: 60%;
    bottom: 28%;
}
.pasta-folhas {
    position: absolute;
    inset: 0;
}
.pasta-folha {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background:
        linear-gradient(180deg, #2a2a3c 0%, #1c1c2a 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transform-origin: 50% 110%;
}
.pasta-folha img,
.pasta-folha video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pasta-folha-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.8rem;
    background:
        radial-gradient(circle at 50% 30%, rgba(245, 199, 66, .2), transparent 60%),
        #222234;
}
.pasta-folha--capa {
    left: 10%;
    right: 10%;
    height: 100%;
    z-index: 4;
}
.pasta-visual--capa.pasta-visual--n2 .pasta-folha--capa,
.pasta-visual--capa.pasta-visual--n3 .pasta-folha--capa {
    height: 84%;
    z-index: 4;
}
.pasta-visual--n1 .pasta-folha--1 { transform: rotate(-2deg); z-index: 3; }
.pasta-visual--n2 .pasta-folha--1 { transform: rotate(-7deg) translate(-8%, 6%); z-index: 1; }
.pasta-visual--n2 .pasta-folha--2 { transform: rotate(4deg) translate(7%, 0); z-index: 3; }
.pasta-visual--n3 .pasta-folha--1 { transform: rotate(-8deg) translate(-11%, 8%); z-index: 1; }
.pasta-visual--n3 .pasta-folha--2 { transform: rotate(7deg) translate(12%, 5%); z-index: 2; }
.pasta-visual--n3 .pasta-folha--3 { transform: rotate(-1.5deg); z-index: 3; }
.cartao-pasta:hover .pasta-visual--n2 .pasta-folha--2,
.cartao-pasta:hover .pasta-visual--n3 .pasta-folha--3,
.cartao-pasta:hover .pasta-visual--n1 .pasta-folha--1 {
    transform: rotate(-1deg) translateY(-5px);
}
.pasta-frente {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    z-index: 5;
    background:
        linear-gradient(180deg, rgba(255, 244, 196, .32) 0%, rgba(246, 209, 92, .1) 16%, transparent 34%),
        linear-gradient(180deg, rgba(246, 209, 92, .9) 0%, rgba(224, 180, 41, .9) 40%, rgba(201, 150, 18, .92) 100%);
    border-top: 1px solid rgba(255, 236, 180, .42);
    box-shadow:
        0 -8px 18px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 252, 230, .28);
}
.pasta-etiqueta {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 22%;
    height: 26%;
    border-radius: 6px;
    background: rgba(42, 34, 12, .08);
    border: 1px solid rgba(42, 34, 12, .12);
}
.pasta-visual--vazia .pasta-bolso::before {
    content: '';
    position: absolute;
    inset: 12% 10% 0;
    border-radius: 4px 4px 0 0;
    background: rgba(42, 34, 12, .1);
    border: 1px dashed rgba(90, 70, 16, .28);
    border-bottom: none;
}

/* O card inteiro vira a pasta; só a aba de baixo cresce para igualar a linha */
.cartao-pasta {
    display: flex;
    flex-direction: column;
    height: auto;
    background: transparent;
    border: none;
    overflow: visible;
    border-radius: 0;
    padding-top: 15px;
}
.grade-criacoes .cartao-pasta,
.carrossel-trilho .cartao-pasta {
    align-self: start;
}
.cartao-pasta::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 0;
    width: 38%;
    height: 18px;
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(255, 252, 230, .4) 0%, transparent 45%),
        linear-gradient(180deg, rgba(252, 227, 138, .92) 0%, rgba(232, 192, 58, .9) 100%);
    border: 1px solid rgba(255, 230, 150, .48);
    border-bottom: none;
    border-radius: 10px 16px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 240, .4);
}
.cartao-pasta .cartao-criacao-link {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border-radius: 6px 16px 14px 14px;
    background:
        linear-gradient(180deg, rgba(255, 236, 170, .22) 0%, transparent 20%),
        linear-gradient(165deg, rgba(240, 200, 74, .88) 0%, rgba(212, 160, 23, .9) 50%, rgba(196, 146, 14, .92) 100%);
    border: 1px solid rgba(255, 224, 130, .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 210, .28),
        0 12px 24px rgba(0, 0, 0, .38);
    color: inherit;
    text-decoration: none;
}
.cartao-pasta .criacao-midia--pasta {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16/10;
    height: auto;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
}
.cartao-pasta .pasta-aba,
.cartao-pasta .pasta-frente,
.cartao-pasta .pasta-etiqueta {
    display: none;
}
.cartao-pasta .pasta-corpo {
    top: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.cartao-pasta .pasta-bolso {
    left: 9%;
    right: 9%;
    top: 10%;
    bottom: 0;
    height: auto;
}
.cartao-pasta .pasta-visual--capa .pasta-bolso,
.cartao-pasta .pasta-visual--capa.pasta-visual--n2 .pasta-bolso,
.cartao-pasta .pasta-visual--capa.pasta-visual--n3 .pasta-bolso {
    height: auto;
    bottom: 0;
    top: 10%;
}
.cartao-pasta .criacao-corpo {
    position: relative;
    z-index: 6;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 10px 16px 12px;
    background:
        linear-gradient(180deg, rgba(255, 244, 196, .32) 0%, rgba(246, 209, 92, .08) 18%, transparent 36%),
        linear-gradient(180deg, rgba(246, 209, 92, .9) 0%, rgba(224, 180, 41, .9) 42%, rgba(201, 150, 18, .92) 100%);
    border-top: 1px solid rgba(255, 236, 180, .42);
    box-shadow: 0 -8px 16px rgba(80, 55, 0, .16);
}
.cartao-pasta .criacao-tipo {
    color: #6b5410;
}
.cartao-pasta .criacao-prompt {
    color: #2a220c;
    font-weight: 700;
    margin: 4px 0 6px;
}
.cartao-pasta .criacao-data {
    color: #6b5410;
}
.cartao-pasta.cartao-criacao--com-menu .criacao-midia {
    border-radius: 0;
}
.cartao-pasta .cartao-criacao-opcoes {
    z-index: 8;
    background: var(--fundo-2);
    border-color: var(--borda);
    color: var(--texto);
}
.cartao-pasta .cartao-criacao-opcoes:hover,
.cartao-pasta .cartao-criacao-opcoes[aria-expanded="true"] {
    border-color: var(--primaria);
    color: var(--primaria-2);
    background: var(--fundo-2);
}
.cartao-pasta .cartao-criacao-menu {
    z-index: 9;
}
.cartao-pasta.drop-alvo .cartao-criacao-link,
.cartao-pasta.drop-alvo::before {
    border-color: rgba(255, 224, 130, .75);
    box-shadow: 0 0 0 3px rgba(232, 192, 58, .35), inset 0 1px 0 rgba(255, 248, 210, .28);
}

.vista-detalhes .cartao-pasta,
html.conversas-vista-detalhes .cartao-pasta {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    padding-top: 0;
}
.vista-detalhes .cartao-pasta::before,
html.conversas-vista-detalhes .cartao-pasta::before {
    display: none;
}
.vista-detalhes .cartao-pasta .cartao-criacao-link,
html.conversas-vista-detalhes .cartao-pasta .cartao-criacao-link {
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.vista-detalhes .cartao-pasta .criacao-midia--pasta,
html.conversas-vista-detalhes .cartao-pasta .criacao-midia--pasta {
    flex: 0 0 72px;
    min-height: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
}
.vista-detalhes .cartao-pasta .pasta-aba,
.vista-detalhes .cartao-pasta .pasta-frente,
html.conversas-vista-detalhes .cartao-pasta .pasta-aba,
html.conversas-vista-detalhes .cartao-pasta .pasta-frente {
    display: block;
}
.vista-detalhes .cartao-pasta .pasta-etiqueta,
html.conversas-vista-detalhes .cartao-pasta .pasta-etiqueta {
    display: none;
}
.vista-detalhes .cartao-pasta .pasta-corpo,
html.conversas-vista-detalhes .cartao-pasta .pasta-corpo {
    top: 13%;
    border: 1px solid rgba(255, 224, 130, .42);
    border-radius: 5px 10px 8px 8px;
    background:
        linear-gradient(180deg, rgba(255, 236, 170, .22) 0%, transparent 18%),
        linear-gradient(165deg, rgba(240, 200, 74, .88) 0%, rgba(212, 160, 23, .9) 52%, rgba(196, 146, 14, .92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 210, .28);
    overflow: hidden;
}
.vista-detalhes .cartao-pasta .pasta-bolso,
html.conversas-vista-detalhes .cartao-pasta .pasta-bolso {
    left: 8%;
    right: 8%;
    height: 60%;
    bottom: 28%;
    top: auto;
}
.vista-detalhes .cartao-pasta .criacao-corpo,
html.conversas-vista-detalhes .cartao-pasta .criacao-corpo {
    margin-top: 0;
    padding: 2px 0;
    flex: 1 1 auto;
    display: block;
    background: none;
    border-top: none;
    box-shadow: none;
}
.vista-detalhes .cartao-pasta .criacao-tipo,
html.conversas-vista-detalhes .cartao-pasta .criacao-tipo {
    color: var(--ciano);
}
.vista-detalhes .cartao-pasta .criacao-prompt,
html.conversas-vista-detalhes .cartao-pasta .criacao-prompt {
    color: var(--texto);
}
.vista-detalhes .cartao-pasta .criacao-data,
html.conversas-vista-detalhes .cartao-pasta .criacao-data {
    color: var(--texto-fraco);
}
.vista-detalhes .cartao-pasta .cartao-criacao-opcoes,
html.conversas-vista-detalhes .cartao-pasta .cartao-criacao-opcoes {
    background: var(--fundo-2);
    border-color: var(--borda);
    color: var(--texto);
}
.vista-detalhes .pasta-visual,
html.conversas-vista-detalhes .pasta-visual {
    inset: 3px 4px 2px;
}
.vista-detalhes .pasta-aba,
html.conversas-vista-detalhes .pasta-aba {
    height: 20%;
    width: 40%;
    border-radius: 6px 10px 0 0;
}
.vista-detalhes .pasta-aba::after,
html.conversas-vista-detalhes .pasta-aba::after {
    display: none;
}
.vista-detalhes .pasta-folha-ico,
html.conversas-vista-detalhes .pasta-folha-ico {
    font-size: .95rem;
}
.pasta-capa-form {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pasta-capa-preview {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
}
.pasta-capa-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pasta-capa-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pasta-capa-acoes .btn,
.pasta-capa-acoes label.btn {
    margin: 0;
    cursor: pointer;
}

/* Area da ferramenta */
.ferramenta-area {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}
.ferramenta-coluna-esq {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
/* Criação de imagens: coluna do modelo 60px mais estreita */
.ferramenta-area--imagem {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
.ferramenta-area--video {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}
/* Chat: coluna do modelo. 350px para o nome e o custo caberem sem o raio cair de linha. */
.ferramenta-area--chat {
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
}
.ferramenta-area--chat .ferramenta-lateral {
    padding: 18px;
}
.tts-voz-linha {
    display: flex;
    gap: 10px;
    align-items: center;
}
.tts-voz-linha .select-largo {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 36px 0 14px;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tts-voz-linha #btnOuvirVozTts {
    flex-shrink: 0;
    white-space: nowrap;
    height: 48px;
    min-width: 88px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-weight: 600;
}
.ferramenta-form, .ferramenta-lateral, .ferramenta-resultado {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px;
}
.ferramenta-principal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.ferramenta-resultado { min-height: 300px; }

/* Prompt + botao "Gerar com IA" no topo da coluna principal */
.ferramenta-prompt-topo {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    min-width: 0;
    max-width: 100%;
}
.ferramenta-prompt-topo textarea {
    flex: 1 1 0;
    min-width: 0;
    resize: none;
    min-height: 102px;   /* +50px vs antigo 52px */
    max-height: 302px;   /* cresce ~+200px com o texto */
    overflow-y: auto;
    line-height: 1.45;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, height .08s ease;
}
/* Texto para Voz: base ainda maior */
.ferramenta-prompt-topo--tts textarea {
    min-height: 152px;
    max-height: 352px;
}
.ferramenta-prompt-topo .ferramenta-prompt-acoes {
    justify-content: flex-end;
    padding-bottom: 2px;
}
.ferramenta-prompt-topo textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.22);
}
.ferramenta-prompt-topo .chat-prompt-campo {
    position: relative;
    flex: 1;
    min-width: 0;
    align-self: flex-start;
}
.ferramenta-prompt-topo .chat-prompt-campo textarea {
    display: block;
    width: 100%;
}
.ferramenta-prompt-topo .chat-prompt-campo.arrastando textarea {
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.22);
}
.ferramenta-prompt-topo .chat-prompt-campo--com-mais textarea {
    padding-bottom: 44px;
}
.ferramenta-prompt-topo .chat-prompt-campo--com-mic textarea {
    padding-right: 46px;
    padding-bottom: 44px;
}
.chat-prompt-anexo {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 5;
}
.chat-prompt-anexo[hidden] { display: none !important; }
.chat-prompt-mic {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-2, rgba(255,255,255,.04));
    color: var(--texto);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.chat-prompt-mic:hover {
    border-color: var(--primaria);
    color: #fff;
    background: rgba(0, 200, 83, .18);
}
.chat-prompt-mic.ouvindo {
    border-color: #f87171;
    color: #fff;
    background: rgba(248, 113, 113, .28);
    animation: chat-mic-pulso 1.1s ease-in-out infinite;
}
.chat-prompt-mic:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
}
@keyframes chat-mic-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .45); }
    50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}
.chat-mic-ajuda {
    position: fixed;
    inset: 0;
    z-index: 420;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.chat-mic-ajuda[hidden] { display: none !important; }
.chat-mic-ajuda-caixa {
    width: 100%;
    max-width: 440px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 24px 22px 18px;
    box-shadow: var(--sombra);
}
.chat-mic-ajuda-caixa h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}
.chat-mic-ajuda-caixa p,
.chat-mic-ajuda-caixa li {
    color: var(--texto-fraco);
    font-size: .92rem;
    line-height: 1.45;
}
.chat-mic-ajuda-caixa ol {
    margin: 10px 0 16px;
    padding-left: 1.2em;
}
.chat-mic-ajuda-caixa strong { color: var(--texto); }
.chat-mic-ajuda-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.chat-mic-ouvir {
    text-align: center;
    max-width: 380px;
    padding: 28px 22px 18px;
}
.chat-mic-halo {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 2px auto 14px;
}
.chat-mic-halo::before,
.chat-mic-halo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 83, .4);
    animation: chat-mic-anel 1.7s ease-out infinite;
}
.chat-mic-halo::after { animation-delay: .55s; }
.chat-mic-orbe {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #062d13;
    background: linear-gradient(135deg, #00c853, #22d3ee);
    box-shadow: 0 0 28px rgba(0, 200, 83, .42);
    transform: scale(calc(0.94 + var(--mic-nivel) * 0.22));
    transition: transform .08s linear;
}
.chat-mic-barras {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 34px;
    margin: 0 0 12px;
}
.chat-mic-barras span {
    width: 6px;
    border-radius: 99px;
    background: var(--primaria, #00c853);
    height: 28%;
    animation: chat-mic-barra .9s ease-in-out infinite;
}
.chat-mic-barras span:nth-child(2) { animation-delay: .12s; height: 55%; }
.chat-mic-barras span:nth-child(3) { animation-delay: .24s; height: 80%; }
.chat-mic-barras span:nth-child(4) { animation-delay: .12s; height: 48%; }
.chat-mic-barras span:nth-child(5) { animation-delay: .28s; height: 32%; }
.chat-mic-ouvir.tem-audio .chat-mic-barras span {
    animation: none;
    height: calc(16% + var(--mic-nivel, 0) * 84%);
}
.chat-mic-status {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto);
}
.chat-mic-live {
    min-height: 3.4em;
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    color: var(--texto);
    text-align: left;
    font-size: .95rem;
    line-height: 1.4;
}
.chat-mic-live:empty::before {
    content: 'Fale agora…';
    color: var(--texto-fraco);
}
.chat-mic-dica {
    margin: 0 0 16px;
    font-size: .86rem;
    color: var(--texto-fraco);
}
.chat-mic-ouvir .chat-mic-ajuda-acoes {
    justify-content: center;
}
@keyframes chat-mic-anel {
    0% { transform: scale(.72); opacity: .7; }
    100% { transform: scale(1.18); opacity: 0; }
}
@keyframes chat-mic-barra {
    0%, 100% { transform: scaleY(.55); }
    50% { transform: scaleY(1); }
}
.chat-prompt-mais {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-2, rgba(255,255,255,.04));
    color: var(--texto);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.chat-prompt-mais:hover,
.chat-prompt-mais[aria-expanded="true"] {
    border-color: var(--primaria);
    color: #fff;
    background: rgba(0, 200, 83, .18);
}
.chat-prompt-mais:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
}
.chat-prompt-mais-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    min-width: 198px;
    padding: 4px;
    background: var(--fundo-3, #1c1c1c);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.chat-prompt-mais-menu--baixo {
    bottom: auto;
    top: calc(100% + 6px);
}
.chat-prompt-mais-menu[hidden] { display: none; }
.chat-prompt-mais-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: .84rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.chat-prompt-mais-item[hidden] { display: none; }
.chat-prompt-mais-item:hover,
.chat-prompt-mais-item:focus-visible {
    background: rgba(255, 255, 255, .07);
    outline: none;
}
.ferramenta-prompt-acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 268px;
    width: max-content;
    max-width: min(360px, 48%);
}
.ferramenta-prompt-acoes .btn { width: 100%; }
.ferramenta-prompt-acoes .btn-repor-prompt {
    width: 100%;
    white-space: nowrap;
    font-size: .74rem;
    padding: 8px 6px;
}
.chat-prompt-linha-btns {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.chat-prompt-linha-btns .btn-repor-prompt {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
.ferramenta-prompt-acoes .btn-chat-layout,
.ferramenta-prompt-acoes .btn-prompt-salvo {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: auto;
    padding: 6px 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    transform: none;
}
.ferramenta-prompt-acoes .btn-prompt-salvo {
    padding: 0;
    font-weight: 600;
}
.ferramenta-prompt-acoes .btn-chat-layout:hover,
.ferramenta-prompt-acoes .btn-chat-layout:focus,
.ferramenta-prompt-acoes .btn-prompt-salvo:hover,
.ferramenta-prompt-acoes .btn-prompt-salvo:focus {
    transform: none;
}
.prompt-acoes-salvos {
    display: contents;
}
.ferramenta-prompt-acoes .btn-prompt-salvo svg {
    display: block;
    margin: 0 auto;
}

.prompt-salvo-caixa { max-width: 520px; }
.prompt-salvo-novo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 8px;
    flex-shrink: 0;
}
.prompt-salvo-novo .campo { margin-bottom: 0; }
.prompt-salvo-novo .campo span {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    color: var(--texto-fraco);
}
.prompt-salvo-divisor {
    margin: 4px 20px 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--borda);
    font-size: .82rem;
    color: var(--texto-fraco);
    flex-shrink: 0;
}
.prompt-salvo-lista {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 42vh;
    padding: 8px 12px 16px;
}
.prompt-salvo-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.prompt-salvo-item:hover {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .06);
}
.prompt-salvo-item strong {
    display: block;
    font-size: .92rem;
    margin-bottom: 4px;
}
.prompt-salvo-item .prompt-salvo-preview {
    display: block;
    font-size: .8rem;
    color: var(--texto-fraco);
    line-height: 1.35;
}
.prompt-salvo-item .prompt-salvo-meta {
    display: block;
    margin-top: 6px;
    font-size: .72rem;
    color: var(--texto-fraco);
}
.prompt-salvo-status {
    padding: 0 20px 12px;
    margin: 0;
    flex-shrink: 0;
}
.prompt-salvo-rodape {
    padding: 10px 20px 16px;
    margin: 0;
    border-top: 1px solid var(--borda);
    font-size: .85rem;
    flex-shrink: 0;
}
.prompt-salvo-vazio {
    padding: 24px 12px;
    margin: 0;
    text-align: center;
    color: var(--texto-fraco);
}

.prompts-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.prompts-cabecalho-texto {
    flex: 1 1 280px;
    min-width: 0;
}
.prompts-cabecalho h1 { margin-bottom: 6px; }
.painel-conteudo .prompts-cabecalho .subtitulo-pagina { margin-bottom: 0; }
.prompts-cabecalho > .btn {
    flex-shrink: 0;
    margin-top: 4px;
}
.prompts-pagina {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prompts-lista-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.prompts-lista-topo .secao-galeria-titulo { margin: 0; }
.prompts-servicos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.prompts-servico-chip {
    margin: 0;
    padding: 8px 10px;
    font-size: .82rem;
    gap: 8px;
    min-width: 0;
}
.prompts-servico-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#promptServicosCampo.is-off {
    opacity: .45;
    pointer-events: none;
}
.prompts-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.prompt-salvo-cartao {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 16px;
    min-width: 0;
}
.prompt-salvo-cartao--ativo { border-color: var(--primaria); }
.prompt-salvo-cartao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
}
.prompt-salvo-cartao-topo h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 140px;
}
.prompt-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto-fraco);
    font-size: .72rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prompt-chip.ativo {
    border-color: rgba(0, 200, 83, .45);
    background: rgba(0, 200, 83, .1);
    color: var(--primaria-2);
}
.prompt-salvo-preview-pagina {
    margin: 0;
    font-size: .88rem;
    color: var(--texto-fraco);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.prompt-salvo-cartao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.prompt-salvo-cartao-acoes .btn-sm {
    padding: 7px 12px;
    font-size: .8rem;
}
.prompt-salvo-form-inline { display: inline; margin: 0; }
.btn-prompt-excluir:hover {
    border-color: var(--vermelho);
    color: #ff8a8a;
}
.link-como-botao {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: var(--primaria-2);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prompt-form-caixa {
    max-width: 560px;
    width: 100%;
    max-height: min(88vh, 820px);
}
.prompt-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.prompt-form-corpo {
    padding: 16px 20px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prompt-form-corpo .campo { margin-bottom: 14px; }
.prompt-form-corpo textarea {
    min-height: 140px;
    resize: vertical;
}
.prompt-form-corpo .opcao-switch--linha {
    margin-bottom: 14px;
    white-space: normal;
}
.prompt-form-rodape {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--borda);
    flex-shrink: 0;
}
.prompt-form-rodape .btn { min-width: 120px; }
.campo-label-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.campo-label-linha label {
    margin-bottom: 0;
}
/* Contador de custo ao lado de "Modelo de IA" — discreto no tema escuro */
.custo-lateral {
    flex-shrink: 0;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--primaria-2);
    background: rgba(0, 200, 83, .12);
    border: 1px solid rgba(0, 200, 83, .32);
    padding: 5px 12px;
    border-radius: 9px;
    line-height: 1.2;
    white-space: nowrap;
}
.tts-contador-chars {
    font-size: .82rem;
    font-weight: 500;
    color: var(--texto-fraco);
    white-space: nowrap;
    line-height: 1.2;
    padding-right: 2px;
}
.tts-contador-chars.excedido {
    color: var(--vermelho, #f87171);
    font-weight: 700;
}
.tts-contador-chars.contador-limite {
    font-size: .9rem;
    font-weight: 700;
    color: var(--texto);
    letter-spacing: .01em;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--fundo-2, rgba(255,255,255,.06));
    border: 1px solid var(--borda, rgba(255,255,255,.1));
}
.tts-contador-chars.contador-limite.excedido {
    color: var(--vermelho, #f87171);
    border-color: var(--vermelho, #f87171);
    background: rgba(248, 113, 113, .12);
}
.campo-contador-linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}
.campo-contador-linha .dica {
    flex: 1;
    min-width: 0;
    margin: 8px 0 0 !important;
}
.campo-contador-linha:has(.tts-contador-chars:not([hidden])) .dica {
    padding-right: 12px;
    border-right: 1px solid var(--borda, rgba(255,255,255,.12));
}
.campo-contador-linha .tts-contador-chars {
    margin-top: 8px;
    flex-shrink: 0;
}
.ferramenta-resultado .resultado-vazio {
    text-align: center;
    color: var(--texto-fraco);
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.conversa-vazio-icone {
    font-size: 1.85rem;
    line-height: 1;
    margin-bottom: 12px;
}
.resultado-texto {
    white-space: pre-wrap;
    background: var(--fundo-2);
    padding: 18px;
    border-radius: 10px;
    font-size: .95rem;
}
.resultado-imagem img { border-radius: 10px; }

.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   SELETORES VISUAIS DA FERRAMENTA DE IMAGEM
   ------------------------------------------------------------ */

/* Grade de proporcoes com icones visuais (compacta) */
.grade-ratios {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ratio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 50px;
    padding: 7px 2px 6px;
    background: var(--fundo-2);
    border: 1.5px solid var(--borda);
    border-radius: 9px;
    cursor: pointer;
    color: var(--texto-fraco);
    transition: border-color .15s, color .15s, background .15s;
}
.ratio-btn:hover { border-color: rgba(0, 200, 83, .45); color: var(--texto); }
.ratio-btn.ativo {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .1);
    color: var(--primaria-2);
}
.ratio-icone {
    display: block;
    border: 2px solid currentColor;
    border-radius: 3px;
}
.ratio-auto-icone {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    font-size: .68rem;
    font-weight: 700;
}
.ratio-rotulo { font-size: .68rem; font-weight: 600; }
.ratio-btn.oculto { display: none; }

/* ------------------------------------------------------------
   DROPDOWN CUSTOMIZADO DE MODELOS
   ------------------------------------------------------------ */
.dropdown-modelo { position: relative; }

.dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.dropdown-btn:hover, .dropdown-modelo.aberto .dropdown-btn {
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18);
}
.dropdown-btn .dd-nome { flex: 1; text-align: left; font-weight: 600; }
.dropdown-btn .dd-custo, .dd-custo {
    font-size: .68rem;
    color: var(--texto-fraco);
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    max-width: 62%;
}
.dropdown-btn .dd-seta { color: var(--texto-fraco); font-size: .8rem; transition: transform .15s; }
.dropdown-modelo.aberto .dd-seta { transform: rotate(180deg); }

.dropdown-lista {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 60;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.dropdown-modelo.aberto .dropdown-lista { display: block; }

/* No chat o seletor de modelo é o primeiro passo: um pouco mais de peso visual */
.dropdown-modelo--destaque .dropdown-btn {
    padding: 8px 18px;
    border-width: 1.5px;
    border-color: rgba(0, 200, 83, .45);
    background: linear-gradient(180deg, rgba(0, 200, 83, .12), var(--fundo-2) 70%);
    box-shadow: 0 0 0 1px rgba(0, 200, 83, .12), 0 8px 22px rgba(0, 0, 0, .25);
    font-size: 1rem;
    /* Altura de 2 linhas do nome, mesmo quando o modelo cabe em 1 */
    min-height: calc(19px + 2.625rem);
    align-items: center;
}
.dropdown-modelo--destaque .dropdown-btn .dd-nome {
    font-size: 1.05rem;
    line-height: 1.25;
}
.dropdown-modelo--destaque .dropdown-btn:hover,
.dropdown-modelo--destaque.aberto .dropdown-btn {
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, .22), 0 10px 26px rgba(0, 0, 0, .3);
}

.dd-opcao {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.dd-opcao:last-child { border-bottom: none; }
.dd-opcao:hover { background: rgba(0, 200, 83, .08); }
.dd-opcao.selecionada { background: rgba(0, 200, 83, .13); }
.dd-opcao-nome { flex: 1; font-weight: 600; }
.dd-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
    border: 1px solid var(--borda);
}
.campo-label-com-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.campo-label-com-logo label {
    margin-bottom: 0;
}
.campo-label-com-logo .dd-logo,
.campo-label-linha > .dd-logo {
    width: 20px;
    height: 20px;
}
.dd-opcao-custo {
    font-size: .68rem;
    color: var(--texto-fraco);
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    max-width: 58%;
}
/* Chat: custo do dropdown em duas linhas, raio na mesma linha de "1 pto". */
.ferramenta-area--chat .dd-opcao-custo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
    line-height: 1.2;
}
.ferramenta-area--chat .dd-opcao-custo-pto {
    white-space: nowrap;
}
.ferramenta-area--chat .dd-opcao-nome {
    min-width: 0;
}

/* Modelo unico (quando so ha 1) */
.modelo-unico {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
}
.modelo-unico .dd-nome { flex: 1; font-weight: 600; }

/* Botao gerar: pontos em destaque à esquerda */
#btnGerar {
    justify-content: flex-start;
    gap: 12px;
    padding-left: 14px;
    padding-right: 18px;
    max-width: 100%;
    min-width: 0;
}
#btnGerar .btn-custo,
#btnEnviarChat .btn-custo {
    order: -1;
    flex-shrink: 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: 1;
    color: #eafff2;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: none;
    padding: 6px 12px;
    border-radius: 9px;
    line-height: 1.15;
    white-space: nowrap;
}
#btnEnviarChat .btn-custo { font-size: .78rem; }
#btnEnviarChat .btn-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#btnGerar .btn-rotulo {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-cadeado {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .95;
}
.btn-cadeado svg { display: block; }

.aviso-custo-edicao {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .86rem;
    line-height: 1.4;
    color: #fde68a;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
}
.aviso-custo-edicao[hidden] { display: none !important; }

/* ------------------------------------------------------------
   REFERENCIAS MULTIPLAS (upload + picker)
   ------------------------------------------------------------ */
.refs-area {
    border: 1.5px dashed rgba(255, 255, 255, .16);
    border-radius: 12px;
    padding: 12px;
    background: var(--fundo-2);
    transition: border-color .15s, background .15s;
}
.refs-area.arrastando {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .07);
}
.imagens-video-papeis .campo-papel-video + .campo-papel-video { margin-top: 14px; }
.imagens-video-papeis > .dica { margin: 12px 0 0; }
.refs-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 8px 4px 4px;
}
.refs-grade:empty { display: none; margin-bottom: 0; padding: 0; }
.ref-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: visible;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
}
.ref-thumb img,
.ref-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.ref-thumb img { cursor: zoom-in; }
.ref-thumb--video .ref-arquivo-icone { display: none; }
.ref-thumb--carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
}
.ref-thumb--carregando .spinner {
    width: 22px;
    height: 22px;
    border-width: 3px;
    border-top-color: var(--primaria);
}
.ref-thumb--carregando .ref-thumb-status {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--texto-fraco);
}
.ref-thumb--arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    text-align: center;
    cursor: default;
}
.ref-thumb--arquivo.ref-thumb--clicavel {
    cursor: zoom-in;
}
.ref-thumb--arquivo .ref-arquivo-icone {
    font-size: 1.45rem;
    line-height: 1;
}
.ref-thumb--arquivo .ref-arquivo-ext {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--texto);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.refs-area--carregando {
    border-color: var(--primaria);
}
.ref-thumb .ref-remover {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    padding: 0;
}
.ref-thumb .ref-remover:hover,
.ref-thumb .ref-remover:focus-visible {
    background: #dc2626;
    transform: scale(1.08);
}
.refs-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}
.refs-acoes[hidden],
.refs-acoes > [hidden] {
    display: none !important;
}
.refs-acoes > .dropzone.dropzone-mini,
.refs-acoes > .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: min(100%, 148px);
    min-height: 40px;
    height: auto;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone-mini {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: var(--fundo-3);
    color: var(--texto-fraco);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.dropzone-mini:hover { border-color: var(--primaria); color: var(--texto); }

/* ------------------------------------------------------------
   Restauração de fotos antigas — dropzone em destaque (hero)
   ------------------------------------------------------------ */
.refs-area-restauracao {
    border: 2px dashed rgba(0, 200, 83, .45);
    border-radius: 16px;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 200, 83, .10), transparent 70%),
        var(--fundo-2);
}
.refs-area-restauracao.arrastando {
    border-color: var(--primaria);
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 200, 83, .20), transparent 70%),
        rgba(0, 200, 83, .08);
    box-shadow: 0 0 0 4px rgba(0, 200, 83, .12);
}
.dropzone-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 170px;
    padding: 26px 18px;
    border: 2px dashed rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    color: var(--texto);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.dropzone-hero:hover,
.refs-area-restauracao.arrastando .dropzone-hero {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .07);
    transform: scale(1.005);
}
.dropzone-hero-icone { font-size: 2.4rem; line-height: 1; }
.dropzone-hero-titulo { font-size: 1.05rem; font-weight: 700; }
.dropzone-hero-sub { font-size: .85rem; color: var(--texto-fraco); }
.dropzone-hero-sub strong { color: var(--primaria); font-weight: 600; }
.refs-acoes-centro { justify-content: center; margin-top: 12px; }
.refs-acoes-centro > .btn { flex: 0 1 auto; min-width: 150px; }
/* Foto anexada: esconde o convite e mostra a miniatura em destaque */
.refs-area-restauracao.com-ref .dropzone-hero { display: none; }
.refs-area-restauracao .refs-grade { justify-content: center; margin-bottom: 0; }
.refs-area-restauracao .refs-grade:not(:empty) { margin-bottom: 12px; }
.refs-area-restauracao .ref-thumb {
    width: 100%;
    max-width: min(300px, 100%);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    border: 2px solid var(--primaria);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    overflow: visible;
}
.refs-area-restauracao .ref-thumb img,
.refs-area-restauracao .ref-thumb video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, .35);
}
.refs-area-restauracao .ref-thumb--arquivo,
.refs-area-restauracao .ref-thumb--carregando {
    width: 160px;
    max-width: 160px;
    height: 160px;
    aspect-ratio: 1;
}

/* Dicas da restauração */
.restauracao-dicas {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .03);
}
.restauracao-dicas-titulo {
    margin: 0 0 10px;
    color: var(--texto);
    font-size: .9rem;
    font-weight: 700;
}
.restauracao-dicas-lista {
    margin: 0;
    padding-left: 18px;
    color: var(--texto-fraco);
    font-size: .83rem;
    line-height: 1.55;
}
.restauracao-dicas-lista li { margin-bottom: 6px; }
.restauracao-dicas-lista li:last-child { margin-bottom: 0; }
.restauracao-dicas-lista strong { color: var(--texto); }

/* Modal do picker de criacoes */
.picker-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.picker-modal[hidden] { display: none !important; }
.picker-caixa {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 16px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.picker-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}
.picker-topo h3 { font-size: 1.05rem; }
.picker-topo button {
    background: none;
    border: none;
    color: var(--texto-fraco);
    font-size: 1.1rem;
    cursor: pointer;
}
.picker-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}
.picker-dica-limite {
    margin: 0;
    padding: 8px 20px 0;
    flex-shrink: 0;
}
.picker-busca {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .88rem;
    font-family: inherit;
}
.picker-busca:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, .18);
}
.picker-paginacao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.picker-paginacao .btn {
    padding: 6px 12px;
    font-size: .9rem;
    min-width: 36px;
    transform: none;
}
.picker-paginacao[hidden] { display: none !important; }
.picker-pagina-info {
    font-size: .78rem;
    color: var(--texto-fraco);
    white-space: nowrap;
    min-width: 3.2em;
    text-align: center;
}
.picker-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: min-content;
    gap: 10px;
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    align-items: start;
}
.picker-item {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--fundo-2);
    color: inherit;
    font: inherit;
    transition: border-color .15s;
}
.picker-item::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.picker-item:hover { border-color: var(--primaria); z-index: 1; }
.picker-item--ativo { border-color: var(--primaria); }
.picker-item img,
.picker-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.picker-item-arquivo::before {
    display: none;
}
.picker-grade-arquivos {
    grid-template-columns: 1fr;
}
.picker-grade:has(.picker-item-arquivo) .picker-item-arquivo {
    grid-column: 1 / -1;
}
.picker-item-arquivo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    text-align: left;
    overflow: hidden;
}
.picker-arquivo-icone {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}
.picker-arquivo-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    color: var(--texto);
}
.picker-item-video .midia-selo-video {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: .7rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.turno-video-par {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.turno-video-par .chip { display: inline-block; margin-bottom: 8px; }

.turno-entradas {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.turno-entradas-rotulo {
    font-size: .65rem;
    color: var(--texto-fraco);
    letter-spacing: .02em;
}
.turno-entradas-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.turno-entrada-thumb {
    position: relative;
    width: 61px;   /* ~15% menor que 72px */
    height: 61px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.turno-entrada-thumb:hover {
    border-color: var(--ciano, #22d3ee);
    transform: scale(1.04);
}
.turno-entrada-thumb video,
.turno-entrada-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.turno-entrada-selo {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: .65rem;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 1px 5px;
    border-radius: 5px;
}

/* Pills segmentadas (resolucao) */
.pills {
    display: flex;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.pill {
    flex: 1;
    padding: 10px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--texto-fraco);
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.pill small { display: block; font-size: .68rem; font-weight: 500; opacity: .8; margin-top: 2px; }
.pill:hover { color: var(--texto); }
.pill.ativo {
    background: var(--gradiente);
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 175, 73, .26);
    text-shadow: var(--sombra-texto-botao);
}
.pill.oculto { display: none; }

/* Dropzone elegante para upload */
.dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1.5px dashed rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: var(--fundo-2);
    cursor: pointer;
    color: var(--texto-fraco);
    font-size: .9rem;
    transition: border-color .15s, color .15s, background .15s;
    text-align: center;
}
.refs-acoes .dropzone.dropzone-mini {
    display: inline-flex;
    padding: 8px 12px;
    border-style: solid;
    border-width: 1px;
    border-radius: 9px;
    background: var(--fundo-3);
    font-size: calc(.82rem - 1pt);
}
.refs-acoes > .btn {
    font-size: calc(.82rem - 1pt);
}
/* Com 1 ou 3 botões, o último ocupa a linha inteira (evita faixa estreita) */
.refs-acoes > :last-child:nth-child(odd) {
    flex: 1 1 100%;
}
.refs-acoes.refs-acoes-criacoes-topo > :first-child {
    flex: 1 1 100%;
}
.refs-acoes.refs-acoes-criacoes-topo > :not(:first-child) {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}
.ferramenta-area--chat #refsAcoesChat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ferramenta-area--chat #refsAcoesChat > .dropzone.dropzone-mini,
.ferramenta-area--chat #refsAcoesChat > .btn {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
}
.dropzone:hover { border-color: var(--primaria); color: var(--texto); }
.dropzone.tem-arquivo { border-style: solid; border-color: var(--primaria); }
.dropzone-icone { font-size: 1.2rem; }
.dropzone-preview {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
}
.dropzone-preview.dropzone-preview-lg {
    width: 88px;
    height: 88px;
}
.dropzone.tem-arquivo .dropzone-icone {
    display: none;
}
.dropzone.arrastando {
    border-color: var(--primaria);
    background: rgba(34, 197, 94, .06);
}
video.dropzone-preview {
    background: #000;
}

/* ------------------------------------------------------------
   LIGHTBOX (visualizar criacao + download + continuar editando)
   ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}
.lightbox.aberto { display: flex; }
.lightbox img {
    max-width: min(90vw, 900px);
    max-height: 76vh;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.lightbox-acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lightbox-fechar {
    position: absolute;
    top: 18px; right: 22px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
}
.cartao-criacao.clicavel { cursor: zoom-in; }

/* ------------------------------------------------------------
   CONVERSA CONTINUA (thread de criacao de imagens)
   ------------------------------------------------------------ */
.conversa-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.conversa-barra--esquerda {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 8px 12px;
}
.conversa-barra-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.conversa-barra--esquerda .conversa-barra-info {
    flex: 1;
    gap: 2px;
}
.conversa-barra-nome {
    color: var(--texto);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.conversa-barra--esquerda .conversa-barra-nome {
    font-size: .84rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.conversa-barra-acoes {
    display: flex;
    justify-content: flex-end;
}
.conversa-barra--esquerda .conversa-barra-acoes {
    flex-shrink: 0;
    margin-left: auto;
}
.btn-mais-acao,
.editor-btn-novo-projeto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 8px;
}
.conversa-barra--esquerda .btn-xs {
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 600;
    width: auto;
    white-space: nowrap;
}
.conversa-barra-texto {
    color: var(--texto-fraco);
    font-size: .82rem;
}
.conversa-barra--esquerda .conversa-barra-texto {
    font-size: .75rem;
    line-height: 1.2;
}
.conversa-barra-nome-linha {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.conversa-barra-nome-linha .conversa-barra-nome { flex: 1; min-width: 0; }
.btn-renomear-conversa {
    flex-shrink: 0;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto-fraco);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
}
.conversa-barra--esquerda .btn-renomear-conversa {
    width: 24px;
    height: 24px;
    font-size: .8rem;
    border-radius: 6px;
}
.btn-renomear-conversa:hover {
    border-color: var(--primaria);
    color: var(--texto);
}
.conversa-renomear-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.conversa-renomear-form[hidden] { display: none !important; }
.conversa-renomear-form input[type="text"] {
    flex: 1;
    min-width: 140px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .88rem;
    font-family: inherit;
}
.conversa-barra--chat {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--borda);
    border-radius: var(--raio) var(--raio) 0 0;
    background: transparent;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
}
.conversa-barra--chat .conversa-barra-acoes {
    flex-shrink: 0;
    padding-top: 2px;
}
.conversa-barra--chat .btn-xs {
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.thread-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--borda);
    color: var(--texto-fraco);
    font-size: .81rem; /* ~10% menor */
}

.thread-turnos {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-height: 93vh; /* ~50% a mais que 62vh */
    overflow-y: auto;
    padding-right: 6px;
}

.thread-turno {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.turno-prompt {
    align-self: flex-end;
    max-width: 92%;
    background: linear-gradient(135deg, rgba(0, 200, 83, .16), rgba(34, 211, 238, .1));
    border: 1px solid rgba(0, 200, 83, .3);
    border-radius: 14px 14px 4px 14px;
    padding: 12px 16px;
}
.turno-prompt-topo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.turno-texto {
    font-size: .84rem; /* ~10% menor */
    display: block;
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.btn-copiar-prompt {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -2px -4px 0 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s, background .15s, border-color .15s, color .15s;
}
.btn-copiar-prompt svg {
    display: block;
}
.btn-copiar-prompt .icone-ok {
    display: none;
}
.btn-copiar-prompt:hover,
.btn-copiar-prompt:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .08);
    border-color: var(--borda);
    color: var(--texto);
    outline: none;
}
.btn-copiar-prompt.copiado {
    opacity: 1;
    color: var(--verde, #00c853);
}
.btn-copiar-prompt.copiado .icone-copiar {
    display: none;
}
.btn-copiar-prompt.copiado .icone-ok {
    display: block;
}
.turno-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.chip {
    font-size: .63rem; /* ~10% menor */
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--texto-fraco);
    border: 1px solid var(--borda);
}

.turno-imagem {
    align-self: flex-start;
    max-width: 92%;
}
.turno-imagem img {
    border-radius: 14px 14px 14px 4px;
    border: 1px solid var(--borda);
    max-height: 357px; /* ~15% menor que 420px */
    transition: transform .2s, box-shadow .2s;
}
.turno-imagem a:hover img {
    transform: scale(1.01);
    box-shadow: 0 10px 34px rgba(0, 200, 83, .22);
}
.turno-data {
    display: block;
    font-size: .65rem; /* ~10% menor */
    color: var(--texto-fraco);
    margin-top: 6px;
}

/* ------------------------------------------------------------
   FERRAMENTA DE VIDEO
   ------------------------------------------------------------ */

/* Duracao: select ocupando a largura do campo (a lista de opcoes muda
   conforme o modelo, por isso nao cabia uma grade de botoes fixa).
   O tamanho, a borda e o fundo vem de ".campo select"; aqui so entra a seta
   propria, porque a nativa nao segue a cor do tema em todo navegador.
   O seletor precisa do ".campo" para vencer a especificidade daquela regra. */
.campo select.select-largo {
    cursor: pointer;
    font-weight: 500;
    appearance: none;
    padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-fraco) 50%),
                      linear-gradient(135deg, var(--texto-fraco) 50%, transparent 50%);
    background-position: calc(100% - 19px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.campo select.select-largo:hover { border-color: var(--primaria); }
.select-largo option {
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .95rem;
    font-weight: 500;
    padding: 10px 12px;
}

/* Stepper de duração (Sonilo): − valor + */
.duracao-stepper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 220px;
}
.duracao-stepper-btn {
    width: 44px;
    flex-shrink: 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    color: var(--texto);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.duracao-stepper-btn:hover {
    border-color: var(--primaria);
    color: var(--primaria);
}
.duracao-stepper-btn:active {
    background: var(--fundo-3, rgba(255,255,255,.08));
}
.duracao-stepper-input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    color: var(--texto);
    padding: 10px 8px;
    -moz-appearance: textfield;
}
.duracao-stepper-input::-webkit-outer-spin-button,
.duracao-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.duracao-stepper-input:focus {
    outline: none;
    border-color: var(--primaria);
}

/* Interruptor / checkbox de opção (trilha de áudio, busca na web…) */
label.opcao-switch,
.opcao-switch {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    color: var(--texto-fraco);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.3;
}
.opcao-switch:hover { border-color: var(--primaria); color: var(--texto); }
.opcao-switch:has(input:checked) {
    border-color: rgba(0, 200, 83, .45);
    color: var(--texto);
    background: rgba(0, 200, 83, .08);
}
.opcao-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.opcao-switch input[type="checkbox"]::after {
    content: '';
    width: 9px;
    height: 5px;
    margin-top: -1px;
    border: 2px solid #04150a;
    border-top: none;
    border-right: none;
    transform: rotate(-48deg);
    opacity: 0;
}
.opcao-switch input[type="checkbox"]:checked {
    border-color: var(--primaria);
    background: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, .2);
}
.opcao-switch input[type="checkbox"]:checked::after { opacity: 1; }
.opcao-switch input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
}
.opcao-switch--linha {
    width: 100%;
    padding: 10px 12px;
    gap: 10px;
    font-size: .88rem;
    white-space: nowrap;
}
.opcao-switch--linha .opcao-switch-icone {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dropzone-acoes { margin-top: 8px; }

/* Player na conversa */
.turno-video {
    align-self: flex-start;
    max-width: 92%;
}
.turno-audio {
    align-self: flex-start;
    max-width: 92%;
    width: 100%;
}
.turno-audio audio {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-bottom: 8px;
}
.midia-audio-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 110px;
    font-size: 2rem;
    background: rgba(34, 211, 238, .08);
}
.criacao-midia .midia-audio-placeholder { min-height: 140px; }
.galeria-imagens--audio {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding-top: 10px;
}
.galeria-item-audio {
    text-decoration: none;
    color: inherit;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font: inherit;
}
.galeria-item-audio:hover {
    transform: none;
}
.galeria-audio-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    font-size: 1.7rem;
    background: rgba(34, 211, 238, .08);
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}
.galeria-imagens--audio .galeria-item-audio .galeria-audio-icone {
    background: rgba(167, 139, 250, .1);
}
.galeria-audio-corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 14px;
    flex: 1;
}
.galeria-audio-prompt {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--texto);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.galeria-audio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.galeria-audio-chip {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--texto-fraco);
    background: var(--fundo, rgba(0,0,0,.2));
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 3px 8px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.galeria-audio-data {
    font-size: .72rem;
    color: var(--texto-fraco);
    margin-top: auto;
}
.turno-video video {
    display: block;
    width: 100%;
    max-height: 374px; /* ~15% menor que 440px */
    border-radius: 14px 14px 14px 4px;
    border: 1px solid var(--borda);
    background: #000;
}
.turno-video-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.turno-video-acoes .turno-data { margin-top: 0; }

/* Enquanto o provedor renderiza o video */
.turno-video.video-processando {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    padding: 20px 22px;
    border: 1px solid rgba(34, 211, 238, .3);
    border-radius: 14px;
    background: rgba(34, 211, 238, .07);
}
.turno-video.video-processando .spinner { flex-shrink: 0; width: 26px; height: 26px; border-width: 3px; }
.turno-video.video-processando strong { display: block; font-size: .86rem; }

.aviso-falha {
    width: 100%;
    max-width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: var(--fundo-2, rgba(255, 255, 255, .04));
}
.aviso-falha-titulo {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--texto);
}
.aviso-falha-texto {
    margin: 6px 0 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--texto-fraco);
    font-weight: 400;
}
.aviso-falha-ref {
    margin: 8px 0 0;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--texto-fraco);
    opacity: .75;
}
.turno-video.video-erro {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

/* Miniatura de video nos cartoes e na galeria */
.criacao-midia video,
.galeria-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.cartao-criacao .criacao-midia video {
    object-fit: contain;
    background: transparent;
}
.criacao-midia, .galeria-item { position: relative; }
.midia-selo-video {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .62rem;
    pointer-events: none;
}

.lightbox video {
    max-width: min(92vw, 960px);
    max-height: 76vh;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.lightbox-audio {
    width: min(92vw, 480px);
    padding: 36px 28px 28px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
    text-align: center;
}
.lightbox-audio-icone {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 10px;
}
.lightbox-audio-titulo {
    margin: 0 0 18px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
}
.lightbox-audio audio {
    width: 100%;
    display: block;
}
.lightbox-pdf {
    width: min(92vw, 920px);
    height: min(78vh, 880px);
    border: 0;
    border-radius: 14px;
    background: #111;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.lightbox-titulo {
    margin: 0;
    max-width: min(92vw, 920px);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
}

.carregando-central {
    text-align: center;
    padding: 60px;
    color: var(--texto-fraco);
}
.carregando-central .spinner { width: 34px; height: 34px; border-width: 4px; margin-bottom: 14px; }

/* ------------------------------------------------------------
   CHAT COM IA
   ------------------------------------------------------------ */
/* Specs do modelo escolhido — pílulas curtas em vez de lista de rótulos */
.campo .dica-token {
    font-size: .68rem;
    line-height: 1.35;
    margin-top: 8px;
    margin-bottom: 0;
}
.modelo-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.modelo-specs .spec {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .04);
    font-size: calc(.70rem - 1pt);
    color: var(--texto-fraco);
    line-height: 1.3;
}
.modelo-specs .spec strong { color: var(--texto); font-weight: 600; }
.modelo-specs .spec-icone { font-size: calc(.78rem - 1pt); }
.modelo-specs .spec-sub { opacity: .8; }

/* Documento/áudio anexado */
.doc-escolhido {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--primaria);
    border-radius: 10px;
    background: rgba(0, 200, 83, .08);
    font-size: .84rem;
}
.doc-escolhido[hidden] { display: none; }
.doc-icone { font-size: 1.1rem; flex-shrink: 0; }
.doc-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-remover {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--texto-fraco);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.doc-remover:hover { color: var(--perigo, #ff5252); }

/* Níveis de raciocínio: até 6 opções na coluna estreita, então quebram linha */
#pillsEsforco,
#pillsVersao { flex-wrap: wrap; }
#pillsEsforco .pill,
#pillsVersao .pill {
    flex: 1 1 auto;
    min-width: 78px;
}

/* Cartao de conversa: icone em cima (como as outras galerias), mas baixo */
.cartao-conversa {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.cartao-conversa:hover {
    border-color: var(--primaria);
    background: var(--fundo-2);
}
.cartao-conversa.atual {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .1);
}
.cartao-conversa .conversa-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    background: rgba(34, 211, 238, .1);
    font-size: 1.55rem;
}
.cartao-conversa .criacao-corpo {
    flex: 1;
    min-width: 0;
    padding: 12px 14px 14px;
}
.cartao-conversa .criacao-prompt {
    margin: 0 0 4px;
    color: var(--texto);
    font-weight: 600;
    -webkit-line-clamp: 2;
}
.carrossel-trilho .cartao-conversa {
    flex: 0 0 250px;
    width: 250px;
    min-width: 250px;
}

.chat-caixa {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    min-height: calc(144vh - 200px);
    height: auto;
}

/* Prompt embaixo: conversa mais baixa para o campo não ir para o fim da página */
.ferramenta-principal.chat-layout--prompt-baixo .chat-caixa,
.ferramenta-principal.chat-layout--prompt-baixo .ferramenta-resultado { order: 1; }
.ferramenta-principal.chat-layout--prompt-baixo .ferramenta-prompt-topo {
    order: 2;
    flex-shrink: 0;
    position: sticky;
    bottom: 10px;
    z-index: 3;
}
.ferramenta-principal.chat-layout--prompt-baixo .chat-caixa,
.ferramenta-principal.chat-layout--prompt-baixo .ferramenta-resultado {
    min-height: 0;
    height: min(calc(62vh + 40px), 680px);
    max-height: min(calc(62vh + 40px), 680px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* TTS / música / efeitos: prompt mais alto, conversa 20px menor com o campo embaixo */
.ferramenta-principal--tts.chat-layout--prompt-baixo .ferramenta-resultado {
    height: min(calc(56vh + 45px), 605px);
    max-height: min(calc(56vh + 45px), 605px);
}
.ferramenta-principal.chat-layout--prompt-baixo .chat-mensagens,
.ferramenta-principal.chat-layout--prompt-baixo .thread-turnos {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: auto;
}
.ferramenta-principal.chat-layout--prompt-baixo .thread-turnos {
    max-height: none;
}
.ferramenta-principal.chat-layout--prompt-baixo .resultado-vazio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Conversa + prompt embaixo: preenchem a altura da tela (Chat e demais ferramentas) */
@media (min-width: 1181px) {
    .ferramenta-principal.chat-layout--prompt-baixo {
        min-height: calc(100vh - 86px);
        min-height: calc(100dvh - 86px);
    }
    .ferramenta-principal.chat-layout--prompt-baixo .chat-caixa,
    .ferramenta-principal.chat-layout--prompt-baixo .ferramenta-resultado {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    .ferramenta-principal--tts.chat-layout--prompt-baixo .ferramenta-resultado {
        height: auto;
        max-height: none;
    }
    .ferramenta-principal.chat-layout--prompt-baixo .ferramenta-prompt-topo {
        position: sticky;
        bottom: 8px;
    }
    /* Chat: a conversa não passa da tela; o prompt fica embaixo e a rolagem é da caixa */
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo {
        height: calc(100dvh - 96px);
        max-height: calc(100dvh - 96px);
        min-height: 0;
        overflow: hidden;
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .chat-caixa {
        flex: 1 1 auto;
        height: auto;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .chat-mensagens {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .ferramenta-prompt-topo {
        position: static;
        flex-shrink: 0;
    }
}

.chat-mensagens {
    min-height: calc(90vh - 200px);
    overflow: visible;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-vazio {
    margin: auto;
    text-align: center;
    color: var(--texto-fraco);
    max-width: 420px;
    padding: 8px 12px 16px;
}
.chat-vazio .icone { font-size: 1.85rem; display: block; margin-bottom: 12px; }
.chat-vazio-robo {
    --cv-halo: rgba(0, 200, 83, .16);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
}
.chat-vazio-robo::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cv-halo) 0%, transparent 70%);
    animation: chat-vazio-halo 3.4s ease-in-out infinite;
}
.chat-vazio-robo-svg {
    position: relative;
    width: 56px;
    height: 56px;
    color: rgba(0, 230, 118, .7);
}
.chat-vazio-robo--robo {
    --cv-halo: rgba(0, 230, 118, .24);
    width: 72px;
    height: 72px;
}
.chat-vazio-robo--robo .chat-vazio-robo-svg {
    width: 50px;
    height: 50px;
    color: #34d399;
}
.chat-vazio-robo--robo::before {
    width: 54px;
    height: 54px;
}
.chat-vazio-cabeca {
    fill: #161625;
    stroke: currentColor;
    stroke-width: 1.6;
}
.chat-vazio-visor {
    fill: #05060d;
    stroke: rgba(52, 211, 153, .28);
    stroke-width: 1;
}
.chat-vazio-olhos circle,
.chat-vazio-olhos rect { fill: var(--primaria, #00c853); }
.chat-vazio-olho-brilho { fill: #ecfdf5; }
.chat-vazio-orelha-in { fill: var(--primaria, #00c853); opacity: .7; }
.chat-vazio-antena { stroke: currentColor; }
.chat-vazio-led { fill: var(--primaria, #00c853); }
.chat-vazio-boca { stroke: rgba(52, 211, 153, .7); fill: none; }
.chat-vazio-orelha,
.chat-vazio-corpo,
.chat-vazio-braco {
    fill: #12121e;
    stroke: currentColor;
    stroke-width: 1.5;
}
.chat-vazio-pescoco {
    fill: #0b0b14;
    stroke: currentColor;
    stroke-width: 1.25;
}
.chat-vazio-peito {
    fill: var(--primaria, #00c853);
    animation: chat-vazio-led 2.3s ease-in-out infinite .35s;
}
.chat-vazio-led-anel {
    fill: none;
    stroke: var(--primaria, #00c853);
    stroke-width: 1.1;
    transform-box: fill-box;
    transform-origin: center;
    animation: chat-vazio-anel 2.6s ease-out infinite;
}
.chat-vazio-visor-scan {
    fill: rgba(52, 211, 153, .42);
    animation: chat-vazio-scan 3.1s ease-in-out infinite;
}
.cv-moldura, .cv-folha, .cv-filme, .cv-fone {
    fill: #161625;
    stroke: currentColor;
    stroke-width: 1.6;
}
.cv-moldura--tracejada { stroke-dasharray: 5 4; }
.cv-paisagem, .cv-claquete-risco, .cv-arco, .cv-onda, .cv-nota-haste, .cv-nota-bandeira,
.cv-flash, .cv-corte, .cv-seta, .cv-dobra, .cv-linha {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cv-claquete { fill: #161625; stroke: currentColor; stroke-width: 1.6; }
.cv-play, .cv-sol, .cv-estrela, .cv-nota-bola, .cv-eq, .cv-lente-in, .cv-perfuracao {
    fill: var(--primaria, #00c853);
    stroke: none;
}
.cv-lente { fill: #0b0b14; stroke: currentColor; stroke-width: 1.6; }
.cv-spark { animation: chat-vazio-led 2.4s ease-in-out infinite; }
.cv-spark--2 { animation-delay: .8s; }
.cv-onda--2 { animation: chat-vazio-led 2.6s ease-in-out infinite .4s; opacity: .55; }
.cv-eq--1 { transform-origin: 21.5px 52px; animation: cv-eq 1.6s ease-in-out infinite; }
.cv-eq--2 { transform-origin: 35.5px 52px; animation: cv-eq 1.6s ease-in-out infinite .25s; }
.cv-eq--3 { transform-origin: 49.5px 52px; animation: cv-eq 1.6s ease-in-out infinite .5s; }
.cv-filme--2 { animation: chat-vazio-led 1.8s ease-in-out infinite .2s; }
.cv-filme--3 { animation: chat-vazio-led 1.8s ease-in-out infinite .4s; }
.cv-seta--e, .cv-seta--d { animation: cv-comprimir 2.2s ease-in-out infinite; }
@keyframes cv-eq {
    0%, 100% { transform: scaleY(.55); }
    50% { transform: scaleY(1); }
}
@keyframes cv-comprimir {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}
.cv-seta--e { transform-origin: 18px 36px; }
.cv-seta--d { transform-origin: 54px 36px; animation-name: cv-comprimir-inv; }
@keyframes cv-comprimir-inv {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-2px); }
}
.chat-vazio-robo--imagem {
    --cv-halo: rgba(251, 191, 36, .22);
    color: #fbbf24;
}
.chat-vazio-robo--imagem .cv-sol { fill: #f59e0b; }
.chat-vazio-robo--imagem .cv-estrela { fill: #c4b5fd; }
.chat-vazio-robo--imagem .cv-paisagem { stroke: #5eead4; }
.chat-vazio-robo--imagem .cv-moldura { stroke: #fcd34d; }
.chat-vazio-robo--video {
    --cv-halo: rgba(248, 113, 113, .2);
    color: #fca5a5;
}
.chat-vazio-robo--video .cv-claquete { fill: #1c1917; stroke: #e7e5e4; }
.chat-vazio-robo--video .cv-claquete-risco { stroke: #fbbf24; }
.chat-vazio-robo--video .cv-play { fill: #fbbf24; }
.chat-vazio-robo--video .cv-moldura { stroke: #a8a29e; }
.chat-vazio-robo--audio {
    --cv-halo: rgba(56, 189, 248, .22);
    color: #7dd3fc;
}
.chat-vazio-robo--audio .cv-fone { fill: #0ea5e9; stroke: #bae6fd; }
.chat-vazio-robo--audio .cv-arco { stroke: #38bdf8; }
.chat-vazio-robo--audio .cv-onda { stroke: #67e8f9; }
.chat-vazio-robo--musica {
    --cv-halo: rgba(124, 58, 237, .26);
    color: #c4b5fd;
}
.chat-vazio-robo--musica .cv-nota-bola { fill: #7c3aed; }
.chat-vazio-robo--musica .cv-nota-bola.cv-spark { fill: #a78bfa; }
.chat-vazio-robo--musica .cv-nota-haste,
.chat-vazio-robo--musica .cv-nota-bandeira { stroke: #ddd6fe; }
.chat-vazio-robo--efeitos {
    --cv-halo: rgba(251, 191, 36, .18);
    color: #fde68a;
}
.chat-vazio-robo--efeitos .cv-eq--1 { fill: #22d3ee; }
.chat-vazio-robo--efeitos .cv-eq--2 { fill: #fbbf24; }
.chat-vazio-robo--efeitos .cv-eq--3 { fill: #f472b6; }
.chat-vazio-robo--foto {
    --cv-halo: rgba(148, 163, 184, .22);
    color: #cbd5e1;
}
.chat-vazio-robo--foto .cv-moldura { fill: #334155; stroke: #e2e8f0; }
.chat-vazio-robo--foto .cv-flash { stroke: #fbbf24; }
.chat-vazio-robo--foto .cv-lente { fill: #0f172a; stroke: #94a3b8; }
.chat-vazio-robo--foto .cv-lente-in { fill: #38bdf8; }
.chat-vazio-robo--tesoura {
    --cv-halo: rgba(251, 113, 133, .2);
    color: #fda4af;
}
.chat-vazio-robo--tesoura .cv-moldura { stroke: #fb7185; }
.chat-vazio-robo--tesoura .cv-lente-in { fill: #67e8f9; }
.chat-vazio-robo--tesoura .cv-corte { stroke: #fb7185; }
.chat-vazio-robo--gif {
    --cv-halo: rgba(251, 146, 60, .22);
    color: #fdba74;
}
.chat-vazio-robo--gif .cv-filme--1 { fill: #9a3412; stroke: #fdba74; }
.chat-vazio-robo--gif .cv-filme--2 { fill: #c2410c; stroke: #fed7aa; }
.chat-vazio-robo--gif .cv-filme--3 { fill: #ea580c; stroke: #ffedd5; }
.chat-vazio-robo--gif .cv-perfuracao { fill: #ffedd5; }
.chat-vazio-robo--compactar {
    --cv-halo: rgba(96, 165, 250, .22);
    color: #93c5fd;
}
.chat-vazio-robo--compactar .cv-moldura { stroke: #60a5fa; }
.chat-vazio-robo--compactar .cv-seta { stroke: #38bdf8; }
.chat-vazio-robo--doc {
    --cv-halo: rgba(165, 180, 252, .22);
    color: #c7d2fe;
}
.chat-vazio-robo--doc .cv-folha { fill: #eef2ff; stroke: #a5b4fc; }
.chat-vazio-robo--doc .cv-dobra { stroke: #818cf8; }
.chat-vazio-robo--doc .cv-linha { stroke: #6366f1; }
.icone-svg-doc .cv-folha { fill: #eef2ff; stroke: #a5b4fc; }
.icone-svg-doc .cv-dobra { stroke: #818cf8; fill: none; }
.icone-svg-doc .cv-linha { stroke: #6366f1; }
.chat-vazio-cabeca-brilho {
    fill: none;
    stroke: rgba(52, 211, 153, .45);
}
.chat-vazio-robo-bob {
    transform-origin: 36px 40px;
    animation: chat-vazio-espera 3.6s ease-in-out infinite;
}
.chat-vazio-olhos {
    transform-origin: 36px 37.5px;
    animation: chat-vazio-olhar 5.6s ease-in-out infinite;
}
.chat-vazio-olhos circle,
.chat-vazio-olhos rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: chat-vazio-piscar 5.6s ease-in-out infinite;
}
.chat-vazio-led {
    animation: chat-vazio-led 2.2s ease-in-out infinite;
}
.chat-vazio-saudacao {
    margin: 0 0 8px;
    color: var(--texto);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.chat-vazio-dica {
    margin: 0;
    min-height: 1.55em;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--texto-fraco);
    max-width: 28em;
}
.chat-vazio-dica.is-pronta .chat-vazio-cursor {
    display: none;
}
.chat-vazio-cursor {
    display: inline-block;
    width: 1.5px;
    height: .95em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--primaria, #00c853);
    border-radius: 1px;
    animation: chat-vazio-cursor .9s steps(1) infinite;
}
@keyframes chat-vazio-espera {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    40% { transform: translateY(-5px) rotate(1.4deg); }
    70% { transform: translateY(-2px) rotate(-.4deg); }
}
@keyframes chat-vazio-olhar {
    0%, 28%, 100% { transform: translateX(0); }
    40% { transform: translateX(2.4px); }
    62% { transform: translateX(-2.2px); }
}
@keyframes chat-vazio-piscar {
    0%, 42%, 48%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.12); }
}
@keyframes chat-vazio-led {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}
@keyframes chat-vazio-halo {
    0%, 100% { transform: scale(.92); opacity: .7; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes chat-vazio-scan {
    0%, 100% { transform: translateY(0); opacity: .18; }
    50% { transform: translateY(8.5px); opacity: .7; }
}
@keyframes chat-vazio-anel {
    0% { transform: scale(.72); opacity: .55; }
    100% { transform: scale(1.85); opacity: 0; }
}
@keyframes chat-vazio-cursor {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes chat-vazio-entrar {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-vazio-robo::before,
    .chat-vazio-robo-bob,
    .chat-vazio-olhos,
    .chat-vazio-olhos circle,
    .chat-vazio-olhos rect,
    .chat-vazio-led,
    .chat-vazio-led-anel,
    .chat-vazio-visor-scan,
    .chat-vazio-peito,
    .chat-vazio-dica,
    .chat-vazio-cursor,
    .cv-spark,
    .cv-onda--2,
    .cv-eq--1, .cv-eq--2, .cv-eq--3,
    .cv-filme--2, .cv-filme--3,
    .cv-seta--e, .cv-seta--d,
    .cartao-recurso .icone,
    .cartao-ferramenta .icone {
        animation: none;
    }
    .chat-vazio-cursor { opacity: .65; }
}

.msg {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .93rem;
    line-height: 1.5;
    word-wrap: break-word;
    animation: surgir .2s ease;
}
.msg-corpo { white-space: pre-wrap; }
.msg-ia .msg-corpo--md {
    white-space: normal;
}
.msg-ia .msg-corpo--md > :first-child { margin-top: 0; }
.msg-ia .msg-corpo--md > :last-child { margin-bottom: 0; }
.msg-ia .msg-corpo--md p {
    margin: 0 0 .7em;
}
.msg-ia .msg-corpo--md .md-h {
    margin: .85em 0 .4em;
    line-height: 1.25;
    font-weight: 700;
    color: var(--texto);
}
.msg-ia .msg-corpo--md .md-h1 { font-size: 1.28em; }
.msg-ia .msg-corpo--md .md-h2 { font-size: 1.14em; }
.msg-ia .msg-corpo--md .md-h3 { font-size: 1.05em; }
.msg-ia .msg-corpo--md .md-h4,
.msg-ia .msg-corpo--md .md-h5,
.msg-ia .msg-corpo--md .md-h6 { font-size: 1em; }
.msg-ia .msg-corpo--md .md-ul,
.msg-ia .msg-corpo--md .md-ol {
    margin: .35em 0 .7em;
    padding-left: 1.25em;
}
.msg-ia .msg-corpo--md .md-ul { list-style: disc; }
.msg-ia .msg-corpo--md .md-ol { list-style: decimal; }
.msg-ia .msg-corpo--md li { margin: .2em 0; }
.msg-ia .msg-corpo--md strong { font-weight: 700; }
.msg-ia .msg-corpo--md em { font-style: italic; }
.msg-ia .msg-corpo--md .md-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .88em;
    padding: .1em .35em;
    border-radius: 5px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .08);
}
.msg-ia .msg-corpo--md .md-pre {
    margin: .55em 0 .8em;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: 10px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .82em;
    line-height: 1.45;
}
.msg-ia .msg-corpo--md .md-pre code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre;
}
.msg-ia .msg-corpo--md .md-quote {
    margin: .5em 0 .75em;
    padding: .15em 0 .15em .85em;
    border-left: 3px solid var(--primaria);
    color: var(--texto-fraco);
}
.msg-ia .msg-corpo--md .md-hr {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: .9em 0;
}
.msg-ia .msg-corpo--md .md-link {
    color: var(--primaria-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msg-ia .msg-corpo--md .md-table-wrap {
    overflow-x: auto;
    margin: .5em 0 .8em;
}
.msg-ia .msg-corpo--md .md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
}
.msg-ia .msg-corpo--md .md-table th,
.msg-ia .msg-corpo--md .md-table td {
    border: 1px solid var(--borda);
    padding: 6px 8px;
    text-align: left;
}
.msg-ia .msg-corpo--md .md-table th {
    background: rgba(255, 255, 255, .05);
    font-weight: 650;
}

/* Rodapé com os metadados da mensagem (modelo, custo, horário...) */
.msg-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.msg-rodape .chip { background: rgba(0, 0, 0, .2); }
.msg-rodape .btn-copiar-prompt { margin-left: auto; }

/* Fontes citadas quando a busca na web está ligada */
.msg-fontes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: .72rem;
}
.msg-fontes-rotulo { color: var(--texto-fraco); font-weight: 600; }

.msg-artefatos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.msg-artefato {
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
}
.msg-artefato-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.msg-artefato-icone { font-size: 1.25rem; flex-shrink: 0; }
.msg-artefato-info {
    min-width: 0;
    flex: 1;
}
.msg-artefato-info strong {
    display: block;
    font-size: .88rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-artefato-info span {
    display: block;
    font-size: .72rem;
    color: var(--texto-fraco);
}
.msg-artefato-acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.msg-artefato-acoes .btn {
    width: auto;
    padding: 5px 10px;
    font-size: .78rem;
}
.msg-artefato-grafico { padding: 0 10px 10px; }
.msg-grafico-svg { width: 100%; height: auto; display: block; }
.msg-artefato-tabela-wrap {
    overflow: auto;
    max-height: 220px;
    padding: 0 10px 10px;
}
.msg-artefato-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}
.msg-artefato-tabela th,
.msg-artefato-tabela td {
    border: 1px solid var(--borda);
    padding: 4px 8px;
    text-align: left;
}
.msg-artefato-tabela th { background: rgba(255,255,255,.04); color: var(--texto-fraco); }
.artefato-caixa { max-width: min(920px, 100%); max-height: 88vh; }
.artefato-modal-corpo {
    flex: 1;
    min-height: 240px;
    overflow: auto;
    padding: 16px 20px;
}
.artefato-modal-corpo iframe {
    width: 100%;
    height: min(70vh, 640px);
    border: 0;
    border-radius: 8px;
    background: #111;
}
.artefato-preview-bloco { margin: 0 0 10px; line-height: 1.5; }
.artefato-preview-bloco.t-h1 { font-size: 1.25rem; font-weight: 700; }
.artefato-preview-bloco.t-h2 { font-size: 1.08rem; font-weight: 700; }
.artefato-preview-bloco.t-h3 { font-size: 1rem; font-weight: 650; }
.artefato-preview-pre {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
}
.msg-fontes a {
    color: var(--primaria-2);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .04);
    max-width: min(240px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-fontes a:hover { border-color: var(--primaria); }
.msg-fontes-host {
    color: var(--texto);
    font-weight: 600;
}
.msg-fontes-mais {
    flex: 0 0 auto;
}
.msg-fontes-mais[open] {
    flex: 1 1 100%;
}
.msg-fontes-mais > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: var(--primaria-2);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .04);
    white-space: nowrap;
    display: inline-block;
}
.msg-fontes-mais > summary::-webkit-details-marker,
.msg-fontes-mais > summary::marker { display: none; content: none; }
.msg-fontes-mais[open] > summary {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .12);
}
.msg-fontes-resto {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 10px;
}
.msg-fontes-resto a {
    max-width: none;
    border-radius: 8px;
}
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg-ia {
    align-self: flex-start;
    max-width: 98%;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-bottom-left-radius: 4px;
}
.msg-usuario {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 200, 83, .28), rgba(34, 211, 238, .18));
    border: 1px solid rgba(0, 200, 83, .35);
    border-bottom-right-radius: 4px;
}
.msg-digitando .spinner { border-top-color: var(--primaria-2); }

/* Imagem dentro da bolha de mensagem */
.msg-imagem {
    display: block;
    max-width: 260px;
    max-height: 260px;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.msg-imagem:last-child { margin-bottom: 0; }

.chat-form {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--borda);
    align-items: stretch;
}
.chat-form-acoes {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 200px;
}
.chat-form-acoes .btn { width: 100%; }
.chat-form-acoes .btn-repor-prompt {
    white-space: nowrap;
    font-size: .82rem;
    padding: 8px 12px;
}
#formChat.ferramenta-prompt-topo .ferramenta-prompt-acoes {
    min-width: 268px;
    width: 280px;
    max-width: 48%;
}

/* Desktop no celular (toque): rolagem, quebra de texto e botões verdes mais legíveis. */
@media (pointer: coarse) {
    html.layout-desktop-celular,
    html.layout-desktop-celular body {
        overflow-x: auto;
        max-width: none;
    }
    html.layout-desktop-celular .grade-recursos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    html.layout-desktop-celular .cartao-recurso--mais {
        grid-column: span 2;
        width: auto;
        justify-self: stretch;
    }
    html.layout-desktop-celular .cartao-recurso {
        padding: 20px 20px 24px;
    }
    html.layout-desktop-celular .cartao-recurso .icone {
        font-size: 2.45rem;
        margin-bottom: 15px;
    }
    html.layout-desktop-celular .cartao-recurso-mais-lista .icone {
        font-size: 1.12rem;
        margin-bottom: 0;
    }
    html.layout-desktop-celular .cartao-recurso h3 {
        font-size: 1.52rem;
        line-height: 1.26;
    }
    html.layout-desktop-celular .cartao-recurso p {
        font-size: 1.02rem;
        line-height: 1.45;
    }
    html.layout-desktop-celular .cartao-recurso .plano-logos {
        width: calc(5 * 34px + 4 * 8px);
        margin-top: 16px;
    }
    html.layout-desktop-celular .cartao-recurso .plano-logo,
    html.layout-desktop-celular .cartao-recurso .plano-logo img {
        width: 34px;
        height: 34px;
    }
    html.layout-desktop-celular .cartao-recurso .plano-logo {
        flex-basis: 34px;
    }
    html.layout-desktop-celular .painel-conteudo {
        overflow-x: visible;
    }
    html.layout-desktop-celular .prompts-cabecalho {
        gap: 12px 18px;
    }
    html.layout-desktop-celular .prompts-cabecalho > .btn {
        min-height: 44px;
    }
    html.layout-desktop-celular .prompt-form-caixa {
        max-height: 88vh;
    }
    html.layout-desktop-celular .prompt-form-corpo .opcao-switch--linha {
        white-space: normal;
    }
    html.layout-desktop-celular .prompts-servico-chip span {
        white-space: normal;
    }
    html.layout-desktop-celular .painel-menu a,
    html.layout-desktop-celular .painel-menu .menu-folder-btn {
        white-space: normal;
        line-height: 1.35;
        align-items: flex-start;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    html.layout-desktop-celular .painel-menu .menu-folder-rotulo {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-coluna-esq,
    html.layout-desktop-celular-ferramenta .ferramenta-lateral,
    html.layout-desktop-celular-ferramenta .campo {
        min-width: 0;
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .opcao-switch,
    html.layout-desktop-celular-ferramenta .opcao-switch--linha {
        flex-wrap: wrap;
        white-space: normal;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    html.layout-desktop-celular-ferramenta .opcao-switch--linha > span:not(.opcao-switch-icone) {
        min-width: 0;
        flex: 1 1 7em;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    html.layout-desktop-celular .btn-primario,
    html.layout-desktop-celular .pill.ativo {
        -webkit-text-stroke: 0;
        paint-order: normal;
        text-shadow:
            0 1px 1px rgba(0, 0, 0, .85),
            0 2px 6px rgba(0, 0, 0, .7),
            0 0 10px rgba(0, 0, 0, .45);
        box-shadow:
            0 4px 18px rgba(0, 200, 83, .35),
            inset 0 0 0 1px rgba(0, 0, 0, .18),
            inset 0 0 22px rgba(0, 0, 0, .28);
    }
    html.layout-desktop-celular .btn-primario .btn-rotulo {
        text-shadow: inherit;
        background: rgba(0, 0, 0, .28);
        border-radius: 7px;
        padding: 2px 8px;
    }
}

/* Retrato no celular: mesma escala da home do painel; conversa encolhe sem rolagem lateral. */
@media (orientation: portrait) and (pointer: coarse) {
    html.layout-desktop-celular-ferramenta,
    html.layout-desktop-celular-ferramenta body {
        overflow-x: hidden;
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .painel-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .painel-conteudo {
        padding: 20px;
        overflow-x: hidden;
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-area {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
        gap: 14px;
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-area--chat {
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    }
    html.layout-desktop-celular-ferramenta .ferramenta-area--editor {
        grid-template-columns: minmax(0, 180px) minmax(0, 1fr) var(--editor-camadas-w);
        gap: 10px;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-form,
    html.layout-desktop-celular-ferramenta .ferramenta-lateral,
    html.layout-desktop-celular-ferramenta .ferramenta-resultado {
        padding: 16px;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-prompt-topo {
        gap: 8px;
        padding: 12px;
        max-width: 100%;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-prompt-topo textarea,
    html.layout-desktop-celular-ferramenta .ferramenta-prompt-topo .chat-prompt-campo {
        min-width: 0;
        flex: 1 1 0;
    }
    html.layout-desktop-celular-ferramenta .ferramenta-prompt-acoes,
    html.layout-desktop-celular-ferramenta #formChat.ferramenta-prompt-topo .ferramenta-prompt-acoes {
        min-width: 0;
        width: auto;
        max-width: 36%;
        flex: 0 1 auto;
    }
    html.layout-desktop-celular-ferramenta #btnEnviarChat,
    html.layout-desktop-celular-ferramenta .ferramenta-prompt-acoes .btn {
        padding: 12px 10px;
        white-space: nowrap;
    }
}
#btnEnviarChat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 16px;
    line-height: 1.15;
    overflow: visible;
}
#btnEnviarChat .btn-custos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
}
#btnEnviarChat .btn-custo {
    order: 0;
    font-size: calc(.68rem + 2pt);
    padding: 3px 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
#btnEnviarChat .btn-custo-busca {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 8px 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #eafff2;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
#btnEnviarChat .btn-custo-busca[hidden] {
    display: none !important;
}
#btnEnviarChat .btn-custo-busca-lupa {
    display: block;
    width: 12px;
    height: 12px;
}
#btnEnviarChat .btn-rotulo {
    font-size: calc(.95rem + 2pt);
    font-weight: 700;
}
.chat-form textarea {
    flex: 1;
    resize: none;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .95rem;
    font-family: inherit;
    min-height: 76px; /* ~3 linhas */
    max-height: 140px;
}
.chat-form textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.22);
}
.chat-form .btn { align-self: flex-end; }

/* ------------------------------------------------------------
   PAGINAS DE TEXTO (privacidade / termos)
   ------------------------------------------------------------ */
.pagina-texto { max-width: 800px; margin: 0 auto; padding: 70px 20px; }
.pagina-texto h1 { font-size: 2.1rem; margin-bottom: 10px; }
.pagina-texto .atualizado { color: var(--texto-fraco); font-size: .85rem; margin-bottom: 36px; }
.pagina-texto h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.pagina-texto p, .pagina-texto li { color: var(--texto-fraco); margin-bottom: 12px; }
.pagina-texto ul { padding-left: 24px; }

/* ------------------------------------------------------------
   PAGINA DE CONTATO
   ------------------------------------------------------------ */
.contato-pagina { padding: 60px 20px 80px; }

.contato-topo { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.contato-topo h1 { font-size: 2.2rem; margin-bottom: 12px; }
.contato-topo p { color: var(--texto-fraco); }

.contato-grade {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: start;
}

.contato-cartao {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 34px 32px;
}
.contato-cartao h2 { font-size: 1.35rem; margin-bottom: 6px; }
.contato-cartao-sub { color: var(--texto-fraco); font-size: .92rem; margin-bottom: 26px; }

.contato-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Campo isca do anti-spam: escondido de pessoas, visivel para robos */
.contato-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contato-canais { display: flex; flex-direction: column; gap: 18px; }

.canal-cartao {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 24px 22px;
}
.canal-cartao .canal-icone { font-size: 1.7rem; line-height: 1; margin-bottom: 10px; }
.canal-cartao h3 { font-size: 1.05rem; margin-bottom: 8px; }
.canal-cartao p { color: var(--texto-fraco); font-size: .9rem; margin-bottom: 10px; }
.canal-cartao p strong { color: var(--texto); }
.canal-destaque {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.02rem;
    color: var(--texto);
    margin-bottom: 16px;
    word-break: break-word;
}
.canal-info a {
    display: block;
    font-size: .9rem;
    margin-top: 8px;
}
.canal-whatsapp { border-color: rgba(37, 211, 102, .35); }

/* ------------------------------------------------------------
   SUPORTE (tickets)
   ------------------------------------------------------------ */
.suporte-pagina {
    max-width: 760px;
    text-align: left;
}
.suporte-topo-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    margin-bottom: 16px;
}
.suporte-topo-lista .secao-galeria-titulo { margin: 0; }
.suporte-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.suporte-outros { margin-top: 36px; }
.suporte-canais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: stretch;
}
.suporte-canais .canal-cartao { margin: 0; }
.suporte-canais .canal-destaque { font-size: .95rem; margin-bottom: 12px; }
.suporte-canais .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.suporte-layout {
    display: block;
    max-width: 760px;
}

/* Linha da lista de tickets */
.ticket-linha {
    display: block;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin-bottom: 12px;
    text-decoration: none !important;
    color: var(--texto);
    transition: border-color .15s, transform .15s;
}
.ticket-linha:hover { border-color: var(--primaria); transform: translateY(-1px); }
.ticket-linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ticket-linha-meta { color: var(--texto-fraco); font-size: .82rem; margin-top: 6px; }
.ticket-nao-visto { border-color: rgba(34, 211, 238, .45); }
.ticket-aviso {
    display: inline-block;
    margin-left: 8px;
    background: var(--ciano);
    color: #062430;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Cabecalho da conversa */
.ticket-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ticket-cabecalho h1 { font-size: 1.45rem; margin-bottom: 6px; }
.ticket-cabecalho .subtitulo-pagina { margin-bottom: 0; font-size: .88rem; }

/* Thread de mensagens */
.ticket-thread { display: flex; flex-direction: column; gap: 14px; }
.ticket-msg {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 18px;
    max-width: 82%;
}
.ticket-msg-usuario { background: var(--fundo-3); align-self: flex-start; }
.ticket-msg-staff {
    background: rgba(0, 200, 83, .07);
    border-color: rgba(0, 200, 83, .28);
    align-self: flex-end;
}
.ticket-msg-autor {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .82rem;
    color: var(--texto-fraco);
    margin-bottom: 8px;
}
.ticket-msg-autor strong { color: var(--texto); font-size: .88rem; }
.ticket-msg-texto { color: var(--texto); font-size: .94rem; white-space: pre-line; }

.ticket-anexos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ticket-anexos img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--borda);
    display: block;
    transition: border-color .15s;
}
.ticket-anexos a:hover img { border-color: var(--primaria); }

/* Formularios da conversa */
.ticket-responder {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px;
    margin-top: 26px;
}
.ticket-responder-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ticket-status-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
    color: var(--texto-fraco);
    font-size: .88rem;
}

/* Campo de arquivo dentro dos formularios de suporte */
.suporte-form input[type="file"],
.ticket-responder input[type="file"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px dashed var(--borda);
    background: var(--fundo-2);
    color: var(--texto-fraco);
    font-family: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.suporte-form input[type="file"]:hover,
.ticket-responder input[type="file"]:hover { border-color: var(--primaria); }

/* Mensagens de contato no painel administrativo */
.contato-msg {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.contato-msg-nova { border-color: rgba(34, 211, 238, .35); }
.contato-msg-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.contato-msg-meta { color: var(--texto-fraco); font-size: .82rem; margin-top: 6px; }
.contato-msg-tag {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ciano);
    border: 1px solid rgba(34, 211, 238, .3);
    border-radius: 999px;
    padding: 2px 9px;
}
.contato-msg-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contato-msg-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-family: inherit;
    font-size: .88rem;
}
.contato-msg-corpo {
    color: var(--texto-fraco);
    font-size: .94rem;
    white-space: pre-line;
    border-top: 1px solid var(--borda);
    padding-top: 14px;
    margin: 0;
}

/* ------------------------------------------------------------
   WHATSAPP (botao verde + atalho fixo)
   ------------------------------------------------------------ */
.btn-whatsapp {
    background: #25d366;
    color: #062d13;
    font-weight: 700;
    text-align: center;
    justify-content: center;
}
.btn-whatsapp:hover { background: #1fbe5a; color: #062d13; }

.whatsapp-flutuante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 16px;
    border-radius: 999px;
    background: #25d366;
    color: #062d13;
    text-decoration: none !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
    transition: gap .25s ease, padding .25s ease, transform .15s ease;
}
.whatsapp-flutuante:hover { transform: translateY(-2px); gap: 10px; padding: 0 22px 0 16px; }
.whatsapp-flutuante svg { width: 30px; height: 30px; fill: #062d13; flex-shrink: 0; }
.whatsapp-flutuante-texto {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 700;
    font-size: .95rem;
    transition: max-width .25s ease;
}
.whatsapp-flutuante:hover .whatsapp-flutuante-texto { max-width: 160px; }

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */
/* Sidebar + coluna de opções fixa estourava a largura no Chrome (scrollbar clássica) */
@media (max-width: 1180px) {
   .ferramenta-area { grid-template-columns: 1fr; }
   .ferramenta-area--chat { grid-template-columns: 1fr; }
   .ferramenta-area--editor { grid-template-columns: 1fr; }
   .ferramenta-area--gif { grid-template-columns: 1fr; }
   .ferramenta-area--gif .ferramenta-coluna-esq { order: 2; }
   .ferramenta-area--gif .ferramenta-principal { order: 1; }
   .chat-lead-info { display: inline-flex; }
   .ferramenta-coluna-esq:has(.chat-lead-info) .chat-pagina-lead--apos-modelo { display: none; }
   .painel-conteudo .chat-pagina-cabecalho .chat-pagina-lead {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 8;
        margin: 0;
        padding: 10px 12px;
        background: var(--fundo-3);
        border: 1px solid var(--borda);
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
        font-size: .85rem;
        line-height: 1.4;
        color: var(--texto);
   }
   .painel-conteudo .chat-pagina-cabecalho .chat-pagina-lead.aberto {
        display: block;
   }
   .gif-topo-acoes { flex-direction: column; align-items: stretch; }
   .gif-topo-acoes .btn { min-width: 0; width: 100%; }
    .chat-form { flex-direction: column; }
    .chat-form-acoes { min-width: 0; }
    .ferramenta-prompt-topo { flex-direction: column; align-items: stretch; }
    .ferramenta-prompt-acoes {
        align-items: stretch;
        width: 100%;
        max-width: none;
    }
    .ferramenta-prompt-topo .chat-prompt-campo {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .ferramenta-prompt-topo .chat-prompt-campo textarea {
        width: 100%;
        box-sizing: border-box;
    }
    #formChat.ferramenta-prompt-topo .ferramenta-prompt-acoes {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
    .tts-contador-chars { text-align: right; }
}

@media (max-width: 960px) {
    .painel-layout { grid-template-columns: 1fr; }
    .painel-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--borda);
        padding: 12px 16px;
    }
    .painel-sidebar-toggle {
        display: none;
    }
    .painel-sidebar-corpo,
    .painel-sidebar.aberto .painel-sidebar-corpo {
        display: none;
    }
    .painel-menu {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 4px;
    }
    .painel-menu > li {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .painel-menu a,
    .painel-menu .menu-folder-btn {
        width: 100%;
        white-space: normal;
        line-height: 1.35;
    }
    .painel-menu .menu-folder-lista {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 4px 0 0;
        box-shadow: none;
    }
    .painel-menu .menu-folder-lista::before {
        display: none;
    }
    .ferramenta-prompt-topo { flex-direction: column; align-items: stretch; }
    .ferramenta-prompt-acoes {
        align-items: stretch;
        width: 100%;
        max-width: none;
    }
    .ferramenta-prompt-topo .chat-prompt-campo {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }
    #formChat.ferramenta-prompt-topo .ferramenta-prompt-acoes {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
    .prompts-cabecalho {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .prompts-cabecalho > .btn {
        width: 100%;
        margin-top: 0;
        justify-content: center;
    }
    .prompts-lista { grid-template-columns: 1fr; }
    .prompts-servicos-grade { grid-template-columns: 1fr; }
    .prompt-form-caixa {
        max-height: 92vh;
        border-radius: 14px;
    }
    .prompt-form-rodape {
        flex-direction: column-reverse;
    }
    .prompt-form-rodape .btn {
        width: 100%;
        min-width: 0;
    }
    .prompt-salvo-cartao-acoes .btn-sm {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }
    #modalPromptForm.picker-modal { padding: 12px; }
    .tts-contador-chars { text-align: right; }
    .chat-caixa { min-height: calc(120vh - 200px); }
    .chat-mensagens { min-height: calc(70vh - 200px); }
    .ferramenta-principal.chat-layout--prompt-baixo .chat-caixa,
    .ferramenta-principal.chat-layout--prompt-baixo .ferramenta-resultado {
        min-height: 0;
        height: min(calc(68vh - 8px), 720px);
        max-height: min(calc(68vh - 8px), 720px);
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .chat-caixa {
        height: min(calc(100dvh - 220px), 720px);
        max-height: min(calc(100dvh - 220px), 720px);
        overflow: hidden;
    }
    .ferramenta-principal--tts.chat-layout--prompt-baixo .ferramenta-resultado {
        height: min(calc(52vh + 45px), 505px);
        max-height: min(calc(52vh + 45px), 505px);
    }
    .ferramenta-principal.chat-layout--prompt-baixo .chat-mensagens,
    .ferramenta-principal.chat-layout--prompt-baixo .thread-turnos {
        min-height: 0;
    }
    .rodape-grade { grid-template-columns: 1fr 1fr; }
    .contato-grade { grid-template-columns: 1fr; }
    .ticket-msg { max-width: 100%; }
}

@media (max-width: 1100px) {
    .grade-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-planos--painel { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
@media (max-width: 640px) {
    .grade-planos { grid-template-columns: 1fr; }
    .grade-planos--painel { grid-template-columns: minmax(0, 280px); }
}
@media (max-width: 768px) {
    .cabecalho-interno { height: 54px; }
    .logo-img {
        height: 36px;
        max-width: min(180px, 48vw);
    }
    .nav-principal {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: auto;
        right: 8px;
        width: min(196px, calc(100vw - 24px));
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        background: rgba(12, 16, 28, .92);
        border: 1px solid rgba(0, 200, 140, .28);
        border-radius: 16px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 232, 180, .06) inset;
        backdrop-filter: blur(16px);
        z-index: 40;
        text-align: left;
    }
    .nav-principal.aberta { display: flex; }
    .nav-principal a {
        display: block;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid transparent;
        color: var(--texto);
        font-size: .9rem;
        font-weight: 500;
        letter-spacing: .01em;
        transition: background .15s, border-color .15s, color .15s;
    }
    .nav-principal a:hover {
        background: rgba(0, 200, 120, .1);
        border-color: rgba(0, 232, 160, .35);
        color: #e8fff4;
    }
    .nav-so-mobile,
    .cabecalho-conta-menu a.nav-so-mobile { display: block; }
    .cabecalho-conta { display: block; }
    .cabecalho-conta-menu {
        left: auto;
        right: 0;
        width: min(196px, calc(100vw - 24px));
        transform: none;
    }
    .menu-hamburguer { display: flex; }
    .cabecalho-acoes { gap: 6px; }
    .cabecalho-acoes .btn {
        white-space: nowrap;
        padding: 7px 11px;
        font-size: .78rem;
        line-height: 1.2;
        border-radius: 10px;
    }
    .cabecalho-btn-full { display: none; }
    .cabecalho-btn-curto { display: inline; }
    body[data-logado="0"] .logo-img {
        height: 32px;
        max-width: min(148px, 38vw);
    }
    body[data-logado="0"] .cabecalho-interno { gap: 6px; }
    body[data-logado="0"] .cabecalho-acoes {
        gap: 4px;
        margin-right: 8px;
    }
    body[data-logado="0"] .cabecalho-acoes .btn {
        padding: 6px 8px;
        font-size: .72rem;
    }
    .hero { padding: 70px 0 60px; }
    .hero-stats { gap: 30px; }
    .secao { padding: 60px 0; }
    #recursos.secao { padding-top: 28px; }
    .painel-conteudo { padding: 24px 18px; }
    .painel-conteudo:has(.ferramenta-area) { padding-top: 24px; }

    /* Chat no celular: prompt mais baixo, conversa maior; mic mais fácil de tocar */
    .ferramenta-area--chat .ferramenta-principal { gap: 10px; }
    #formChat.ferramenta-prompt-topo {
        padding: 8px 10px;
        gap: 8px;
    }
    #formChat.ferramenta-prompt-topo textarea {
        min-height: 52px;
        max-height: 132px;
        padding: 10px 44px 40px 12px;
        font-size: 16px;
    }
    #formChat.ferramenta-prompt-topo .ferramenta-prompt-acoes {
        min-width: 0;
        width: 100%;
        max-width: none;
        gap: 6px;
    }
    #formChat .chat-prompt-linha-btns .btn-repor-prompt {
        font-size: .7rem;
        padding: 6px 8px;
    }
    #formChat #btnEnviarChat {
        padding: 8px 12px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    #formChat #btnEnviarChat .btn-custo {
        font-size: .68rem;
        padding: 3px 8px;
    }
    #formChat #btnEnviarChat .btn-rotulo {
        font-size: .95rem;
    }
    .chat-prompt-mic {
        width: 40px;
        height: 40px;
        right: 6px;
        bottom: 6px;
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .chat-caixa {
        height: calc(100dvh - 228px);
        max-height: calc(100dvh - 228px);
        min-height: 260px;
    }
    .ferramenta-area--chat .ferramenta-principal.chat-layout--prompt-baixo .ferramenta-prompt-topo {
        position: sticky;
        bottom: 6px;
    }
    .cartao-plano {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .rodape-grade { grid-template-columns: 1fr; gap: 30px; }
    .auth-cartao { padding: 32px 24px; }
    .contato-cartao { padding: 26px 20px; }
    .contato-linha { grid-template-columns: 1fr; }
    .contato-topo h1 { font-size: 1.7rem; }
    /* Em telas pequenas o atalho fica so com o icone, para nao cobrir conteudo */
    .whatsapp-flutuante { right: 16px; bottom: 16px; height: 52px; padding: 0 13px; }
    .whatsapp-flutuante:hover { gap: 0; padding: 0 13px; }
    .whatsapp-flutuante:hover .whatsapp-flutuante-texto { max-width: 0; }
}

/* ------------------------------------------------------------
   Página pública de modelos (modelos-ia.php)
   ------------------------------------------------------------ */
.modelos-pagina { max-width: 1200px; }
.modelos-pagina h1 { margin-bottom: 10px; }
.modelos-pagina > .atualizado { max-width: 720px; }

.modelos-ancoras {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 8px;
}
.modelos-ancoras a {
    padding: 7px 14px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .85rem;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.modelos-ancoras a:hover { border-color: var(--ciano); background: var(--fundo-3); }

.modelos-secao { margin-top: 44px; }
.modelos-secao-topo h2 { margin-bottom: 6px; }
.modelos-secao-topo p { color: var(--texto-fraco); font-size: .92rem; margin-bottom: 18px; max-width: 760px; }

.modelos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}
.modelo-cartao {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .15s ease, border-color .15s ease;
}
.modelo-cartao:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .35); }

.modelo-cartao-topo { display: flex; align-items: center; gap: 12px; }
.modelo-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--borda);
    background: #fff;
}
.modelo-logo--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #04141a;
    background: linear-gradient(135deg, var(--ciano), var(--primaria-2));
}
.modelo-tipo-imagem.modelo-logo--fallback { background: linear-gradient(135deg, #f59e0b, #f472b6); }
.modelo-tipo-video.modelo-logo--fallback  { background: linear-gradient(135deg, #8b5cf6, #22d3ee); }
.modelo-tipo-audio.modelo-logo--fallback  { background: linear-gradient(135deg, #22c55e, #22d3ee); }
.modelo-tipo-musica.modelo-logo--fallback { background: linear-gradient(135deg, #f472b6, #8b5cf6); }
.modelo-tipo-remover_fundo.modelo-logo--fallback { background: linear-gradient(135deg, #94a3b8, #22d3ee); }

.modelo-id h3 { font-size: 1.02rem; line-height: 1.2; }
.modelo-empresa { display: block; color: var(--texto-fraco); font-size: .78rem; margin-top: 3px; }

.modelo-custo {
    background: rgba(0, 200, 83, .07);
    border: 1px solid rgba(0, 200, 83, .18);
    border-radius: 10px;
    padding: 10px 12px;
}
.modelo-custo strong { display: block; font-size: 1.25rem; color: var(--primaria-2); letter-spacing: .01em; }
.modelo-custo span { font-size: .78rem; color: var(--texto-fraco); }

.modelo-recursos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}
.modelo-recursos li {
    font-size: .72rem;
    color: var(--texto-fraco);
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.modelos-como-funciona {
    margin-top: 52px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px;
}
.modelos-como-funciona h2 { margin-bottom: 10px; }
.modelos-como-funciona p { color: var(--texto-fraco); margin-bottom: 12px; }
.modelos-como-funciona ul { margin-left: 18px; color: var(--texto-fraco); display: grid; gap: 6px; font-size: .92rem; }

@media (max-width: 640px) {
    .modelos-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .modelos-grade { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   EDITOR DE IMAGENS MANUAL
   ------------------------------------------------------------ */
.painel-conteudo--editor { padding-bottom: 18px; }
.editor-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 13px;
}
.editor-cabecalho-topo {
    display: flex;
    align-items: flex-end;
    align-items: last baseline;
    gap: 10px 16px;
    flex-wrap: wrap;
}
.editor-cabecalho-topo h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}
.editor-cabecalho-icone {
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.editor-cabecalho-desc {
    max-width: none !important;
    width: auto;
    flex: 1 1 220px;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.35;
    font-size: 1em;
}
.editor-selo-gratis {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .14);
    color: #4ade80;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}
.ferramenta-area--editor {
    --editor-camadas-w: 320px;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) var(--editor-camadas-w);
    align-items: stretch;
    gap: 16px;
}
.ferramenta-area--editor .ferramenta-coluna-esq {
    position: relative;
    min-height: 0;
}
.ferramenta-area--editor .editor-principal,
.ferramenta-area--editor .editor-coluna-dir {
    align-self: start;
    height: calc(100% - 80px);
}
.editor-coluna-dir {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.editor-coluna-dir > .editor-camadas {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.ferramenta-area--editor .editor-camadas.ferramenta-lateral {
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}
.editor-lateral .editor-abrir-acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.editor-lateral .editor-abrir-acoes > .btn,
.editor-lateral .editor-abrir-acoes > .dropzone {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    white-space: nowrap;
    font-size: .81rem;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.editor-lateral .editor-abrir-acoes .dropzone-icone {
    font-size: 1.08rem;
    line-height: 1;
}
.editor-bloco-recolhe {
    margin-bottom: 16px;
}
.editor-bloco-recolhe[hidden] { display: none !important; }
.editor-bloco-recolhe > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto);
    margin: 0;
    user-select: none;
}
.editor-bloco-recolhe > summary::-webkit-details-marker,
.editor-bloco-recolhe > summary::marker { display: none; content: ''; }
.editor-bloco-recolhe > summary::after {
    content: '▾';
    margin-left: auto;
    font-size: .8rem;
    color: var(--texto-fraco);
    transition: transform .15s ease;
}
.editor-bloco-recolhe:not([open]) > summary::after {
    transform: rotate(-90deg);
}
.editor-bloco-recolhe[open] > summary {
    margin-bottom: 8px;
}
.editor-bloco-recolhe > summary .editor-dica-info {
    flex-shrink: 0;
}
.editor-dica-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: var(--fundo-2);
    color: var(--texto-fraco);
    font-size: .75rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
}
.editor-dica-info:hover {
    border-color: var(--primaria);
    color: var(--primaria-2);
}
.editor-abrir-linha {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.editor-abrir-linha > .dropzone,
.editor-abrir-linha > .btn {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 100%;
    padding: 8px 10px;
    font-size: .82rem;
    box-sizing: border-box;
}
.ferramenta-area--editor .editor-atalhos {
    margin-top: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 8;
}
.ferramenta-area--editor .editor-atalhos[open] {
    overflow: visible;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ferramenta-area--editor .editor-atalhos[open] .editor-atalhos-lista {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 12;
    margin: 0;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.editor-prop-linha {
    display: flex;
    align-items: center;
    gap: 10px;
}
.editor-prop-linha input[type="color"] {
    width: 42px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-2);
    cursor: pointer;
}
.editor-prop-linha input[type="range"] { flex: 1; min-width: 0; }
.editor-range {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    margin: 4px 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, var(--primaria) 0 var(--range-pct, 100%), #2a2a3a var(--range-pct, 100%) 100%) no-repeat;
    background-size: 100% 8px;
    background-position: center;
    outline: none;
    cursor: pointer;
}
.editor-range:focus {
    box-shadow: none;
    border: none;
}
.editor-range::-webkit-slider-runnable-track {
    height: 16px;
    border-radius: 999px;
    background: transparent;
}
.editor-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: 50%;
    background: var(--primaria-2);
    border: 2px solid #0a0a12;
    box-shadow: 0 0 0 1px var(--primaria);
    cursor: pointer;
}
.editor-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #2a2a3a;
    border: none;
}
.editor-range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--primaria);
    border: none;
}
.editor-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primaria-2);
    border: 2px solid #0a0a12;
    box-shadow: 0 0 0 1px var(--primaria);
    cursor: pointer;
}
.editor-prop-linha input[type="number"] {
    width: 72px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--fundo-2);
    color: var(--texto);
    border: 1px solid var(--borda);
}
.editor-prop-valor {
    font-size: .8rem;
    color: var(--texto-fraco);
    min-width: 46px;
}
.editor-principal {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.editor-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 8px 10px;
}
.editor-toolbar-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.editor-toolbar-espaco { flex: 1 1 12px; }
.editor-toolbar-contexto {
    border-top: 1px solid var(--borda);
    padding-top: 8px;
    min-height: 42px;
    flex-wrap: wrap;
}
.editor-toolbar-contexto > .editor-tool,
.editor-toolbar-contexto > .editor-exportar-wrap {
    flex: 0 0 auto;
}
.editor-btn-ordem {
    padding: 5px 9px !important;
    font-size: .75rem !important;
    min-width: 0;
    line-height: 1.2;
}
.editor-ctx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.editor-ctx[hidden] {
    display: none !important;
}
.editor-ctx-dica {
    font-size: .78rem;
    color: var(--texto-fraco);
    line-height: 1.3;
    margin-right: 4px;
}
#editorCtxArea {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
#editorCtxArea[hidden] { display: none !important; }
.editor-split {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
    align-items: stretch;
}
.editor-split .btn { white-space: nowrap; }
.editor-split .btn-primario:hover,
.editor-split .btn-primario:focus,
.editor-split .btn-primario:focus-visible,
.editor-split .btn-outline:hover,
.editor-split .btn-outline:focus,
.editor-split .btn-outline:focus-visible {
    transform: none;
}
#editorSplitSalvar.is-open .editor-split-seta {
    transform: translateY(-2px);
    z-index: 31;
}
.editor-split-main {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-left: 10px;
    padding-right: 8px;
    position: relative;
    min-width: 70px;
}
.editor-split-main.is-salvando .editor-split-rotulo { visibility: hidden; }
.editor-split-main.is-salvando::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: editor-spin .7s linear infinite;
}
@keyframes editor-spin {
    to { transform: rotate(360deg); }
}
.editor-split-seta {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 32px;
    border-left: 1px solid rgba(0, 0, 0, .22);
}
.editor-exportar-wrap {
    position: relative;
    flex: 0 0 auto;
}
#editorSplitEdit { margin-left: 2px; }
.editor-btn-exportar {
    border-color: var(--borda);
    color: var(--texto);
    white-space: nowrap;
}
.editor-btn-exportar:hover,
.editor-btn-exportar:focus {
    border-color: var(--primaria-2);
    color: var(--primaria-2);
    transform: none;
}
.editor-drop-campo[hidden],
.editor-drop-intervalo[hidden],
#exportPaginasWrap[hidden],
#exportPngTransparenteWrap[hidden] { display: none !important; }
.editor-drop-intervalo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}
.editor-drop-int {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.editor-drop-int span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-fraco);
    white-space: nowrap;
}
.editor-drop-int input[type="number"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    appearance: textfield;
    -moz-appearance: textfield;
}
.editor-drop-int input[type="number"]:focus {
    outline: none;
    border-color: var(--primaria);
}
.editor-drop-int input[type="number"]::-webkit-outer-spin-button,
.editor-drop-int input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.editor-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--texto);
    cursor: pointer;
}
.editor-check[hidden] { display: none !important; }
.editor-check input { accent-color: var(--primaria); }
.editor-paginas {
    margin-top: 0;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo-3);
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-height: 440px;
}
.editor-paginas[hidden] { display: none !important; }
.editor-paginas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.editor-paginas-topo strong { font-size: .88rem; }
.editor-paginas-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-paginas-acoes .btn-sm {
    padding: 4px 8px;
    font-size: .75rem;
    min-width: 0;
}
.editor-paginas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 2px;
}
.editor-pagina-card {
    flex: 0 0 auto;
    width: 100%;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    color: var(--texto);
    cursor: pointer;
    padding: 8px 6px 6px;
    text-align: center;
    font-family: inherit;
}
.editor-pagina-card:hover { border-color: var(--primaria); }
.editor-pagina-card.ativa {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .12);
}
.editor-pagina-mini {
    display: block;
    width: 100%;
    height: 78px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px dashed rgba(0, 230, 118, .45);
    background:
        repeating-linear-gradient(
            -45deg,
            #161625 0 7px,
            #12121c 7px 14px
        );
    object-fit: contain;
}
.editor-brush-cursor {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    border: 1.5px solid rgba(0, 230, 118, .9);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
    transform: translate(-50%, -50%);
}
.editor-brush-cursor--borracha {
    border-color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .78);
}
.editor-tool-mini {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}
.editor-pagina-card span,
.editor-pagina-nome {
    display: block;
    font-size: .72rem;
    color: var(--texto-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-pagina-nome-edit {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 4px;
    border-radius: 6px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-size: .72rem;
    font-family: inherit;
    text-align: center;
    outline: none;
}
.editor-menu-drop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.editor-menu-drop[hidden] { display: none !important; }
.editor-menu-drop > button:not(.btn) {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--texto);
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
}
.editor-menu-drop > button:not(.btn):hover {
    background: rgba(0, 200, 83, .14);
    color: var(--primaria-2);
}
.editor-menu-drop--painel {
    min-width: 280px;
    width: 280px;
    max-width: min(280px, calc(100vw - 24px));
    padding: 12px;
    gap: 10px;
    overflow: visible;
}
.editor-menu-drop--painel > .btn-primario {
    width: 100%;
    margin-top: 2px;
    transform: none;
}
.editor-menu-drop--painel > .btn-outline {
    width: 100%;
    transform: none;
}
.editor-menu-drop--painel > .btn-primario:hover {
    transform: none;
}
.editor-menu-drop--painel .editor-dica-export,
#dicaExportConta {
    margin: 0;
    font-size: .62rem;
    line-height: 1.25;
    font-weight: 400;
    color: var(--texto-fraco);
}
.editor-menu-drop--painel .editor-check {
    margin-top: 2px;
    font-weight: 600;
    color: var(--texto-fraco);
}
#exportPaginasWrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.editor-drop-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-drop-icos {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.editor-drop-ico {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    cursor: pointer;
}
.editor-drop-ico:hover {
    border-color: var(--primaria);
    color: var(--primaria-2);
}
.editor-drop-ico.ativa {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .12);
    color: var(--primaria-2);
}
.editor-drop-ico::after {
    content: attr(data-tip);
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    bottom: auto;
    z-index: 5;
    width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}
.editor-drop-ico:hover::after {
    opacity: 1;
    transform: translateY(0);
}
.editor-confirm-caixa {
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 200, 83, .18);
}
.editor-confirm-corpo {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.editor-confirm-corpo p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--texto);
}
.editor-drop-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-drop-campo select,
.editor-salvar-como-form input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-family: inherit;
    font-size: .88rem;
}
.editor-drop-qualidade {
    display: flex;
    align-items: center;
    gap: 8px;
}
.editor-drop-qualidade input[type="range"] { flex: 1; min-width: 0; }
.editor-salvar-como-form {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editor-salvar-como-form label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-salvar-como-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.editor-ctx-dica {
    font-size: .8rem;
    color: var(--texto-fraco);
    line-height: 1.35;
}
.editor-ctx-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--texto-fraco);
    font-weight: 600;
}
.editor-ctx-item--range { flex: 1 1 180px; min-width: 0; }
.editor-ctx-item input[type="color"] {
    width: 36px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-2);
    cursor: pointer;
}
.editor-ctx-item input[type="number"],
.editor-ctx-item select {
    width: auto;
    min-width: 72px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    font-family: inherit;
    font-size: .85rem;
}
.editor-ctx-item select { min-width: 140px; }
.editor-ctx-item--range input[type="range"] { flex: 1; min-width: 80px; }
.editor-ctx-fill-img {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.editor-ctx-fill-img .btn,
.editor-ctx-fill-img label.btn {
    min-width: 0;
    padding: 5px 8px;
    margin: 0;
    cursor: pointer;
}
.editor-tool {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-2);
    color: var(--texto);
    cursor: pointer;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex: 0 0 auto;
}
.editor-tool[hidden] {
    display: none !important;
}
.editor-tool svg { display: block; pointer-events: none; }
.editor-tool:hover { border-color: var(--primaria); color: var(--primaria-2); }
.editor-tool.ativo {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .16);
    color: var(--primaria-2);
}
.editor-toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--borda);
    margin: 0 4px;
}
.editor-zoom-label {
    font-size: .78rem;
    color: var(--texto-fraco);
    min-width: 44px;
    text-align: center;
}
.editor-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 520px;
    overflow: hidden;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background-color: #0c0c14;
    background-image:
        linear-gradient(45deg, #141422 25%, transparent 25%),
        linear-gradient(-45deg, #141422 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #141422 75%),
        linear-gradient(-45deg, transparent 75%, #141422 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.editor-canvas-wrap .canvas-container {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    z-index: 1;
}
.editor-vazio {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 10px;
    padding: 24px 20px;
    text-align: center;
    color: var(--texto-fraco);
    overflow-y: auto;
    pointer-events: auto;
    background: rgba(8, 8, 14, .72);
    backdrop-filter: blur(6px);
}
.editor-vazio[hidden] { display: none !important; }
.editor-vazio-icone { font-size: 1.05rem; line-height: 1; }
.editor-inicio {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}
.editor-inicio h2 {
    margin: 8px 0 0;
    font-size: 1.35rem;
    color: var(--texto);
}
.editor-inicio-bloco {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: var(--fundo-2);
    text-align: center;
}
.editor-inicio-bloco h3 {
    margin: 0 0 12px;
    font-size: .95rem;
    color: var(--texto);
}
.editor-formatos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.editor-formato {
    min-width: 108px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
}
.editor-formato:hover { border-color: var(--primaria); color: var(--primaria-2); }
.editor-formato.ativo {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .16);
    color: var(--primaria-2);
}
.editor-tamanho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--texto-fraco);
    font-size: .85rem;
}
.editor-tamanho--lateral {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: stretch;
    margin-bottom: 8px;
    width: 100%;
}
.editor-tamanho--lateral .editor-tamanho-campo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-proporcao {
    margin: 0 0 8px;
    width: 100%;
    min-width: 0;
}
.editor-proporcao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.editor-proporcao-topo > span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-trava {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texto-fraco);
    font-size: .68rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}
.editor-trava-trilho {
    position: relative;
    width: 28px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
}
.editor-trava-trilho::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--texto-fraco);
    transition: transform .15s ease;
}
.editor-trava.ativa {
    color: var(--primaria-2);
}
.editor-trava.ativa .editor-trava-trilho {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .35);
}
.editor-trava.ativa .editor-trava-trilho::after {
    transform: translateX(12px);
    background: var(--primaria);
}
.editor-proporcao-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}
.editor-proporcao-preset {
    min-width: 0;
    padding: 5px 2px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.editor-proporcao-preset:hover {
    border-color: var(--primaria);
}
.editor-proporcao-preset.ativa {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .16);
    color: var(--primaria-2);
}
.editor-dpi-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    min-width: 0;
    width: 100%;
}
.editor-dpi-linha > label {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-dpi-linha .editor-tamanho-input {
    flex: 0 0 64px;
    max-width: 72px;
    padding-right: 0;
}
.editor-dpi-linha .editor-tamanho-input input {
    padding-right: 8px !important;
    text-align: center;
}
.editor-dpi-presets {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.editor-dpi-preset {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 4px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}
.editor-dpi-preset:hover {
    border-color: var(--primaria);
}
.editor-dpi-preset.ativa {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .16);
    color: var(--primaria-2);
}
.editor-menu-drop--painel .editor-tamanho-input {
    width: 100%;
}
.editor-tamanho-input {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0 8px 0 0;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
}
.editor-tamanho-input:focus-within { border-color: var(--primaria); }
.editor-tamanho-input input {
    width: 100% !important;
    min-width: 0;
    padding: 7px 6px 7px 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--texto);
    font-size: .85rem;
    font-family: inherit;
    -moz-appearance: textfield;
}
.editor-tamanho-input input::-webkit-outer-spin-button,
.editor-tamanho-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.editor-tamanho-input span {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--texto-fraco);
    font-weight: 600;
}
.editor-tamanho--lateral input { width: auto; }
.editor-tamanho label:not(.editor-tamanho-campo) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.editor-tamanho input {
    width: 88px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-family: inherit;
}
.editor-inicio-ou {
    margin: 18px 0 12px;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.editor-inicio-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.editor-inicio-acoes .btn { cursor: pointer; }
#secaoProjetos { scroll-margin-top: 88px; }
.ferramenta-area--editor:has(#editorVazio:not([hidden])) .editor-toolbar,
.ferramenta-area--editor:has(#editorVazio:not([hidden])) .editor-camadas {
    opacity: .45;
    pointer-events: none;
}
.ferramenta-area--editor:has(#editorVazio:not([hidden])) .editor-toolbar-contexto {
    display: none !important;
}
.editor-camadas {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.editor-camadas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-left: 39px;
}
.editor-camadas-topo h3 { font-size: .95rem; margin: 0; line-height: 1; }
.editor-camadas-ficheio {
    position: absolute;
    left: 0;
    top: 8px;
    transform: translateX(-1px);
    display: flex;
    flex-direction: row;
    gap: 4px;
    z-index: 8;
    pointer-events: none;
}
.editor-camadas-ficheio .btn-sm {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--fundo-3);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .35);
}
.editor-camadas-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.editor-camadas-btns .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: .95rem;
    line-height: 1;
    border-radius: 8px;
}
.editor-camadas-btns .btn-sm[disabled] {
    opacity: .35;
    cursor: default;
}
.editor-camadas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow: auto;
}
.editor-camada-grupo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    overflow: hidden;
    position: relative;
}
.editor-camada-grupo.ativa {
    border-color: rgba(0, 200, 83, .42);
    background: rgba(0, 200, 83, .035);
}
.editor-camada {
    display: grid;
    grid-template-columns: 52px 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    cursor: pointer;
}
.editor-camada.pasta {
    grid-template-columns: 16px 52px 28px minmax(0, 1fr);
    padding: 6px;
}
.editor-camada.travada {
    grid-template-columns: 52px 28px 22px minmax(0, 1fr) 28px;
}
.editor-camada.pasta.travada {
    grid-template-columns: 16px 52px 28px 22px minmax(0, 1fr);
}
.editor-camada-grupo > .editor-camada {
    border: none;
    border-radius: 0;
    background: transparent;
}
.editor-camada.ativa {
    border-color: transparent;
    background: transparent;
}
.editor-camada.selecionada {
    background: rgba(0, 200, 83, .04);
    box-shadow: inset 2px 0 0 rgba(0, 200, 83, .55);
}
.editor-camada-grupo.selecionada {
    border-color: rgba(0, 200, 83, .38);
}
.editor-camada-toggle {
    border: none;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    width: 16px;
    height: 18px;
    padding: 0;
    font-size: .65rem;
    line-height: 1;
}
.editor-camada-toggle:hover { color: var(--primaria-2); }
.editor-camada-pasta-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 40px;
    border-radius: 6px;
    background: #12121c;
    font-size: 1.15rem;
    line-height: 1;
}
.editor-camada-preview {
    position: relative;
    width: 52px;
    height: 40px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 4px;
    background: #0a0a12;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}
.editor-camada-folha {
    position: absolute;
    display: block;
    border-radius: 2px;
    background: #12121c;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}
.editor-camada-preview[data-n="0"] .editor-camada-folha,
.editor-camada-preview[data-n="1"] .editor-camada-folha {
    left: 3px;
    top: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 2px;
}
.editor-camada-preview[data-n="2"] .editor-camada-folha:nth-child(1) {
    right: 0;
    top: 0;
    width: 44px;
    height: 32px;
    transform: rotate(7deg);
    opacity: .72;
}
.editor-camada-preview[data-n="2"] .editor-camada-folha:nth-child(2) {
    left: 0;
    bottom: 0;
    width: 46px;
    height: 34px;
    z-index: 2;
}
.editor-camada-preview[data-n="3"] .editor-camada-folha:nth-child(1) {
    right: 0;
    top: 0;
    width: 40px;
    height: 30px;
    transform: rotate(10deg);
    opacity: .5;
}
.editor-camada-preview[data-n="3"] .editor-camada-folha:nth-child(2) {
    right: 2px;
    top: 4px;
    width: 42px;
    height: 32px;
    transform: rotate(5deg);
    opacity: .78;
    z-index: 1;
}
.editor-camada-preview[data-n="3"] .editor-camada-folha:nth-child(3) {
    left: 0;
    bottom: 0;
    width: 44px;
    height: 34px;
    z-index: 2;
}
.editor-camada-abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
    color: var(--texto-fraco);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    flex-shrink: 0;
    justify-self: end;
}
.editor-camada-abrir:hover,
.editor-camada-abrir.aberta {
    color: var(--primaria-2);
    background: rgba(0, 200, 83, .14);
}
.editor-elementos {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 5px;
    margin: 0 10px 10px 0;
    padding: 2px 2px 4px 0;
    border-left: none;
    background: transparent;
    border-radius: 0;
}
.editor-elemento {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 5px 4px 5px 6px;
    min-height: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .28);
    font-size: .74rem;
    color: var(--texto-fraco);
    cursor: grab;
    text-align: left;
    width: 100%;
    font-family: inherit;
    user-select: none;
    touch-action: none;
}
.editor-elemento:hover {
    background: rgba(0, 0, 0, .42);
    color: var(--texto);
    border-color: rgba(0, 200, 83, .28);
}
.editor-elemento.ativa {
    color: var(--primaria-2);
    background: rgba(0, 200, 83, .08);
    border-color: rgba(0, 200, 83, .4);
}
.editor-elemento.oculta {
    opacity: .55;
}
.editor-elemento.arrastando { opacity: .55; cursor: grabbing; }
.editor-elemento.drag-over-acima {
    box-shadow: inset 0 2px 0 0 var(--ciano);
    border-color: var(--ciano);
}
.editor-elemento.drag-over-abaixo {
    box-shadow: inset 0 -2px 0 0 var(--ciano);
    border-color: var(--ciano);
}
.editor-elementos.drag-over-fim {
    box-shadow: inset 0 -2px 0 0 var(--ciano);
}
.editor-elemento-thumb {
    width: 26px;
    height: 20px;
    border-radius: 2px;
    background: #0a0a12;
    display: block;
    box-sizing: content-box;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}
.editor-elemento-ico {
    font-size: .72rem;
    text-align: center;
    opacity: .85;
}
.editor-elemento-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.editor-elementos-vazio {
    padding: 3px 4px 2px;
    font-size: .7rem;
    color: var(--texto-fraco);
    opacity: .75;
}
.editor-camada-ctx {
    position: fixed;
    z-index: 80;
    min-width: 140px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.editor-camada-ctx[hidden] { display: none !important; }
.editor-camada-ctx button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--texto);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.editor-camada-ctx button:hover {
    background: rgba(0, 200, 83, .14);
    color: var(--primaria-2);
}
.editor-camada-ctx button:disabled {
    opacity: .4;
    cursor: default;
}
.editor-camada-ctx button:disabled:hover {
    background: transparent;
    color: var(--texto);
}
.editor-filtro-painel {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editor-filtro-painel[hidden] { display: none !important; }
.editor-filtro-painel .editor-ctx-item--range {
    width: 100%;
    min-width: 0;
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 4.8rem) minmax(64px, 1fr) 2.6rem;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
}
.editor-filtro-rotulo {
    min-width: 0;
    line-height: 1.25;
    overflow: hidden;
    white-space: normal;
}
.editor-filtro-painel .editor-range {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    min-width: 0;
}
.editor-filtro-painel .editor-prop-valor {
    min-width: 0;
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    font-size: .75rem;
}
.editor-filtro-secao {
    margin: 6px 0 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.editor-filtro-acoes {
    display: flex;
    gap: 6px;
}
.editor-filtro-painel .editor-filtro-acoes .btn {
    flex: 1;
    width: auto;
    margin: 0;
    padding: 6px 8px;
    font-size: .75rem;
    min-width: 0;
}
.editor-filtro-acoes .btn[disabled] {
    opacity: .35;
    cursor: default;
}
.editor-filtro-painel .btn {
    width: 100%;
    margin-top: 4px;
}
.editor-balanco {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.editor-balanco-nomes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--texto-fraco);
}
.editor-balanco-nomes span:first-child { text-align: left; }
.editor-balanco-nomes span:last-child { text-align: right; }
.editor-balanco-nomes .editor-prop-valor {
    min-width: 2.2rem;
    text-align: center;
    font-size: .75rem;
    color: var(--texto);
    pointer-events: none;
}
.editor-balanco-linha {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
}
.editor-balanco-bola {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    flex-shrink: 0;
}
.editor-balanco-bola[data-cor="ciano"] { background: #00bcd4; }
.editor-balanco-bola[data-cor="vermelho"] { background: #e53935; }
.editor-balanco-bola[data-cor="magenta"] { background: #d946ef; }
.editor-balanco-bola[data-cor="verde"] { background: #43a047; }
.editor-balanco-bola[data-cor="amarelo"] { background: #fdd835; }
.editor-balanco-bola[data-cor="azul"] { background: #1e88e5; }
.editor-balanco-linha .editor-range {
    width: 100%;
    min-width: 0;
}
.editor-camada-travada {
    flex-shrink: 0;
    font-size: .85rem;
    line-height: 1;
    opacity: .85;
}
.editor-camada.drag-over { border-color: var(--ciano); }
.editor-camada.arrastando { opacity: .55; }
.editor-camada-grupo.drag-over { border-color: var(--ciano); }
.editor-camada-grupo.arrastando { opacity: .55; }
.editor-camada-thumb {
    width: 52px;
    height: 40px;
    border-radius: 6px;
    background: #12121c;
    display: block;
}
.editor-camada-ico {
    border: none;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    font-size: .95rem;
    padding: 2px;
}
.editor-camada-nome {
    width: 100%;
    min-width: 0;
    padding: 5px 6px;
    border-radius: 6px;
    color: var(--texto);
    font-size: .8rem;
    font-family: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    cursor: pointer;
}
.editor-camada-nome-edit {
    width: 100%;
    min-width: 0;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-size: .8rem;
    font-family: inherit;
    outline: none;
}
.editor-camadas-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.editor-btn-filtro-camada {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.editor-btn-filtro-icone {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    line-height: 1;
}
.editor-btn-filtro-seta {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    line-height: 1;
    color: var(--texto-fraco);
}
.editor-btn-filtro-camada.aberto .editor-btn-filtro-seta {
    transform: translateY(-50%) rotate(180deg);
}
.editor-elemento-olho {
    justify-self: end;
}
.editor-mover-menu {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
}
.editor-atalhos {
    margin-top: 16px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 200, 83, .07), var(--fundo-2));
    overflow: hidden;
}
.editor-atalhos summary {
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 10px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}
.editor-atalhos summary::-webkit-details-marker { display: none; }
.editor-atalhos summary::after {
    content: '▾';
    font-size: .85rem;
    opacity: .7;
    transition: transform .15s;
}
.editor-atalhos[open] summary::after { transform: rotate(180deg); }
.editor-atalhos summary:hover { color: var(--texto); }
.editor-atalhos-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 12px 12px;
    list-style: none;
    border-top: 1px solid var(--borda);
    padding-top: 10px;
}
.editor-atalhos-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .78rem;
    color: var(--texto-fraco);
}
.editor-atalhos-combo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}
.editor-atalhos-mais {
    font-size: .7rem;
    opacity: .6;
}
.editor-atalhos kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--borda);
    background: var(--fundo-3);
    color: var(--texto);
    font-family: inherit;
    font-size: .7rem;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.editor-atalhos-nota {
    width: 100%;
    font-size: .72rem;
    color: var(--texto-fraco);
    opacity: .85;
}

@media (max-width: 1100px) {
    .ferramenta-area--editor { grid-template-columns: 1fr; }
    .editor-canvas-wrap { min-height: 480px; }
}

/* ------------------------------------------------------------
   Checkout (assinatura)
   ------------------------------------------------------------ */
.checkout-pagina { max-width: 980px; }
.checkout-pagina > h1 {
    font-size: calc(1.35rem + 2pt);
    letter-spacing: -.03em;
    font-weight: 700;
}
.checkout-pagina > .subtitulo-pagina {
    margin-bottom: 18px;
    font-size: calc(.9rem + 2pt);
    max-width: 40rem;
    line-height: 1.45;
}
.checkout-alerta { margin: 0 0 16px; font-size: calc(.86rem + 1pt); font-weight: 500; }
.checkout-erro-pagamento {
    margin: 0 0 18px;
    padding: 16px 18px;
}
.checkout-erro-pagamento strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.checkout-erro-pagamento p { margin: 0 0 8px; line-height: 1.45; }
.checkout-erro-pagamento .checkout-erro-ajuda {
    margin: 0;
    font-size: .9em;
    opacity: .9;
}
.checkout-caixa {
    display: flex;
    flex-direction: column;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: 16px;
    overflow: hidden;
}
.checkout-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--fundo-2);
}
.checkout-bloco {
    min-width: 0;
}
.checkout-bloco--id,
.checkout-bloco--plano {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
}
.checkout-bloco--id {
    border-right: 1px solid var(--borda);
}
.checkout-bloco--plano {
    background: linear-gradient(180deg, rgba(0, 200, 83, .04) 0%, transparent 42%);
}
.checkout-bloco--pagamento {
    padding: 32px 24px 24px;
    border-top: 1px solid var(--borda);
    background: var(--fundo-3);
}
.checkout-caixa h2 {
    margin: 11px 0 14px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: #4ade80;
    line-height: 1.3;
}
.checkout-rotulo {
    margin: 23px 0 8px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: .88rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #4ade80;
    line-height: 1.3;
}
.checkout-bloco--plano > h2 + .checkout-rotulo {
    margin-top: 9px;
}
.checkout-metodos {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo);
}
.checkout-bloco--plano .checkout-metodos {
    margin-bottom: 0;
}
.checkout-metodo {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition: background .15s, color .15s;
}
.checkout-metodo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.checkout-metodo.is-ativo {
    background: rgba(0, 200, 83, .14);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 83, .55);
}
.checkout-metodo-titulo {
    font-size: calc(.88rem + 1pt);
    font-weight: 650;
    color: var(--texto);
}
.checkout-metodo-dica {
    font-size: calc(.7rem + 1pt);
    color: var(--texto-fraco);
    line-height: 1.2;
    text-align: center;
}
.checkout-cartoes-salvos { margin-bottom: 14px; }
.checkout-cartao-salvo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    cursor: pointer;
    font-size: calc(.86rem + 1pt);
}
.checkout-cartao-salvo--novo { border-style: dashed; }
.checkout-cartao-salvo .etiqueta-status { margin-left: 6px; font-size: calc(.75rem - 1pt); }
.checkout-cartao-box {
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    background: var(--fundo);
    width: 100%;
}
.checkout-cartao-box:focus-within {
    border-color: rgba(0, 200, 83, .55);
    box-shadow: 0 0 0 1px rgba(0, 200, 83, .25);
}
.checkout-cartao-linha {
    padding: 8px 12px 9px;
    border-bottom: 1px solid var(--borda);
}
.checkout-cartao-linha label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
    font-size: calc(.68rem + 1pt);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}
.checkout-cadeado {
    display: inline-flex;
    color: var(--primaria);
    opacity: .9;
    flex-shrink: 0;
    line-height: 0;
}
.checkout-cartao-box input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-size: calc(.95rem + 1pt);
    line-height: 1.35;
    font-family: inherit;
    padding: 0;
    outline: none;
    box-shadow: none;
}
.checkout-cartao-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px 84px;
}
.checkout-cartao-base .checkout-cartao-linha {
    border-bottom: 0;
    border-right: 1px solid var(--borda);
}
.checkout-cartao-base .checkout-cartao-linha:last-child {
    border-right: 0;
}
.checkout-demo-nota {
    margin: 10px 0 0;
    font-size: calc(.78rem + 1pt);
    color: var(--texto-fraco);
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 200, 83, .07);
    border: 1px solid rgba(0, 200, 83, .18);
}
.checkout-pix-box {
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(34, 197, 94, .07);
    border: 1px solid rgba(34, 197, 94, .22);
    margin-bottom: 4px;
}
.checkout-pix-titulo {
    margin: 0 0 6px;
    font-weight: 650;
    font-size: calc(.9rem + 1pt);
}
.checkout-pix-box p {
    margin: 0 0 6px;
    font-size: calc(.82rem + 1pt);
    color: var(--texto-fraco);
    line-height: 1.45;
}
.checkout-pix-box p:last-child { margin-bottom: 0; }
.checkout-pix-meses {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 8px;
}
.checkout-pix-meses button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    font-size: calc(1.2rem - 1pt);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.checkout-pix-meses button:hover {
    border-color: var(--primaria);
    color: var(--primaria);
}
.checkout-pix-meses input {
    width: 64px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    font-size: calc(1rem - 1pt);
    font-weight: 650;
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}
.checkout-pix-meses input::-webkit-outer-spin-button,
.checkout-pix-meses input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.checkout-pix-meses input:focus {
    border-color: var(--primaria);
    outline: none;
}
.checkout-pix-meses span {
    font-size: calc(.82rem + 1pt);
    color: var(--texto);
    font-weight: 650;
}
#bloco-pix-meses {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}
#bloco-pix-meses .checkout-rotulo {
    margin-bottom: 6px;
    width: 100%;
}
#pix-meses-legenda {
    font-size: calc(.82rem + 1pt);
    color: var(--texto);
    font-weight: 650;
}
.checkout-pagamento-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    gap: 16px 22px;
    align-items: start;
}
.checkout-pagamento-meio { min-width: 0; }
.checkout-cobranca {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkout-bloco--id .checkout-cobranca-linha--cep {
    grid-template-columns: minmax(0, 1fr) 4.8rem;
}
.checkout-bloco--id .checkout-campo--comp {
    grid-column: 1 / -1;
}
.checkout-cobranca .checkout-rotulo { margin-top: 0; margin-bottom: 0; }
.checkout-cobranca-dica {
    margin: -4px 0 2px;
    font-size: calc(.72rem - 1pt);
    color: var(--texto-fraco);
    line-height: 1.4;
}
.checkout-cobranca-dica strong {
    color: var(--texto);
    font-weight: 650;
}
.checkout-identidade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin: 0;
}
.checkout-identidade > .checkout-campo:first-child {
    grid-column: 1 / -1;
}
.perfil-cobranca { margin-top: 0; }
.perfil-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}
.perfil-col-esq {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}
.perfil-linha-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.perfil-senha-email {
    margin-top: 8px;
}
.perfil-idioma {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 22rem;
}
.perfil-idioma-atual {
    margin: 0 0 8px;
    font-size: .88rem;
    color: var(--texto);
}
.perfil-idioma-linha {
    display: flex;
    gap: 8px;
    align-items: stretch;
    max-width: 22rem;
}
.campo.perfil-idioma select,
.perfil-idioma-linha select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 14rem;
}
.perfil-idioma-linha button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.perfil-historico {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.perfil-historico-scroll {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.perfil-historico thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.checkout-cobranca-campos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkout-cobranca-linha {
    display: grid;
    gap: 10px 12px;
    align-items: end;
}
.checkout-cobranca-linha--cep {
    grid-template-columns: minmax(0, 1.2fr) 4.8rem minmax(0, 1.8fr);
}
.checkout-cobranca-linha--local {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.8rem;
}
.checkout-campo { min-width: 0; width: 100%; }
.checkout-campo--largo { min-width: 0; }
.checkout-campo--num,
.checkout-campo--uf { min-width: 0; }
.checkout-campo--comp { min-width: 0; }
.checkout-campo label {
    display: block;
    margin-bottom: 4px;
    font-size: calc(.7rem + 1pt);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}
.checkout-campo input,
.checkout-campo select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    font-size: calc(.9rem + 1pt);
    font-family: inherit;
    outline: none;
}
.checkout-campo input:focus,
.checkout-campo select:focus {
    border-color: var(--primaria);
    box-shadow: 0 0 0 1px rgba(0, 200, 83, .28);
}
.checkout-rodape {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkout-confirmar {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.checkout-confirmar .btn {
    width: 100%;
    flex: none;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 16px;
    font-size: calc(.92rem + 1pt);
    line-height: 1.2;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 200, 83, .25);
}
.checkout-confirmar .btn-primario:hover {
    box-shadow: 0 4px 16px rgba(0, 200, 83, .38);
}
#btn-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.checkout-btn-acao {
    font-size: calc(.88rem + 1pt);
    font-weight: 650;
}
.checkout-btn-valor {
    font-size: calc(1.28rem + 1pt);
    font-weight: 700;
    letter-spacing: -.02em;
    font-family: 'Space Grotesk', sans-serif;
}
.checkout-termos {
    text-align: center;
    margin-top: 10px;
    font-size: calc(.74rem + 1pt);
    line-height: 1.4;
}
.checkout-planos {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}
.checkout-plano {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--fundo);
    color: var(--texto);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}
.checkout-plano.is-ativo {
    border-color: var(--primaria);
    background: rgba(0, 200, 83, .1);
}
.checkout-plano-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.checkout-plano-nome { font-size: calc(.88rem + 1pt); font-weight: 650; }
.checkout-plano-pontos { font-size: calc(.7rem + 1pt); color: var(--texto-fraco); }
.checkout-plano-preco {
    font-size: calc(.84rem + 1pt);
    font-weight: 650;
    color: var(--texto);
    white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif;
}
.checkout-plano.is-ativo .checkout-plano-preco { color: var(--primaria); }
.checkout-ciclos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 3px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo);
}
.checkout-ciclo {
    flex: 1;
    padding: 8px 4px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--texto-fraco);
    font-family: inherit;
    font-size: calc(.76rem + 1pt);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    transition: background .15s, color .15s;
}
.checkout-ciclo.is-ativo {
    background: var(--gradiente);
    color: #fff;
    text-shadow: var(--sombra-texto-botao);
}
.checkout-ciclo-eco {
    display: block;
    font-size: calc(.62rem + 1pt);
    font-weight: 700;
    color: var(--verde);
}
.checkout-ciclo.is-ativo .checkout-ciclo-eco {
    color: #fff;
    text-shadow: inherit;
}
.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-2);
}
.checkout-total-plano {
    margin: 0 0 2px;
    font-size: calc(.9rem + 1pt);
    font-weight: 650;
}
.checkout-total-meta {
    margin: 0;
    font-size: calc(.75rem + 1pt);
    color: var(--texto-fraco);
}
.checkout-total-valores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-family: 'Space Grotesk', sans-serif;
}
.checkout-total-valores strong {
    font-size: calc(1.2rem + 1pt);
    font-weight: 700;
    color: var(--primaria);
    letter-spacing: -.02em;
}
.checkout-total-valores span {
    font-size: calc(.74rem + 1pt);
    color: var(--texto-fraco);
}
.checkout-total-valores small {
    font-size: calc(.68rem + 1pt);
    color: var(--texto-fraco);
}
.checkout-pagina [hidden] { display: none !important; }

@media (max-width: 900px) {
    .checkout-topo,
    .checkout-pagamento-grade { grid-template-columns: 1fr; }
    .checkout-bloco--id {
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }
    .checkout-bloco--plano { background: var(--fundo-2); }
    .perfil-grade { grid-template-columns: 1fr; }
    .perfil-historico { min-height: 320px; max-height: 70vh; }
    .perfil-linha-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .checkout-identidade { grid-template-columns: 1fr; }
    .checkout-cobranca-linha--cep {
        grid-template-columns: minmax(0, 1fr) 4.8rem minmax(0, 1.4fr);
    }
    .checkout-cobranca-linha--local {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.8rem;
    }
}
@media (max-width: 480px) {
    .checkout-cartao-base { grid-template-columns: 1fr 1fr; }
    .checkout-cartao-linha--nome {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }
    .checkout-cobranca-linha--cep {
        grid-template-columns: minmax(0, 1fr) 4.8rem;
    }
    .checkout-campo--comp { grid-column: 1 / -1; }
    .checkout-cobranca-linha--local {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.8rem;
    }
}

.assinatura-sucesso {
    text-align: center;
    padding: 36px 28px 32px;
    background: rgba(0, 200, 83, .07);
    border: 1px solid rgba(0, 200, 83, .28);
    border-radius: 18px;
}
.assinatura-sucesso-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--primaria, #00c853);
    color: #052e16;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.assinatura-sucesso h1 {
    margin: 0 0 8px;
    font-size: 1.55rem;
}
.assinatura-sucesso-pontos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 20px;
}
.assinatura-sucesso-pontos > div {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 14px 12px;
}
.assinatura-sucesso-rotulo {
    display: block;
    font-size: .78rem;
    color: var(--texto-fraco);
    margin-bottom: 4px;
}
.assinatura-sucesso-pontos strong {
    font-size: 1.25rem;
    color: #69f0ae;
}
.assinatura-sucesso-texto {
    color: var(--texto-fraco);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0 0 22px;
}
@media (max-width: 520px) {
    .assinatura-sucesso-pontos { grid-template-columns: 1fr; }
}

.cron-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.cron-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
    margin: 0;
}
.cron-card-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.cron-card h2 {
    margin: 0 0 4px;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--texto);
}
.cron-card-freq {
    margin: 0;
    font-size: .82rem;
    color: var(--texto-fraco);
}
.cron-card-resumo {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--texto);
    line-height: 1.45;
}
.cron-card-tarefas {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--texto-fraco);
    font-size: .85rem;
    line-height: 1.55;
}
.cron-card-exec {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: .88rem;
}
.cron-destaque {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--borda);
    background: rgba(0,0,0,.22);
    margin-bottom: 10px;
}
.cron-destaque-tempo {
    min-width: 92px;
    text-align: center;
    line-height: 1;
}
.cron-destaque-tempo strong {
    display: block;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--texto);
}
.cron-destaque-tempo span {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
}
.cron-destaque-info { min-width: 0; }
.cron-destaque-frase {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
}
.cron-destaque-origem {
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 650;
}
.cron-destaque-cron,
.cron-destaque-http {
    border-color: rgba(34,197,94,.45);
    background: rgba(34,197,94,.1);
}
.cron-destaque-cron .cron-destaque-origem,
.cron-destaque-http .cron-destaque-origem { color: #4ade80; }
.cron-destaque-manual {
    border-color: rgba(245,158,11,.5);
    background: rgba(245,158,11,.1);
}
.cron-destaque-manual .cron-destaque-origem { color: #fbbf24; }
.cron-destaque-alerta,
.cron-destaque-desconhecida {
    border-color: rgba(248,113,113,.5);
    background: rgba(248,113,113,.1);
}
.cron-aviso-vps {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.35);
    color: #fca5a5;
    font-size: .84rem;
    font-weight: 650;
}
.cron-aviso-vps-info {
    background: rgba(34,211,238,.08);
    border-color: rgba(34,211,238,.28);
    color: var(--ciano);
    font-weight: 500;
}
.cron-card-exec p { margin: 0 0 4px; }
.cron-card-muted { color: var(--texto-fraco); font-size: .82rem; }
.cron-card-metricas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.cron-card-metricas span {
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 650;
}
.cron-card-metricas em {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: .7rem;
    color: var(--texto-fraco);
    margin-bottom: 2px;
}
.cron-card-acoes { margin: 0 0 16px; }
.cron-cyber {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
}
.cron-cyber h3 {
    margin: 0 0 6px;
    font-size: .92rem;
}
.cron-cyber > p {
    margin: 0 0 10px;
    font-size: .82rem;
    color: var(--texto-fraco);
    line-height: 1.4;
}
.cron-cyber-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    margin-bottom: 10px;
}
.cron-cyber-tabela th,
.cron-cyber-tabela td {
    text-align: left;
    vertical-align: top;
    padding: 6px 8px;
    border-bottom: 1px solid var(--borda);
}
.cron-cyber-tabela th {
    width: 8.2rem;
    color: var(--texto-fraco);
    font-weight: 600;
    white-space: nowrap;
}
.cron-comando {
    display: block;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--ciano);
    word-break: break-all;
    background: rgba(0,0,0,.28);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.cron-log {
    background: #0a0a18;
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 16px 18px;
    font-family: monospace;
    font-size: .82rem;
    line-height: 1.65;
    max-height: 360px;
    overflow-y: auto;
}
@media (max-width: 720px) {
    .cron-grade { grid-template-columns: 1fr; }
}

/* Conversor e otimizador de imagens */
.pills-formato {
    flex-wrap: wrap;
}
.pills-formato .pill {
    flex: 0 0 auto;
    min-width: 64px;
}
.pill.pill-desativado,
.pill:disabled {
    opacity: .38;
    cursor: not-allowed;
    text-decoration: line-through;
}
.conversor-qualidade {
    display: flex;
    align-items: center;
    min-height: 32px;
}
.conversor-qualidade input[type="range"] {
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}
.conversor-qualidade input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
}
.conversor-qualidade input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--primaria, #22c55e);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    cursor: grab;
}
.conversor-qualidade input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
}
.conversor-qualidade input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primaria, #22c55e);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    cursor: grab;
}
.conversor-origem {
    margin: 0;
    font-weight: 700;
    letter-spacing: .04em;
}
.conversor-arquivo-sem-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px dashed var(--borda);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
}
.conversor-arquivo-sem-preview span {
    font-size: 1.6rem;
}
.conversor-arquivo-sem-preview p {
    margin: 0;
    color: var(--texto-fraco);
    font-size: .9rem;
}
.turno-imagem .turno-video-acoes {
    margin-top: 10px;
}

.refs-area-restauracao .ref-thumb video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, .35);
    border-radius: 10px;
    display: block;
}

.ferramenta-area--gif {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}
.ferramenta-area--gif .ferramenta-lateral {
    padding: 14px;
}
.ferramenta-area--gif .campo {
    margin-bottom: 10px;
}
.ferramenta-area--gif .campo--ultimo {
    margin-bottom: 0;
}
.ferramenta-area--gif .campo label {
    margin-bottom: 4px;
    font-size: .8rem;
}
.ferramenta-area--gif .pills {
    padding: 2px;
    gap: 2px;
    border-radius: 9px;
    flex-wrap: wrap;
}
.ferramenta-area--gif .pill {
    padding: 9px 6px;
    font-size: .76rem;
    border-radius: 7px;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
}
.ferramenta-area--gif #pillsQualidade .pill {
    flex: 1 1 calc(50% - 2px);
}
.ferramenta-area--gif .opcao-switch {
    padding: 8px 10px;
    font-size: .8rem;
}
.ferramenta-area--gif .pill.ativo {
    box-shadow: none;
}
.ferramenta-area--gif .refs-area-restauracao {
    padding: 10px;
    border-radius: 12px;
}
.ferramenta-area--gif .dropzone-hero {
    min-height: 84px;
    padding: 10px 8px;
    gap: 2px;
}
.ferramenta-area--gif .dropzone-hero-icone { font-size: 1.45rem; }
.ferramenta-area--gif .dropzone-hero-titulo { font-size: .86rem; }
.ferramenta-area--gif .dropzone-hero-sub { font-size: .72rem; }
.ferramenta-area--gif .refs-acoes-centro {
    margin-top: 8px;
    gap: 6px;
}
.ferramenta-area--gif .refs-acoes-centro > .btn {
    min-width: 0;
    flex: 1;
    font-size: calc(.82rem - 1pt);
    padding: 6px 8px;
}
.ferramenta-area--gif .refs-area-restauracao .ref-thumb {
    max-width: 100%;
    aspect-ratio: 16 / 9;
}
.gif-topo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 18px 18px;
    min-width: 0;
}
.gif-topo:has(#blocoPlayer:not([hidden])) .gif-topo-vazio {
    display: none;
}
.gif-topo-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 280px;
    padding: 28px 16px;
    border-radius: 12px;
    border: 1.5px dashed rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .22);
    text-align: center;
}
.gif-topo-vazio p { margin: 0; color: var(--texto); }
.gif-topo-vazio-icone { font-size: 1.85rem; line-height: 1; margin-bottom: 6px; }
.gif-topo-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.gif-topo-dica { margin: 0; }
.gif-topo-acoes .btn { min-width: 180px; }

.gif-player {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gif-player video {
    width: 100%;
    max-height: 420px;
    border-radius: 12px;
    background: #000;
    display: block;
}
.gif-timeline {
    position: relative;
    height: 28px;
    margin: 4px 2px 0;
}
.gif-timeline-trilha {
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}
.gif-timeline-sel {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--primaria, #22c55e);
    opacity: .85;
}
.gif-timeline input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.gif-timeline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primaria, #22c55e);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    cursor: grab;
    position: relative;
    z-index: 2;
}
.gif-timeline input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primaria, #22c55e);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    cursor: grab;
}
.gif-timeline input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
}
.gif-timeline-rotulos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    color: var(--texto-fraco);
    gap: 8px;
}
.gif-timeline-rotulos strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}
.gif-timeline-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#secaoExportadas {
    margin-top: 0;
}
.editor-exportadas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.editor-exportada {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}
.editor-exportada-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, .35);
    cursor: zoom-in;
}
.editor-exportada-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.editor-exportada-nome {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-exportada-acoes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.editor-exportada-acoes .btn {
    flex: 1 1 auto;
}

/* Analytics (admin) */
.an-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.an-periodos, .an-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.an-periodo-custom {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}
.an-periodo-custom label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .82rem;
    color: var(--texto-fraco);
}
.an-periodo-custom input[type="date"] {
    background: var(--fundo-2);
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    font-size: .82rem;
}
.an-equipe-nota {
    margin: 0;
    max-width: 34em;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--texto-fraco);
}
.an-equipe-nota strong { color: var(--texto); font-weight: 600; }
.an-bloco {
    background: var(--fundo-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px 18px;
    margin-bottom: 22px;
}
.an-bloco h2 { font-size: 1.05rem; margin: 0 0 14px; }
.an-hint { color: var(--texto-fraco); font-size: .85rem; margin: -8px 0 14px; }
.an-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 8px;
}
.an-grade .an-bloco { margin-bottom: 0; }
.an-grafico-plot {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding: 8px 4px 0;
    border-bottom: 1px solid var(--borda);
}
.an-col {
    flex: 1 1 0;
    min-width: 6px;
    height: 100%;
    position: relative;
}
.an-col-acessos, .an-col-unicos {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    border-radius: 4px 4px 0 0;
}
.an-col-acessos { background: rgba(0, 200, 83, .35); z-index: 1; }
.an-col-unicos { background: var(--ciano); opacity: .85; z-index: 2; }
.an-grafico-eixo {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    color: var(--texto-fraco);
    font-size: .68rem;
}
.an-grafico-eixo span { flex: 1 1 0; text-align: center; overflow: hidden; white-space: nowrap; }
.an-grafico-legenda {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: .8rem;
    color: var(--texto-fraco);
}
.an-leg-acessos::before, .an-leg-unicos::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -1px;
}
.an-leg-acessos::before { background: rgba(0, 200, 83, .55); }
.an-leg-unicos::before { background: var(--ciano); }
.an-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.an-rank-topo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .86rem;
    margin-bottom: 4px;
}
.an-rank-topo small { color: var(--texto-fraco); font-weight: 400; }
.an-rank-barra {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 99px;
    overflow: hidden;
}
.an-rank-barra i {
    display: block;
    height: 100%;
    background: var(--gradiente);
    border-radius: 99px;
}
.an-vazio { color: var(--texto-fraco); font-size: .9rem; margin: 0; }
.an-ver-mais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.an-ver-mais-hint { margin: 0; }
@media (max-width: 720px) {
    .an-grafico-plot { height: 140px; }
}