/* roxo escuro neutro (nem preto nem azul), texto branco, destaque dourado */
:root{--bg:#110d15;--topo:#15101a;--card:#1c1622;--aba:#251d2d;--line:#33293d;--line2:#42364e;--fg:#fff;--mut:#cfc6d8;--mut2:#a59bb0;--ac:#f5b942;--ac-fg:#241a05;
  --ok-bg:#1d3d33;--ok:#7fe0b0;--edi-bg:#2c2a4a;--edi:#b9b4ff;--pend-bg:#4a3a14;--pend:#ffd27a}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,"SF Pro Text",Inter,system-ui,sans-serif}
a{color:inherit}
button{font:inherit;cursor:pointer}
.logo{font-weight:700;font-size:16px;text-decoration:none}.logo b{color:var(--ac)}.logo.grande{font-size:22px;text-align:center}
.sub{color:var(--mut);margin:2px 0 14px}.centro{text-align:center}
.pill{background:var(--aba);border-radius:20px;padding:4px 11px;font-size:12px;color:var(--mut);white-space:nowrap}

/* login */
body.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#221a2b,var(--bg) 60%);padding:16px}
.caixa{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:12px}
.caixa label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut)}
.caixa input{background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:11px 12px;color:var(--fg);font-size:15px}
.caixa button{margin-top:8px;background:var(--ac);color:var(--ac-fg);border:0;border-radius:9px;padding:12px;font-weight:700;font-size:15px}
.erro{color:#ff9b9b;margin:0;font-size:13px}

/* topo e abas */
header.topo{position:sticky;top:0;z-index:5;background:var(--topo);border-bottom:1px solid var(--line);padding:10px 16px}
.linha1{display:flex;align-items:center;gap:10px;min-width:0}.linha1 .esp{flex:1}
.voltar{color:var(--mut);text-decoration:none;font-size:13px;white-space:nowrap}
.titulo{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px}.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:var(--aba);color:var(--mut);padding:6px 12px;border-radius:8px;font-size:13px;white-space:nowrap;flex:0 0 auto}
.tabs button.on{background:var(--ac);color:var(--ac-fg);font-weight:650}
.tabs.cenas button{padding:4px 9px;font-size:12px}
main{padding:14px 16px 40px}
h1{font-size:22px;margin:4px 0 4px}
h2{font-size:18px;margin:6px 0 2px}

/* início */
.novelas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.novela{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column}
.novela .capa{aspect-ratio:4/3;background:var(--aba) center/cover}
.novela .corpo{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.novela .nome{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:650;font-size:15px}
.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac)}
.novela .meta{color:var(--mut2);font-size:12px}

