/* Auceno Studio — painel. Tema escuro com acento âmbar. */
:root {
  --bg: #0D0E12; --bg2: #121419; --painel: #171920; --painel2: #1D2028; --borda: #282C36; --borda2: #343947;
  --texto: #E9EBF1; --suave: #9AA0AE; --fraco: #6B7180;
  --acento: #F2B544; --acento-esc: #C98F22; --acento-fundo: rgba(242,181,68,.12);
  --ok: #3DD68C; --ok-fundo: rgba(61,214,140,.12); --aviso: #F5A524; --aviso-fundo: rgba(245,165,36,.12);
  --erro: #F2555A; --erro-fundo: rgba(242,85,90,.12); --info: #5AA9FF; --info-fundo: rgba(90,169,255,.12);
  --raio: 12px; --raio-p: 8px; --sombra: 0 10px 30px rgba(0,0,0,.35);
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); font: 14px/1.5 var(--fonte); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
.suave { color: var(--suave); } .fraco { color: var(--fraco); } .mono { font-family: var(--mono); }
.pequeno { font-size: 12.5px; } .grande { font-size: 22px; font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }

/* ---------- estrutura ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral { background: var(--bg2); border-right: 1px solid var(--borda); padding: 18px 12px; position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 15px; }
.marca img { width: 30px; height: 30px; }
.marca small { display: block; color: var(--fraco); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.nav-titulo { color: var(--fraco); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p); color: var(--suave); font-weight: 500; }
.nav a:hover { background: var(--painel); color: var(--texto); text-decoration: none; }
.nav a.ativo { background: var(--acento-fundo); color: var(--acento); }
.nav a .ic { width: 18px; text-align: center; opacity: .9; }
.lateral .rodape { margin-top: auto; padding: 10px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 6px; }
.status-robo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--suave); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); flex: none; }
.ponto.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fundo); }
.ponto.aviso { background: var(--aviso); } .ponto.erro { background: var(--erro); }
.principal { min-width: 0; }
.topo-mobile { display: none; }
.conteudo { max-width: 1120px; margin: 0 auto; padding: 28px 32px 120px; }
.cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cabeca p { color: var(--suave); margin-top: 6px; }
.banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

/* ---------- componentes ---------- */
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; }
.cartao + .cartao { margin-top: 14px; }
.cartao.plano { background: transparent; }
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha.entre { justify-content: space-between; } .coluna { display: flex; flex-direction: column; gap: 6px; }
.espaco { flex: 1; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.kpi .rot { color: var(--suave); font-size: 12.5px; } .kpi .val { font-size: 24px; font-weight: 700; margin: 4px 0 2px; }
.kpi .sub { color: var(--fraco); font-size: 12px; } .kpi .val.ok { color: var(--ok); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--borda2);
  background: var(--painel2); color: var(--texto); padding: 8px 14px; border-radius: var(--raio-p); font: 600 13.5px var(--fonte);
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: #252935; border-color: #434958; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #17130A; }
.btn.primario:hover { background: #F7C462; }
.btn.perigo { color: var(--erro); border-color: rgba(242,85,90,.35); background: transparent; }
.btn.perigo:hover { background: var(--erro-fundo); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--suave); }
.btn.fantasma:hover { color: var(--texto); background: var(--painel2); }
.btn.peq { padding: 5px 10px; font-size: 12.5px; } .btn.grande { padding: 11px 20px; font-size: 14.5px; }
.btn.ocupado { position: relative; color: transparent !important; }
.btn.ocupado::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: var(--painel2); color: var(--suave); border: 1px solid var(--borda); white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
.selo.erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.selo.info { background: var(--info-fundo); color: var(--info); border-color: transparent; }
.selo.acento { background: var(--acento-fundo); color: var(--acento); border-color: transparent; }

.aviso { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--painel); align-items: flex-start; }
.aviso .ic { font-weight: 800; flex: none; width: 20px; text-align: center; }
.aviso.atencao { background: var(--aviso-fundo); border-color: rgba(245,165,36,.3); } .aviso.atencao .ic { color: var(--aviso); }
.aviso.erro { background: var(--erro-fundo); border-color: rgba(242,85,90,.3); } .aviso.erro .ic { color: var(--erro); }
.aviso.info { background: var(--info-fundo); border-color: rgba(90,169,255,.25); } .aviso.info .ic { color: var(--info); }
.aviso.ok { background: var(--ok-fundo); border-color: rgba(61,214,140,.25); } .aviso.ok .ic { color: var(--ok); }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso .fechar { margin-left: auto; }

