/* ============================================================================
   ponte.css -- liga as telas antigas ao layout novo.

   O CSS das paginas (styles.css + viralflow.css) e todo dirigido por variavel:
   .panel usa var(--panel), .pill-btn usa var(--blue) e assim por diante. Em vez
   de reescrever as ~25 telas uma por uma, aqui trocamos os tokens antigos pelos
   do layout novo -- as paginas herdam a paleta inteira sem uma linha de HTML
   mudada -- e depois desativamos o que sobrou do shell velho, que agora nao e
   mais usado mas ainda alcanca as classes reaproveitadas (.brand, .sidebar...).

   Carregado por ultimo, depois de layout.css.
   ========================================================================== */

:root {
  /* Paleta antiga reescrita com os tons do layout novo. As variaveis que os
     dois arquivos declaram (--line, --text, --muted, --green, --radius) ja vem
     do layout.css, que carrega antes daqui. */
  --page: #040705;
  --shell: #0f1210;
  --panel: #151815;
  --panel-2: #1c201d;
  --panel-3: #232722;
  --faint: #6b736c;

  /* O azul era a cor de acao do tema antigo; no novo o acento e verde. Trocar
     so a variavel repinta botao primario, aba ativa, foco de campo e chip. */
  --blue: #00c765;
  --blue-2: #00a854;
  --yellow: #c79a12;
  --danger: #ff6467;

  --radius-xl: 22px;
  --radius-lg: 18px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

/* Sobre verde claro, texto branco some. Onde o acento virou fundo, o texto
   passa a ser quase preto. */
.pill-btn.primary,
.icon-btn.active,
.badge.blue,
.view-tabs button.active,
.mini-btn.primary { color: #04150a; font-weight: 600; }
.pill-btn.primary i, .icon-btn.active i { color: inherit; }
.link-blue, .verified, a.link { color: #4ce894; }

/* --------------------------------------------------------------- shell velho
   base.html nao usa mais .app-frame/.app-body/.nav-link, mas .brand,
   .brand-mark, .sidebar e .topbar continuam no HTML novo com outro sentido.
   layout.css vence nas propriedades que declara; o que sobra do arquivo antigo
   e apagado aqui. */
.brand { font-size: inherit; font-weight: inherit; gap: 10px; }
.brand-mark {
  width: 27px; height: 27px; border-radius: 8px;
  background: transparent; box-shadow: none; font-size: inherit;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
/* .app-frame, .app-body, .content, .nav-link e .sidebar-spacer sairam do HTML
   junto com o shell antigo -- as regras deles ficam sem alvo, nao ha o que
   desativar. */

/* ------------------------------------------------------------ menu lateral
   O layout original desenhava com <svg> do lucide; aqui o icone e uma fonte
   (<i> do remixicon), entao as regras que miravam svg sao repetidas para i. */
.workspace-sidebar nav a i { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.workspace-sidebar nav a.active i { color: #5bea93; }
.workspace-compact .workspace-sidebar nav a i { font-size: 19px; }
.workspace-brand > button i { font-size: 17px; line-height: 1; }
.workspace-compact .workspace-brand > button i { transform: rotate(180deg); }
.workspace-mobile-menu i, .workspace-new i { font-size: 17px; line-height: 1; }

/* Foto de perfil no rodape do menu e na barra de cima. */
.workspace-account > span.tem-foto, .workspace-profile > span.tem-foto {
  background: #10171a; padding: 0; overflow: hidden;
}
.workspace-account > span.tem-foto img,
.workspace-profile > span.tem-foto img { width: 100%; height: 100%; object-fit: cover; }
.workspace-sidebar-footer { display: flex; align-items: center; }
.workspace-account { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.workspace-logout {
  width: 39px; height: 39px; flex: 0 0 auto; margin-right: 10px;
  display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line-strong); background: #191d1a; color: #97a09a;
}
.workspace-logout:hover { background: #24291f; color: #fff; }
.workspace-compact .workspace-logout { display: none; }

/* ------------------------------------------------------------- barra de cima
   .workspace-bell i era o pontinho de notificacao no original. Aqui o <i> e o
   proprio sino, entao o ponto virou .ponto e o sino volta a ser estatico. */
.workspace-bell i.ponto {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); right: 7px; top: 7px;
}
.workspace-bell > i:not(.ponto) {
  position: static; width: auto; height: auto; border-radius: 0;
  background: none; font-size: 18px; line-height: 1; color: #9aa39c;
}
.workspace-bell { text-decoration: none; }
.workspace-search { color: #858d86; }
.workspace-search i { font-size: 18px; line-height: 1; }
.workspace-search input { font-size: 12px; }
.workspace-new { border: 0; cursor: pointer; font-family: inherit; }

/* Menu da conta: o gatilho e o novo .workspace-profile, mas a gaveta continua
   sendo a .dropdown-menu que o app.js ja sabe abrir. */
.account-wrap { position: relative; }
.workspace-profile { cursor: pointer; }
.workspace-profile > i { color: var(--muted); font-size: 15px; transition: transform .2s ease; }
.account-wrap.open .workspace-profile > i { transform: rotate(180deg); }
.account-wrap .dropdown-menu {
  top: calc(100% + 8px); right: 0; left: auto;
  background: #191c19; border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------- area da pagina
   .workspace-page ja rola sozinha; as telas antigas so precisam parar de somar
   margem lateral por cima do padding dela. */
.workspace-page > .page-head:first-child { margin-top: 0; }
.workspace-page > *:last-child { margin-bottom: 0; }
.flash-stack { margin-bottom: 18px; }

/* O cabecalho proprio das telas antigas ganha o desenho do novo. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 20px; margin-bottom: 24px; }
.page-head h1 { font-weight: 400; font-size: clamp(26px, 2.7vw, 38px); letter-spacing: -.05em; }
.page-head .eyebrow-line, .eyebrow-line {
  color: #54ca87; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
}

/* Painel: canto e fundo do layout novo, mantendo o espacamento que as telas
   antigas ja assumem. */
.panel, .subpanel {
  border: 1px solid var(--line);
  background: rgba(21, 24, 22, .96);
  border-radius: 18px;
}
.subpanel { background: #1c201d; border-radius: 14px; }

.pill-btn {
  border-radius: 11px; border: 1px solid var(--line-strong);
  background: #1c1f1d; font-size: 12px;
}
.pill-btn.primary {
  border: 0; background: linear-gradient(120deg, #00d469, #8df12f);
  box-shadow: 0 7px 26px rgba(0, 218, 108, .14);
}
.pill-btn.primary:hover { background: linear-gradient(120deg, #00c25f, #7ee024); }
.pill-btn.outline { background: transparent; }

.field input, .field select, .field textarea,
.mini-field input, .mini-field select, .mini-field textarea {
  border-radius: 11px; border: 1px solid var(--line-strong); background: #202420;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }

/* --------------------------------------------------------------- flutuantes */
.toast, .exec-dock, .drawer-panel, .modal {
  border: 1px solid var(--line-strong);
  background: #191c19;
  border-radius: 16px;
}
.drawer-panel { border-radius: 22px 0 0 22px; }

@media (max-width: 900px) {
  .workspace-scrim[hidden] { display: none; }
  .page-head { display: grid; }
}

/* ---------------------------------------------------------------- colisoes
   layout.css tem classes de mesmo nome vindas do outro projeto. Onde o alvo
   era outro componente, a classe antiga foi renomeada nos templates
   (.page-head-actions -> .page-acoes, .empty-state -> .aviso-vazio). O que
   sobrou e ajustado aqui. */
.page-acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.page-acoes .pill-btn, .page-head .pill-btn { white-space: nowrap; }

/* .avatar do layout novo desenha iniciais num circulo com borda branca; aqui
   ainda existem <img class="avatar"> nas listas de usuario. */
img.avatar { border: 0; box-shadow: none; object-fit: cover; }

/* No original o menu recolhido escondia a conta inteira e sobrava uma faixa
   vazia no rodape. Aqui fica so a foto, centralizada; sair continua no menu
   da barra de cima. */
.workspace-compact .workspace-account { display: flex; justify-content: center; padding: 8px; }
.workspace-compact .workspace-account > div { display: none; }

/* ============================================================================
   Icones: o layout foi desenhado com <svg> do lucide, que tem largura e altura
   proprias. Aqui o icone e uma fonte (<i> do remixicon), que so obedece a
   font-size -- entao cada regra que mirava svg ganha a versao equivalente para
   i, trocando width/height por caixa + font-size onde o desenho dependia disso.
   ========================================================================== */
.video-thumb i { align-self: center; position: relative; z-index: 1; opacity: .88; font-size: 20px; }
.workspace-page-mark i { color: #35d980; font-size: 15px; }
.ws-metrics > div > i {
  width: 37px; height: 37px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 11px; background: rgba(0, 223, 111, .09); color: #55d98b; font-size: 18px;
}
.identity-cover i { position: absolute; right: 20px; bottom: 18px; color: #7cf29c; font-size: 22px; }
.plans-grid li i { color: #54db8b; font-size: 13px; flex: 0 0 auto; }
.health-list > div > span i { font-size: 17px; }
.health-list b i { font-size: 12px; }
.cookie-grid article > i { color: #54d98a; font-size: 19px; }
.checklist i { color: #55d98b; font-size: 14px; flex: 0 0 auto; }
.diagnostic-list > div > span i { font-size: 15px; }
.recent-list article > span i, .publication-thumb i, .clone-grid article i { font-size: 17px; }
.input-with-icon i, .secret-input i, .ws-filterbar > div > i { font-size: 16px; flex: 0 0 auto; }
.upload-zone > i { font-size: 22px; color: #55d98b; }
.economy-callout > i, .diagnostic-banner > span i { font-size: 21px; color: #55d98b; }
.library-card-copy div span i, .video-stats i, .task-card-meta i { font-size: 13px; flex: 0 0 auto; }
.ws-primary i, .ws-secondary i, .today-button i { font-size: 15px; line-height: 1; }
.library-cover > button i, .frame-phone > button i, .video-preview-frame > button i { font-size: 20px; }

/* ============================================================================
   Botao virando link. No projeto de origem tudo era estado de React, entao
   filtro, mes do calendario e item de agenda eram <button>. Aqui cada um leva
   para uma URL de verdade -- da para abrir em outra aba e o back do navegador
   funciona -- entao o <a> herda o desenho do <button> correspondente.
   ========================================================================== */
.publication-stats a {
  min-height: 74px; border: 1px solid var(--line); background: #121613;
  border-radius: 14px; padding: 13px; text-align: left; display: grid; gap: 7px;
  text-decoration: none; color: inherit;
}
.publication-stats a span { color: #777f78; font-size: 8px; }
.publication-stats a strong { font-size: 20px; font-weight: 400; }
.publication-stats a.active {
  border-color: rgba(0, 231, 122, .34);
  background: linear-gradient(135deg, rgba(0, 211, 105, .18), rgba(139, 243, 50, .04));
}

.publication-list article > form { display: contents; }
.publication-list article > form button,
.publication-list article > .botao-linha {
  height: 29px; border-radius: 8px; border: 1px solid var(--line);
  background: #1f241f; font-size: 8px; cursor: pointer; color: inherit;
  display: grid; place-items: center; text-decoration: none;
}
.publication-thumb.com-capa { overflow: hidden; }
.publication-thumb.com-capa img { width: 100%; height: 100%; object-fit: cover; }
.publication-list .pub-erro { color: #ff8a8e; }

.calendar-toolbar > div > a {
  height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: #1d221e; display: grid; place-items: center; padding: 0 11px;
  font-size: 9px; text-decoration: none; color: inherit;
}
.calendar-toolbar > div > a i { font-size: 15px; line-height: 1; }
.calendar-legend i.failed { background: #ff6d72; }

.calendar-grid > div > a {
  border: 0; border-left: 2px solid #e4b757; border-radius: 5px;
  background: rgba(228, 183, 87, .08); color: #d4d8d4; font-size: 7px;
  line-height: 1.35; text-align: left; padding: 5px; text-decoration: none;
  display: block; margin-top: 3px;
}
.calendar-grid > div > a small { display: block; color: #788079; margin-top: 3px; }
.calendar-grid > div > a.published { border-color: #27d97d; background: rgba(39, 217, 125, .07); }
.calendar-grid > div > a.failed { border-color: #ff6d72; background: rgba(255, 109, 114, .08); }
.calendar-grid > div > a.mais { border-left-color: var(--line-strong); background: transparent; color: #838b84; }
.calendar-grid > div.hoje { background: rgba(0, 211, 105, .05); }

/* Estado vazio: .empty-state do layout novo assume um pai com altura; dentro de
   um .ws-panel ela e zero, entao ganha respiro proprio. */
.ws-panel > .empty-state { min-height: 180px; padding: 26px 0; }
.ws-panel > .empty-state > i { font-size: 26px; color: #4c5651; }
.ws-panel > .empty-state h3 { font-size: 14px; color: #dce0dc; margin: 9px 0 4px; }
.ws-panel > .empty-state p { margin: 0; font-size: 10px; }

/* ============================================================================
   Pecas do app que o layout de origem nao tinha (ele era um mock sem dados):
   avisos, notas de rodape de formulario, listas editaveis e a tela de escolha.
   Tudo desenhado com os mesmos tokens do layout para nao destoar.
   ========================================================================== */
.ws-aviso {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #1b1f1c; color: #cdd3ce; font-size: 10px; padding: 11px 13px;
}
.ws-aviso i { font-size: 16px; color: #e4b757; flex: 0 0 auto; }
.ws-aviso.erro { border-color: rgba(255,100,103,.3); background: rgba(255,100,103,.07); color: #ffb0b4; }
.ws-aviso.erro i { color: #ff7c80; }
.ws-nota { margin: 0; color: #838b84; font-size: 10px; line-height: 1.6; }
.ws-nota a, .ws-field small a, .empty-state a { color: #4ce894; }
.ws-inline-input {
  height: 38px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: #202420; color: #eef1ee; padding: 0 12px; font-size: 10px; max-width: 180px;
}
.ws-secondary.perigo { border-color: rgba(255,100,103,.3); background: rgba(255,100,103,.08); color: #ffb0b4; }
.ws-action-row form { display: contents; }
.ws-action-row { flex-wrap: wrap; }

/* .ws-field aceita <label> no lugar do <span> nas telas convertidas em massa. */
.ws-field > label { color: #8e968f; font-size: 9px; letter-spacing: .04em; }
.ws-field.larga { grid-column: 1 / -1; }
.toggle-copy { display: grid; gap: 3px; }
.toggle-copy strong { font-size: 10px; }
.toggle-copy span { font-size: 9px; color: #838b84; }

/* Acordeao de item editavel (planos, clones). */
.ws-item { border-top: 1px solid var(--line); padding: 12px 0; }
.ws-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; font-size: 11px; list-style: none;
}
.ws-item > summary::-webkit-details-marker { display: none; }
.ws-item > summary small { color: #838b84; font-size: 9px; }
.ws-item > summary > span { display: flex; align-items: center; gap: 7px; }
.ws-item[open] > summary { margin-bottom: 14px; }

/* --------------------------------------------------------------- painel */
.focus-tabs .tabs-list {
  margin: 8px; height: 42px; border-radius: 13px; border: 1px solid var(--line);
  background: #1b1e1c; display: grid; grid-template-columns: repeat(2, 1fr);
  padding: 4px; gap: 4px;
}
.focus-tabs .tabs-list a {
  border-radius: 10px; display: grid; place-items: center; color: #7f857f;
  font-size: 10px; letter-spacing: .08em; text-decoration: none;
}
.focus-tabs .tabs-list a.active { background: #f2f3f2; color: #111; }

.update-card { position: relative; text-align: left; }
.update-card .run-open { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.update-card > form { position: absolute; right: 10px; top: 10px; }
.update-card > form button {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line);
  background: #1c201d; color: #8d968f; display: grid; place-items: center;
  cursor: pointer; font-size: 12px; opacity: 0; transition: .18s;
}
.update-card:hover > form button { opacity: 1; }
.update-card .task-card-meta { flex-wrap: wrap; }

.details-tabs a {
  border-radius: 10px; display: grid; place-items: center; color: #7f857f;
  font-size: 11px; text-decoration: none;
}
.details-tabs a.active { background: #f2f3f2; color: #111; }
.details-tabs a.desligado { opacity: .4; pointer-events: none; }

.video-row-main { text-decoration: none; color: inherit; }
.video-chevron { text-decoration: none; color: inherit; display: grid; place-items: center; }
.video-item.is-expanded .video-chevron i { transform: rotate(180deg); }
.icon-button.vazio { border-color: transparent; background: transparent; }
.video-erro { margin: 0 0 8px 40px; color: #ff8a8e; font-size: 8px; }
.ready-chip.err, .ready-chip.erro { border-color: rgba(255,100,103,.3); background: rgba(255,100,103,.07); color: #ff8a8e; }
.ready-chip.warn, .ready-chip.pendente { border-color: rgba(228,183,87,.3); background: rgba(228,183,87,.07); color: #e4bb61; }
.batch-aviso { grid-column: 1 / -1; margin: 0; color: #e4bb61; font-size: 9px; }
.batch-aviso a { color: #4ce894; }
.batch-publish-bar label input { width: 100%; }

/* ------------------------------------------------------------ formularios */
.niche-list form {
  display: grid; grid-template-columns: 30px minmax(0,1fr) 130px 110px 70px;
  gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
}
.niche-list form > div { display: grid; gap: 4px; min-width: 0; }
.niche-list strong { font-size: 10px; }
.niche-list small { font-size: 8px; color: #737b74; }
.niche-list select, .niche-list button {
  height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: #1f241f; color: #e6eae6; font-size: 9px; padding: 0 8px; cursor: pointer;
}
.niche-index { color: #55d98b; font-size: 9px; }

.recent-list article > a.recent-thumb { text-decoration: none; color: inherit; }
.recent-acoes { display: flex; gap: 5px; }
.recent-acoes form { display: contents; }
.recent-acoes button {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: #1f241f; color: #b9c0ba; display: grid; place-items: center; cursor: pointer;
}
.clone-ajustes { grid-column: 1 / -1; margin-top: 8px; }
.clone-ajustes > summary { cursor: pointer; color: #55d98b; font-size: 9px; list-style: none; }
.clone-ajustes > summary::-webkit-details-marker { display: none; }
.clone-erro { color: #ff8a8e !important; }
.connection-card a.ws-primary { height: 32px; font-size: 9px; }
.checklist span.faltando, .checklist span.faltando i { color: #e4bb61; }
.checklist.editavel { display: grid; gap: 8px; margin: 12px 0; }
.checklist.editavel label { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #ccd2cd; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 7px; }
.dias-semana label {
  display: flex; align-items: center; gap: 5px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 20px; font-size: 9px; cursor: pointer;
}
.plans-grid article > a {
  position: absolute; left: 19px; right: 19px; bottom: 19px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line-strong); background: #1f241f;
  display: grid; place-items: center; font-size: 9px; text-decoration: none; color: inherit;
}
.plan-uso { color: #838b84; font-size: 9px; margin: 10px 0 44px; }
.users-table article > .botao-linha {
  height: 29px; border-radius: 8px; border: 1px solid var(--line); background: #1f241f;
  display: grid; place-items: center; font-size: 8px; text-decoration: none; color: inherit;
}
.frame-phone.com-imagem { padding: 0; overflow: hidden; }
.frame-phone.com-imagem img { width: 100%; height: 100%; object-fit: contain; }
.frame-kits a { text-decoration: none; color: inherit; position: relative; }
.kit-swatches { display: flex; gap: 3px; margin-top: 6px; }
.kit-swatches i { width: 9px; height: 9px; border-radius: 3px; }
.profile-orb.large { width: 74px; height: 74px; font-size: 20px; }
.profile-orb.com-foto { padding: 0; overflow: hidden; }
.profile-orb.com-foto img { width: 100%; height: 100%; object-fit: cover; }
.form-section-title { margin: 8px 0 2px; font-size: 11px; color: #9aa39c; }

/* --------------------------------------------------------------- geracao */
.progresso-painel .progresso-topo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 10px;
}
.progresso-painel b { margin-left: auto; font-size: 16px; font-weight: 400; }
.progresso-painel .preview-progress { width: 100%; }
.log-toggle summary { cursor: pointer; font-size: 10px; color: #9aa39c; }
.logbox {
  margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid var(--line);
  border-radius: 12px; background: #0d100e; padding: 11px; font-family: ui-monospace, monospace;
  font-size: 9px; color: #b6bdb7; white-space: pre-wrap;
}

/* Tela de escolha: cartao da biblioteca com caixa de marcar por cima. */
.escolha-card { position: relative; transition: .18s; }
.escolha-card.reprovado { opacity: .62; }
.escolha-card[hidden] { display: none; }
.escolha-card .library-cover { cursor: pointer; }
.escolha-card .library-cover input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-marca {
  position: absolute; z-index: 2; right: 9px; top: 9px; width: 22px; height: 22px;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.4); background: rgba(4,8,5,.6);
  display: grid; place-items: center; color: transparent; font-size: 13px;
}
.escolha-card :checked ~ .escolha-marca {
  background: linear-gradient(135deg,#00d469,#8df12f); border-color: transparent; color: #04150a;
}
.escolha-play {
  position: absolute; z-index: 3; left: 50%; top: 50px; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(4,8,5,.6); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.filtro-switch { display: flex; align-items: center; gap: 8px; font-size: 9px; color: #a9b0aa; }
.previa-fundo {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.78);
  display: grid; place-items: center; padding: 20px;
}
.previa-fundo[hidden] { display: none; }
.previa-caixa { position: relative; max-width: 420px; width: 100%; }
.previa-caixa video { width: 100%; border-radius: 16px; background: #000; }
.previa-caixa .icon-button { position: absolute; right: -6px; top: -44px; }
.pix-qr { width: min(260px, 100%); margin: 0 auto; border-radius: 14px; background: #fff; padding: 10px; }

/* A gaveta de nova geracao usa o formulario do modelo dentro do painel
   deslizante que o app.js ja controla. */
.drawer-panel.generation-dialog { padding: 0; max-width: 520px; overflow: auto; }
.generation-dialog .generation-form { padding: 22px; }
.generation-form .filtros-busca > summary { list-style: none; }
.generation-form .filtros-busca > summary::-webkit-details-marker { display: none; }
.generation-form .ws-field-pair { margin-top: 10px; }
.source-option .switch { margin-left: auto; }
.video-editor-panel.avulso { border: 0; padding: 0; }

/* ============================================================================
   Nova geracao: modal centralizado.

   O app.js abre a gaveta poendo .open no painel e no fundo -- o mesmo gesto
   serve para um modal, entao aqui so trocamos a geometria: em vez de deslizar
   da direita, ele cresce no centro da tela.
   ========================================================================== */
.drawer-panel.generation-dialog {
  top: 50%; right: auto; bottom: auto; left: 50%;
  width: min(520px, calc(100vw - 28px)) !important;
  max-width: 520px !important;
  max-height: min(88dvh, 860px);
  border-radius: 20px; border: 1px solid var(--line-strong);
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.drawer-panel.generation-dialog.open {
  transform: translate(-50%, -50%) scale(1); opacity: 1;
}

/* O acento do modal veio azul do projeto de origem; aqui e verde como o resto. */
.generation-form input:focus,
.generation-form select:focus,
.generation-form textarea:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(0, 231, 122, .14) !important;
}
.source-option.is-on { border-color: rgba(0, 231, 122, .55); background: #1e2a23; }
.generate-button {
  background: linear-gradient(120deg, #00d66b, #8cf32f) !important;
  color: #041109 !important;
  box-shadow: 0 10px 26px rgba(0, 214, 107, .18) !important;
}
.generation-form > label { color: #9fd5ba; }

/* .generation-form input tem height:45px !important, o que esticava a caixa de
   marcar das fontes num retangulo. O switch precisa da propria medida. */
.generation-form input.switch,
.source-option input.switch {
  appearance: none; -webkit-appearance: none;
  width: 39px !important; min-width: 39px; height: 23px !important;
  flex: 0 0 39px; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 20px !important;
  background: #59635e !important; position: relative; cursor: pointer;
  transition: background .18s ease; box-shadow: none !important;
}
.generation-form input.switch::after,
.source-option input.switch::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 19px; height: 19px; border-radius: 50%; background: #eaf0ec;
  transition: transform .18s ease;
}
.generation-form input.switch:checked,
.source-option input.switch:checked { background: #00c765 !important; }
.generation-form input.switch:checked::after,
.source-option input.switch:checked::after { transform: translateX(16px); }

/* Select e textarea nao existiam no modelo (era o Select do shadcn); ganham a
   mesma caixa dos inputs para a coluna nao ficar desalinhada. */
.generation-form select,
.generation-form textarea {
  width: 100%; min-height: 45px; border: 1px solid var(--line-strong);
  border-radius: 11px; background: #222725; color: #f6f7f6;
  padding: 0 12px; font-size: 11px;
}
.generation-form textarea { padding: 12px; min-height: 70px; }

.conditional-fields { display: grid; gap: 8px; }
.conditional-fields[hidden] { display: none; }
.generation-actions .adjust-button {
  height: 45px; border: 0; border-radius: 22px; background: #2b312e; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-decoration: none;
}
.generation-form .filtros-busca > summary { cursor: pointer; }
.generation-form .filtros-busca[open] > summary { margin-bottom: 10px; }
.generation-form .ws-field { gap: 6px; }
.generation-form .ws-field > span { font-size: 9px; color: #8e968f; }
.generation-form .ai-chip + .ai-chip { margin-top: -6px; }

/* ============================================================================
   Painel de altura fixa. A .workspace-page rola em todas as telas, mas no
   painel isso fazia a pagina inteira andar junto com as listas. Aqui ela para
   de rolar e entrega a altura ao board; cada coluna rola por dentro -- a lista
   de geracoes na .updates-scroll e o conteudo na .video-list.
   ========================================================================== */
.workspace-page.sem-rolagem {
  overflow: hidden; padding: 0; display: grid; grid-template-rows: minmax(0, 1fr);
}
.workspace-page.sem-rolagem > .board-grid { height: 100%; min-height: 0; }
.workspace-page.sem-rolagem > .flash-stack { padding: 12px 12px 0; }
.updates-column { display: grid; grid-template-rows: minmax(0, 1fr); }
.details-column { grid-template-rows: 58px auto minmax(0, 1fr); }
.video-list { overflow-y: auto; min-height: 0; }

/* ============================================================================
   Acabamento. O layout de origem era um mock com textos curtos e componentes
   do shadcn; o app real tem titulo de vinte palavras, <select> e <input file>
   nativos e formulario dentro de cartao. Cada um deles ganha tratamento aqui.
   ========================================================================== */

/* 1. Titulo da geracao. Nome de corte vem do arquivo baixado e estoura o
   cartao inteiro -- duas linhas e reticencias. */
.update-card .update-heading p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; margin: 0;
}
.update-card .update-heading > div { min-width: 0; }
.video-copy strong, .library-card-copy h3, .publication-list strong,
.recent-list strong, .niche-list strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-list article > div, .publication-list article > div { min-width: 0; }

/* 2. Caixa de marcar. .video-checkbox foi desenhada para o Radix, que usa
   data-state; aqui e checkbox nativo, entao precisa do :checked. */
input[type="checkbox"]:not(.switch) {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: 0 0 17px; margin: 0;
  border: 1px solid #68716c; border-radius: 5px; background: #141815;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: .15s ease; position: relative;
}
input[type="checkbox"]:not(.switch):hover { border-color: #8d968f; }
input[type="checkbox"]:not(.switch):checked {
  border-color: transparent; background: linear-gradient(135deg, #00d469, #8df12f);
}
input[type="checkbox"]:not(.switch):checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #04150a; border-bottom: 2px solid #04150a;
  transform: rotate(-45deg);
}
input[type="checkbox"]:not(.switch):disabled { opacity: .35; cursor: not-allowed; }
.video-checkbox { width: 17px !important; height: 17px !important; background: #141815 !important; }
.video-checkbox:checked { background: linear-gradient(135deg, #00d469, #8df12f) !important; }

/* 3. O ponto do estado ja herda a cor da classe (currentColor); so faltava
   dar brilho para ele ler como sinal e nao como pontuacao. */
.ws-status i { box-shadow: 0 0 7px currentColor; }
.ws-status { text-transform: none; }

/* 4. <select> nativo. O modelo usava o Select do shadcn, entao nenhum
   select tinha estilo -- apareciam brancos do sistema. */
select, .editor-card select, .rerender-controls select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background-color: #202420; color: #eef1ee; font-size: 10px;
  padding: 0 30px 0 11px; height: 38px; cursor: pointer; outline: 0;
  background-image:
    linear-gradient(45deg, transparent 50%, #8d968f 50%),
    linear-gradient(135deg, #8d968f 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 11px) 17px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
select:focus { border-color: var(--green); }
select option { background: #191c19; color: #eef1ee; }
.ws-field select, .generation-form select { height: 40px; }

/* 5. Log tecnico. Linha em branco entre as entradas vinha do proprio Jinja;
   o bloco vira lista compacta com o horario em coluna. */
.log-toggle > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 11px; background: #171b18;
  color: #b9c0ba; list-style: none;
}
.log-toggle > summary::-webkit-details-marker { display: none; }
.log-toggle > summary i { color: #55d98b; font-size: 14px; }
.log-toggle[open] > summary { border-radius: 11px 11px 0 0; border-bottom: 0; }
.logbox { margin-top: 0; border-radius: 0 0 11px 11px; padding: 4px 0; }
.logbox > div {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px;
  padding: 5px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04);
  line-height: 1.5;
}
.logbox > div:last-child { border-bottom: 0; }
.logbox .muted { color: #5e6a61; }

/* 6 e 7. Aba ativa. No modelo ela era uma pastilha branca; no app o acento e
   verde e a branca destoava do resto da tela. */
.focus-tabs .tabs-list a.active, .details-tabs a.active {
  background: linear-gradient(120deg, #00d469, #8df12f); color: #04150a; font-weight: 600;
}
.focus-tabs .tabs-list a:not(.active):hover, .details-tabs a:not(.active):hover {
  background: rgba(255, 255, 255, .05); color: #dfe4e0;
}

/* 8. Envio de arquivo. O botao nativo do navegador vinha cinza claro. */
input[type="file"] {
  width: 100%; border: 1px dashed var(--line-strong); border-radius: 11px;
  background: #1a1e1b; color: #9aa39c; font-size: 10px; padding: 10px 12px; cursor: pointer;
}
input[type="file"]:hover { border-color: rgba(0, 231, 122, .4); background: #1e2620; }
input[type="file"]::file-selector-button {
  margin-right: 12px; border: 0; border-radius: 8px; padding: 7px 12px;
  background: linear-gradient(120deg, #00d469, #8df12f); color: #04150a;
  font-size: 9px; font-weight: 600; cursor: pointer;
}
.upload-zone input[type="file"] { border: 0; background: transparent; }

/* 9. Previa da moldura mais larga, agora que os campos cabem em abas. */
.frame-layout { grid-template-columns: minmax(380px, 1fr) 420px; }
.frame-preview-panel { padding: 16px; }
.frame-phone { width: 100%; max-width: 300px; }
.frame-kits { grid-template-columns: 1fr 1fr; }

/* 10. Abas da moldura. */
.moldura-abas {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 5px;
  border: 1px solid var(--line); border-radius: 12px; background: #171b18;
}
.moldura-abas button {
  flex: 1 1 auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: #8b938c; font-size: 10px; cursor: pointer;
  transition: .16s ease;
}
.moldura-abas button:hover { background: rgba(255, 255, 255, .05); color: #dfe4e0; }
.moldura-abas button.ativa {
  background: linear-gradient(120deg, #00d469, #8df12f); color: #04150a; font-weight: 600;
}
.moldura-painel { display: none; }
.moldura-painel.ativo { display: block; }

/* 11. Desconectar. .connection-card > button so alcanca botao solto, e este
   esta dentro do <form> que dispara o POST. */
.connection-card > form { display: contents; }
.connection-card > form button, .connection-card > form > button {
  height: 30px; border: 1px solid var(--line); background: #202520;
  border-radius: 8px; font-size: 8px; color: #cdd3ce; cursor: pointer; padding: 0 12px;
}
.connection-card > form button:hover { background: #2a302a; color: #fff; }
.cookie-grid article > form { display: contents; }
/* O .logbox antigo era um bloco de texto corrido, com pre-wrap. Agora cada
   entrada e um <div>, entao o pre-wrap so estava preservando as quebras que o
   Jinja deixa entre as tags -- viravam linhas em branco entre os registros. */
.logbox { white-space: normal; }
.logbox > div > span.muted { white-space: nowrap; }

/* ============================================================================
   Revisao 2: excluir clicavel, truncagem de verdade e kits de moldura.
   ========================================================================== */

/* 1. O botao de excluir do cartao ficava por baixo do link que cobre o cartao
   inteiro: o <a> e um grid que ocupa toda a area, e sem z-index o botao
   posicionado sobre ele nao recebia o clique. */
.update-card > form { z-index: 5; }
.update-card .run-open { position: relative; z-index: 1; padding-right: 34px; }
.update-card > form button { opacity: .55; }
.update-card:hover > form button, .update-card > form button:focus-visible { opacity: 1; }
.update-card > form button:hover { background: rgba(255, 100, 103, .16); color: #ff8a8e; }

/* 2. Abrir, excluir e fechar juntos no cabecalho da coluna de conteudo. */
.detalhe-acoes { display: flex; align-items: center; gap: 6px; }
.detalhe-acoes form { display: contents; }
.icon-button.perigo:hover { background: rgba(255, 100, 103, .16); color: #ff8a8e; }

/* 3. -webkit-line-clamp corta por linha, mas nome de arquivo e uma palavra so:
   sem quebra permitida ele estoura na horizontal em vez de virar duas linhas. */
.update-card .update-heading p,
.video-copy strong, .library-card-copy h3, .publication-list strong,
.recent-list strong, .niche-list strong, .ws-item > summary,
.details-heading h1, .details-heading p {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.details-heading > div { min-width: 0; }
.details-heading h1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* 4. Kits da moldura: eram texto solto empilhado. Viram cartao com as tres
   cores do kit a mostra, que e o que faz escolher de relance. */
.frame-kits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.frame-kits a {
  display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line);
  border-radius: 12px; background: #171b18; font-size: 10px; color: #dfe4e0;
  text-decoration: none; transition: .16s ease;
}
.frame-kits a:hover { border-color: var(--line-strong); background: #1d221e; }
.frame-kits a small {
  justify-self: start; padding: 2px 7px; border-radius: 20px;
  background: rgba(255, 255, 255, .06); color: #8b938c; font-size: 8px;
}
.frame-kits a.active { border-color: rgba(0, 231, 122, .45); background: rgba(0, 211, 105, .08); }
.frame-kits a.active small {
  background: linear-gradient(120deg, #00d469, #8df12f); color: #04150a; font-weight: 600;
}
.frame-kits .kit-swatches { margin: 0; gap: 4px; }
.frame-kits .kit-swatches i {
  width: 100%; height: 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .1);
}
.frame-kits .kit-swatches { display: grid; grid-template-columns: repeat(3, 1fr); }

/* 5. Enviar fonte e restaurar kit lado a lado, alinhados pela base. */
.frame-rodape {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line);
}
.frame-rodape form { display: grid; gap: 8px; }
.frame-rodape .ws-field { gap: 5px; }
.frame-rodape button { width: 100%; }

@media (max-width: 700px) {
  .frame-kits, .frame-rodape { grid-template-columns: 1fr; }
}

/* O modal fechado continuava ocupando o centro da tela: opacity:0 apaga, mas
   nao tira do caminho. Ele engolia o clique de tudo que ficasse debaixo --
   era isso que travava o botao de excluir do cartao de geracao, nao o
   empilhamento dentro do cartao. */
.drawer-panel:not(.open) { pointer-events: none; visibility: hidden; }
.drawer-panel.open { pointer-events: auto; visibility: visible; }

/* O cartao tem altura fixa: distribuir empurra o rodape para a base em vez de
   deixar tudo grudado no topo. */
.update-card .run-open { height: 100%; align-content: space-between; }

/* ============================================================================
   Revisao 3.
   ========================================================================== */

/* 1 e 2. A barra de publicacao era uma linha unica de cinco colunas fixas: em
   tela estreita os botoes saiam pela borda do cartao. Agora ela quebra em
   linhas conforme cabe, e o bloco de acao nunca encolhe abaixo do texto. */
.batch-publish-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
}
.batch-publish-bar > .batch-selection { flex: 1 1 200px; }
.batch-publish-bar > label { flex: 1 1 130px; min-width: 110px; display: grid; gap: 5px; }
.batch-publish-bar > .batch-actions {
  flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px;
}
.batch-publish-bar > .batch-actions button { white-space: nowrap; }
@media (max-width: 620px) {
  .batch-publish-bar > .batch-actions { margin-left: 0; width: 100%; }
  .batch-publish-bar > .batch-actions button { flex: 1 1 0; }
}

/* 5 e 6. Os quatro botoes do clone numa linha, dividindo a largura. */
.acoes-clone { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-clone > * { flex: 1 1 130px; }