/* storyboard: mesmos blocos do STORYBOARD.html */
.painel{overflow-x:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card img,.vazio{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--aba)}
.vazio{display:flex;align-items:center;justify-content:center;color:var(--mut2);font-size:13px}
.info{padding:10px;display:flex;flex-direction:column;gap:4px;min-width:0}.info p{margin:0}
.fala{font-style:italic;color:#ffe7b3}.meta{color:var(--mut2);font-size:12px}.tot{color:var(--mut);margin:4px 0 10px}
.st{font-size:11px;font-weight:650;padding:2px 7px;border-radius:6px;align-self:flex-start}
.ok{background:var(--ok-bg);color:var(--ok)}.pend{background:var(--pend-bg);color:var(--pend)}.edi{background:var(--edi-bg);color:var(--edi)}
.fila{gap:16px;justify-content:start}
.fila .card img,.fila .vazio{height:min(42vh,430px);width:auto;max-width:100%;margin:0 auto;aspect-ratio:9/16}
.fila .info{padding:12px 14px;gap:8px;line-height:1.5}.fila .info b{font-size:15px}
.desc{display:flex;flex-direction:column;gap:4px}.fila .fala,.take .fala{border-left:3px solid var(--ac);padding-left:8px}.fila .meta{font-size:12.5px}
.takes{margin-top:4px;row-gap:6px}.takes .seta,.lado .seta{text-align:center;font-size:28px;line-height:1;color:var(--ac)}
.take{grid-row:2;background:#1a1420;border:1px solid var(--ac);border-radius:10px;padding:12px 14px;line-height:1.5;display:flex;flex-direction:column;gap:4px}
.take p{margin:0}.mont{margin:14px 0 0}
.lado{display:flex;align-items:center;gap:16px}.lado .card{flex:0 0 300px}
.lado .dir{position:relative;flex:0 1 460px}.lado .dir .mont{position:absolute;top:100%;left:0;right:0}
.macro{grid-column:1/-1;color:var(--mut);border-left:3px solid var(--ac);padding:6px 10px}
.txt{grid-column:1/-1;font-size:13px;padding:4px 10px;border:1px dashed var(--line2);border-radius:6px}
h2.parte{font-size:22px;border-bottom:2px solid var(--ac);padding-bottom:4px;margin-top:26px}
.tudo h3{margin:26px 0 2px;font-size:17px;color:var(--ac);scroll-margin-top:120px}
.bloco{overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--line)}
.indice{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.indice a{color:var(--ac);text-decoration:none;border:1px solid var(--line2);border-radius:6px;padding:2px 8px;font-size:13px}

/* personagens e cenários */
.pers{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.pers .card img{aspect-ratio:3/4;object-position:center 20%}
.pers .prompt{color:var(--pend);font-size:12px}
.cens{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cens img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:var(--aba)}
.cens span{font-size:12px;color:var(--mut)}

/* fila de geração */
.fila-g{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}.fila-g>*,.atual>*{min-width:0}
.lista{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;background:var(--card);border:1px solid var(--line);text-align:left;color:var(--fg);width:100%}
.item.agora{border-color:var(--ac);background:#231b2b}
.item .n{width:20px;color:var(--mut2);font-weight:650}.item .t{flex:1;min-width:0}.item .t b{font-size:13px;display:block}
.item .t span{color:var(--mut2);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atual{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;grid-template-columns:180px 1fr;gap:18px}
.atual .thumb img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:var(--aba)}
.anexar{font-size:12px;color:var(--mut);margin-top:6px}.anexar b{color:var(--fg)}
.cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap}.cab b{font-size:16px}
pre.prompt{white-space:pre-wrap;font:13px/1.55 "SF Mono",Menlo,monospace;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0;color:var(--fg);user-select:all;overflow-wrap:anywhere}
.botoes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.botoes button{border:0;border-radius:9px;padding:10px 16px;background:var(--aba);color:var(--fg);font-weight:600}
.botoes .copiar{background:var(--ac);color:var(--ac-fg)}.botoes .fraco{color:var(--mut2)}
.mostrar{margin-top:10px;color:var(--mut);font-size:12px}.mostrar select{background:var(--aba);color:var(--fg);border:1px solid var(--line2);border-radius:6px;padding:3px 6px}
.vazio-fila{color:var(--mut);padding:30px 0}
.aviso{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ac);color:var(--ac-fg);font-weight:700;padding:9px 16px;border-radius:9px;opacity:0;transition:opacity .2s;pointer-events:none}
.aviso.on{opacity:1}

/* tela estreita: o SB aberto ao lado do Flow (tela dividida) */
@media (max-width:900px){
  main{padding:12px 12px 40px}
  .fila-g{grid-template-columns:1fr;gap:12px}
  .lista{flex-direction:row;overflow-x:auto;scrollbar-width:none}.lista::-webkit-scrollbar{display:none}
  .item{width:auto;flex:0 0 auto;max-width:200px;padding:7px 10px}
  .atual{grid-template-columns:1fr;padding:14px}
  .atual .thumb{display:flex;gap:12px;align-items:flex-end}.atual .thumb img{width:96px}
  .botoes{position:sticky;bottom:0;background:var(--card);padding:10px 0 4px;margin-top:8px}
  .botoes button{flex:1 1 auto;padding:10px 12px}
  .lado{flex-direction:column;align-items:stretch}.lado .card{flex:none}.lado .dir .mont{position:static}
}