/* ---------- formulários ---------- */
label.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
label.campo .ajuda, .ajuda { font-weight: 400; color: var(--fraco); font-size: 12.5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date],
select, textarea { background: var(--bg2); border: 1px solid var(--borda2); color: var(--texto); border-radius: var(--raio-p);
  padding: 9px 11px; font: 14px var(--fonte); width: 100%; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
textarea { resize: vertical; min-height: 180px; line-height: 1.55; }
input[type=range] { width: 100%; accent-color: var(--acento); }
input[type=checkbox] { accent-color: var(--acento); width: 16px; height: 16px; }
.interruptor { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.interruptor input { margin-top: 2px; }
.segmentado { display: inline-flex; background: var(--bg2); border: 1px solid var(--borda2); border-radius: var(--raio-p); padding: 3px; gap: 3px; flex-wrap: wrap; }
.segmentado button { background: transparent; border: 0; color: var(--suave); padding: 6px 12px; border-radius: 6px; font: 600 13px var(--fonte); cursor: pointer; }
.segmentado button.ativo { background: var(--painel2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda2); }
.opcoes-cartao { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.opcao { border: 1px solid var(--borda2); background: var(--bg2); border-radius: var(--raio); padding: 12px 14px; cursor: pointer; text-align: left; color: var(--texto); font: inherit; }
.opcao:hover { border-color: #4a5060; }
.opcao.ativo { border-color: var(--acento); background: var(--acento-fundo); }
.opcao strong { display: block; } .opcao span { color: var(--suave); font-size: 12.5px; }
.valor-escala { font-weight: 700; color: var(--acento); min-width: 54px; text-align: right; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button, .abas a { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--suave); padding: 10px 14px;
  font: 600 14px var(--fonte); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.abas .ativo { color: var(--texto); border-bottom-color: var(--acento); }
.abas a:hover, .abas button:hover { color: var(--texto); text-decoration: none; }

/* ---------- assistente (produzir) ---------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 22px; }
.passo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--painel);
  border: 1px solid var(--borda); color: var(--suave); font-weight: 600; font-size: 13px; cursor: pointer; }
.passo .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--painel2); font-size: 12px; flex: none; }
.passo.ativo { border-color: var(--acento); color: var(--texto); } .passo.ativo .n { background: var(--acento); color: #17130A; }
.passo.feito .n { background: var(--ok-fundo); color: var(--ok); }
.barra-acao { position: sticky; bottom: 0; margin-top: 22px; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 10px; }
.barra-acao .dentro { display: flex; align-items: center; gap: 12px; background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); }
.grupo-ajuste { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); }
.grupo-ajuste + .grupo-ajuste { margin-top: 10px; }
.grupo-ajuste > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.grupo-ajuste > summary::-webkit-details-marker { display: none; }
.grupo-ajuste > summary::after { content: "▾"; color: var(--fraco); }
.grupo-ajuste[open] > summary::after { content: "▴"; }
.grupo-ajuste .corpo { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--borda); padding-top: 16px; }
.campo-ajuste .topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.campo-ajuste .topo label { font-weight: 600; font-size: 13px; }
.segurado { opacity: .55; }
details.entenda { margin-top: 6px; }
details.entenda > summary { cursor: pointer; color: var(--suave); font-size: 12.5px; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.entenda > summary::-webkit-details-marker { display: none; }
details.entenda > summary::before { content: "▸"; font-size: 11px; }
details.entenda[open] > summary::before { content: "▾"; }
details.entenda > p { margin-top: 6px; color: var(--suave); font-size: 13px; line-height: 1.55; padding-left: 12px; border-left: 2px solid var(--borda2); }
.interruptor details.entenda { font-weight: 400; }
.barra-real { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--painel2); }
.barra-real .r { background: var(--ok); } .barra-real .i { background: #8B6CFF; }
.legenda-barra { display: flex; gap: 14px; font-size: 12.5px; color: var(--suave); margin-top: 6px; }
.legenda-barra i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.resumo-lista { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; font-size: 13.5px; }
.resumo-lista dt { color: var(--suave); } .resumo-lista dd { margin: 0; }

/* ---------- produções ---------- */
.lista-prod { display: flex; flex-direction: column; gap: 10px; }
.prod { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; background: var(--painel);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.prod .titulo { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 2px; }
.prod .meta { display: flex; gap: 22px; font-size: 12.5px; color: var(--suave); }
.prod .meta b { display: block; color: var(--texto); font-size: 13.5px; }
.prod .acoes { display: flex; gap: 6px; }
.progresso { height: 6px; border-radius: 999px; background: var(--painel2); overflow: hidden; margin-top: 8px; }
.progresso > div { height: 100%; background: var(--acento); transition: width .6s; }
.etapas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0 4px; }
.etapa { padding: 8px 10px; border-radius: var(--raio-p); background: var(--painel2); font-size: 12.5px; color: var(--fraco); border: 1px solid transparent; }
.etapa b { display: block; color: var(--suave); font-size: 13px; }
.etapa.feita b { color: var(--ok); } .etapa.atual { border-color: var(--acento); } .etapa.atual b { color: var(--acento); }
.etapa.falhou { border-color: var(--erro); } .etapa.falhou b { color: var(--erro); }
.diario { background: var(--bg2); border: 1px solid var(--borda); border-radius: var(--raio-p); font: 12.5px/1.6 var(--mono);
  padding: 12px; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.diario .l-erro { color: var(--erro); } .diario .l-ok { color: var(--ok); } .diario .t { color: var(--fraco); }
.vazio { text-align: center; padding: 48px 20px; color: var(--suave); }
.vazio h3 { color: var(--texto); margin-bottom: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { background: var(--painel2); border: 1px solid var(--borda); padding: 3px 10px; border-radius: 999px; font-size: 12.5px; }

/* ---------- canais (lista + editor) ---------- */
.mestre { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--painel); }
.mestre .lista { border-right: 1px solid var(--borda); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.mestre .item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: var(--raio-p); cursor: pointer; }
.mestre .item:hover { background: var(--painel2); } .mestre .item.ativo { background: var(--acento-fundo); }
.mestre .item small { display: block; color: var(--fraco); font-size: 12px; }
.mestre .editor { padding: 20px; min-width: 0; }
.avatar-img { width: 36px; height: 36px; border-radius: 50%; background: var(--painel2); display: grid; place-items: center; font-weight: 700;
  font-size: 13px; color: var(--suave); object-fit: cover; flex: none; overflow: hidden; }
.avatar-img.g { width: 64px; height: 64px; font-size: 20px; }

/* ---------- tabelas ---------- */
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; color: var(--suave); font-weight: 600; font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- chaves ---------- */
.chave { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.chave:last-child { border-bottom: 0; }
.chave .guardada { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- modal + toasts ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(5,6,9,.66); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--painel); border: 1px solid var(--borda2); border-radius: 14px; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--sombra); }
.modal .mt { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.modal .mc { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal .mr { padding: 14px 18px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--painel2); border: 1px solid var(--borda2); border-left: 3px solid var(--acento); padding: 10px 14px;
  border-radius: var(--raio-p); box-shadow: var(--sombra); max-width: 380px; animation: entra .2s ease-out; }
.toast.erro { border-left-color: var(--erro); } .toast.ok { border-left-color: var(--ok); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrar .arte { padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(1200px 600px at -10% 110%, rgba(242,181,68,.16), transparent 60%), var(--bg2); border-right: 1px solid var(--borda); }
.entrar .arte h1 { font-size: 42px; max-width: 520px; }
.entrar .arte h1 em { color: var(--acento); font-style: normal; }
.entrar .form { display: grid; place-items: center; padding: 32px; }
.entrar .caixa { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }

.esqueleto { background: linear-gradient(90deg, var(--painel) 25%, var(--painel2) 50%, var(--painel) 75%); background-size: 200% 100%;
  animation: brilho 1.2s infinite; border-radius: var(--raio); height: 90px; }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 40; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; box-shadow: var(--sombra); }
  .topo-mobile { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borda); background: var(--bg2); position: sticky; top: 0; z-index: 30; }
  .conteudo { padding: 20px 16px 120px; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3, .g2 { grid-template-columns: 1fr; }
  .passos { grid-template-columns: repeat(2, 1fr); } .etapas { grid-template-columns: repeat(3, 1fr); }
  .mestre { grid-template-columns: 1fr; } .mestre .lista { border-right: 0; border-bottom: 1px solid var(--borda); }
  .prod { grid-template-columns: 1fr; } .resumo-lista { grid-template-columns: 1fr; }
  .entrar { grid-template-columns: 1fr; } .entrar .arte { display: none; }
}

/* Canais (mesma organização do Dotti) */
.cabeca-canal { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 18px; margin: -4px 0 6px; border-bottom: 1px solid var(--borda); }
.cabeca-canal h2 { margin: 0 0 2px; }
.secao-canal { padding: 22px 0 6px; border-top: 1px solid var(--borda); position: relative; }
.secao-canal:first-of-type { border-top: 0; }
.secao-canal .fio-secao { position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--acento); }
.secao-canal:first-of-type .fio-secao { display: none; }
.secao-canal h3 { margin: 0 0 14px; font-size: 16px; }
.secao-canal h3 .nota { font-weight: 400; font-size: 13px; color: var(--fraco); margin-left: 8px; }
.com-icone { position: relative; }
.com-icone input { padding-left: 42px; width: 100%; }
.com-icone .icone-yt { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #e62117; color: #fff; font-size: 9px;
  width: 22px; height: 15px; border-radius: 4px; display: grid; place-items: center; pointer-events: none; }
.conferido { margin-top: 8px; gap: 8px; font-size: 13px; }
.conferido p { margin: 0; }
.faixa-pct { flex-wrap: nowrap; gap: 12px; }
.faixa-pct input[type=range] { flex: 1; }
.caixa-pct { min-width: 56px; text-align: center; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 6px; font-weight: 700; }
.rodape-canal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.mestre .item small.voz { color: var(--acento); }
.avatar-img.tracejado { background: transparent; border: 1px dashed var(--borda); }
.mestre .item > div { min-width: 0; flex: 1; }
.mestre .item b, .mestre .item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabeca-canal h2, .cabeca-canal p { overflow-wrap: anywhere; }

/* Seus créditos (formato do Dotti) */
.secao-creditos { margin-bottom: 22px; }
.secao-creditos h2 { margin: 0 0 6px; }
.grade-creditos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 18px;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--painel); }
.credito { padding: 28px 32px 0; display: flex; flex-direction: column; min-width: 0; }
.credito + .credito { border-left: 1px solid var(--borda); }
.topo-credito { align-items: flex-start; margin-bottom: 26px; }
.topo-credito b { font-size: 19px; }
.logo-credito { width: 44px; height: 44px; border-radius: 10px; background: #fff; color: #000; display: grid; place-items: center; margin-right: 4px; }
.rotulo-credito { color: var(--suave); margin: 0 0 4px; }
.valor-credito { font-size: 50px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }
.valor-credito.baixo { color: var(--aviso, #e0a030); }
.texto-credito { line-height: 1.6; flex: 1; }
.rodape-credito { border-top: 1px solid var(--borda); margin-top: 18px; padding: 16px 0 20px; }
@media (max-width: 760px) { .credito + .credito { border-left: 0; border-top: 1px solid var(--borda); } .valor-credito { font-size: 40px; } }

/* ===== Integrações no formato do Dotti ===== */
.pagina-int .sublinhado { position: relative; padding-bottom: 14px; }
.pagina-int .sublinhado::after { content: ""; position: absolute; left: 0; bottom: 0; width: 130px; height: 2px; background: linear-gradient(90deg, var(--acento), transparent); }
.secao-int { margin-top: 34px; }
.secao-int h2 { margin: 0 0 6px; font-size: 21px; }
.logo-int { display: inline-grid; place-items: center; border-radius: 10px; flex: none; overflow: hidden; }
.link-claro { color: var(--texto); text-decoration: none; } .link-claro:hover { text-decoration: underline; }
.quadro-creditos { margin-top: 18px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--painel); }
.quadro-creditos .grade-creditos { margin: 0; border: 0; border-radius: 0; background: transparent; }
.grade-celulas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--borda); }
.celula-credito { padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.celula-credito + .celula-credito { border-left: 1px solid var(--borda); }
.celula-credito .linha { gap: 8px; flex-wrap: nowrap; } .celula-credito b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.valor-celula { font-size: 24px; font-weight: 800; margin: 14px 0 6px; }
.estado-celula.ok { color: var(--ok); }
@media (max-width: 1200px) { .grade-celulas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .celula-credito { border-top: 1px solid var(--borda); }
  .celula-credito + .celula-credito { border-left: 0; } .celula-credito:nth-child(even) { border-left: 1px solid var(--borda); } }
.falta-chave, .aviso-int { display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); margin-bottom: 12px; }
.excl { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--erro-fundo); color: var(--erro); }
.excl.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.nome-falta { margin: 12px 0 2px; font-weight: 700; letter-spacing: .04em; font-size: 13px; }
.rot-aviso { color: var(--aviso); letter-spacing: .1em; font-size: 12px; margin: 2px 0 4px; }
.grade-chaves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 1150px) { .grade-chaves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grade-chaves { grid-template-columns: 1fr; } }
.cartao-chave { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cartao-chave.pede { border-color: rgba(245,165,36,.45); background: linear-gradient(180deg, rgba(245,165,36,.06), var(--painel) 60%); }
.nome-chave { font-size: 16px; }
.marca-chave { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); color: var(--suave); }
.marca-chave.obrig { color: var(--erro); border-color: rgba(242,85,90,.45); background: var(--erro-fundo); }
.pilula { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--fraco); background: rgba(255,255,255,.03); white-space: nowrap; }
.pilula.ok { color: var(--ok); border-color: rgba(61,214,140,.35); background: var(--ok-fundo); }
.pilula.erro { color: var(--erro); border-color: rgba(242,85,90,.35); background: var(--erro-fundo); }
.pilula.aviso { color: var(--aviso); border-color: rgba(245,165,36,.35); background: var(--aviso-fundo); }
.chave-guardada { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 12px; background: rgba(0,0,0,.18); }
.pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fraco); margin-right: 8px; vertical-align: middle; }
.pt.ok { background: var(--ok); } .pt.erro { background: var(--erro); } .pt.aviso { background: var(--aviso); }
.icone-btn { background: none; border: 0; color: var(--suave); cursor: pointer; padding: 2px 6px; font-size: 14px; } .icone-btn.perigo { color: var(--erro); }
.entrada-chave { width: 100%; } .entrada-chave.escondida { display: none; }
.limite-chave { border-top: 1px solid var(--borda); padding-top: 12px; flex: 1; } .limite-chave p { margin: 4px 0 0; line-height: 1.5; }
.pegar-chave { font-size: 12px; letter-spacing: .14em; color: var(--texto); text-decoration: none; margin-top: 6px; }
.lista-conexoes { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.cartao-conexao { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); padding: 18px 20px; }
.cartao-conexao p { margin: 6px 0 12px; }
.btn.vermelho { background: #E5262E; color: #fff; border-color: #E5262E; font-weight: 700; }
.btn.vermelho:hover { filter: brightness(1.08); } .btn.vermelho[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.botao-contas { margin-top: 2px; }
.lista-contas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .lista-contas.escondida { display: none; }
.conta-yt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 12px; background: rgba(0,0,0,.15); }
.conta-yt .letra { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(61,214,140,.15); color: var(--ok); font-weight: 700; flex: none; }
.conta-yt p { margin: 2px 0 0; } .estado-conta { color: var(--fraco); } .estado-conta.ok { color: var(--ok); } .estado-conta.aviso { color: var(--aviso); } .estado-conta.erro { color: var(--erro); }

/* ===== Custos no formato do Dotti ===== */
.pagina-custos { max-width: 1100px; }
.chip-periodo { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 16px; background: var(--painel); }
.chip-periodo .cal { color: var(--suave); }
.segmentado.largo { display: flex; width: 100%; margin-top: 4px; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 4px; background: var(--painel); }
.segmentado.largo button { flex: 1; }
.btn.largo { width: 100%; justify-content: center; }
.quadro-custos { margin-top: 24px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linha-resumo { padding: 22px 26px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha-resumo + .linha-resumo { border-left: 1px solid var(--borda); }
.valor-resumo { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 4px; }
.linha-resumo.destaque { background: linear-gradient(135deg, rgba(229,38,46,.16), rgba(229,38,46,.03)); box-shadow: inset 0 1px 0 rgba(229,38,46,.55); }
.rotulo-total { color: #ff8f93; font-weight: 700; }
.bloco-custo { grid-column: 1 / -1; padding: 20px 26px; border-top: 1px solid var(--borda); }
.bloco-custo p { margin: 4px 0 0; } .bloco-custo .maior, .maior { font-size: 19px; }
.barra-composicao { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); margin: 14px 0 10px; }
.barra-composicao i.pl, .qd.pl { background: #8b93a7; } .barra-composicao i.us, .qd.us { background: #F2454B; }
.qd { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.bloco-custo.incompleta { background: rgba(245,165,36,.08); } .bloco-custo.incompleta b { color: var(--aviso); }
@media (max-width: 860px) { .quadro-custos { grid-template-columns: 1fr; } .linha-resumo + .linha-resumo { border-left: 0; border-top: 1px solid var(--borda); } }
.sanfona-planos { margin-top: 24px; }
.topo-planos { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: var(--painel); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 24px; cursor: pointer; font: inherit; }
.topo-planos h3 { margin: 0 0 4px; } .topo-planos .logo-int { margin-right: -6px; border: 2px solid var(--painel); }
.cartao-plano { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); padding: 22px 24px; }
.cartao-plano p { margin: 4px 0 0; } .ok-txt { color: var(--ok); } .aviso-txt { color: var(--aviso); }
.derivado { border-top: 1px solid var(--borda); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.cartao-por-video { margin-top: 24px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); overflow: hidden; }
.cab-por-video { padding: 22px 24px 14px; border-bottom: 1px solid var(--borda); } .cab-por-video h3 { margin: 0 0 4px; }
.linha-video { padding: 20px 24px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 10px; }
.linha-video.aberta { background: rgba(255,255,255,.025); }
.topo-video { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.miniatura { width: 30px; height: 26px; border: 1px solid var(--borda); border-radius: 5px; margin-top: 22px; flex: none; display: grid; place-items: center; color: var(--fraco); font-size: 12px; }
.meta-video { margin: 0 0 4px; } .titulo-video { font-size: 16px; display: block; } .seta { color: var(--suave); }
.estado-video { color: var(--fraco); margin-right: 6px; } .estado-video.ok { color: var(--ok); } .estado-video.erro { color: var(--erro); } .estado-video.aviso { color: var(--aviso); }
.linha-video .direita { display: flex; flex-direction: column; align-items: flex-end; }
.total-video { border-top: 1px solid var(--borda); padding-top: 12px; }
.onde-usado { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.onde-usado > .linha { border-top: 1px solid var(--borda); padding-top: 10px; }
.entenda-custo { border-top: 1px solid var(--borda); padding-top: 12px; } .entenda-custo p { margin: 6px 0 0; line-height: 1.55; }
.sanfona { margin-top: 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); }
.sanfona summary { padding: 20px 24px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.sanfona summary::after { content: "⌄"; color: var(--suave); } .sanfona[open] summary::after { content: "⌃"; }
.sanfona summary::-webkit-details-marker { display: none; }
.corpo-sanfona { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 6px; } .corpo-sanfona p { margin: 0 0 8px; line-height: 1.55; }
.rolar-tabela { overflow-x: auto; }
/* o ponto colorido não herda o estilo dos quadros de aviso (.aviso) */
i.pt.aviso, i.pt.ok, i.pt.erro { display: inline-block; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; margin: 0 8px 0 0; box-shadow: none; vertical-align: middle; }
i.pt.aviso { background: var(--aviso); } i.pt.ok { background: var(--ok); } i.pt.erro { background: var(--erro); }
.rolar-tabela td:nth-child(2), .rolar-tabela th:nth-child(2) { min-width: 280px; } .rolar-tabela td, .rolar-tabela th { white-space: nowrap; } .rolar-tabela td:nth-child(2) { white-space: normal; }