/* ========================================================================== Tokens — nenhum valor hardcoded fora daqui. ========================================================================== */ :root{ /* espaçamento, base 8 */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; /* cor */ --bg-base:#0b1120; --bg-panel:#131c2e; --bg-input:#0e1626; --bg-eleva:#1a2438; --border:rgba(255,255,255,.08); --border-forte:rgba(255,255,255,.16); --text-hi:#e6eaf0; --text-lo:#9aa5b5; /* 4,9:1 sobre --bg-panel */ --accent:#22e5e5; --warn:#f5a524; --danger:#f04d4d; --ok:#3ddc84; /* tipografia */ --fs-titulo:20px; --fs-header:11px; --fs-label:12px; --fs-valor:14px; --fs-hint:12px; --fs-botao:15px; --raio:12px; --raio-p:8px; --transicao:150ms ease; --largura-controle:400px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg-base); color:var(--text-hi); font:400 var(--fs-valor)/1.45 "Segoe UI",system-ui,-apple-system,sans-serif; overflow:hidden; /* o nunca rola */ } h1,h2,p{margin:0} button,input,select,textarea{font:inherit} :focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* ========================================================================== Esqueleto — 100dvh, dois scrolls internos ========================================================================== */ .app{height:100dvh; display:flex; flex-direction:column; overflow:hidden} .topbar{ height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:0 var(--space-5); background:var(--bg-panel); border-bottom:1px solid var(--border); } .marca{font-size:var(--fs-titulo); font-weight:600; color:var(--text-hi); letter-spacing:-.01em} .creditos{font-size:13px; color:var(--text-hi); font-variant-numeric:tabular-nums} .conteudo{flex:1; display:flex; min-height:0; gap:var(--space-4); padding:var(--space-4)} /* ---------------------------------------------------- coluna de controle */ .coluna-controle{ width:var(--largura-controle); flex-shrink:0; display:flex; flex-direction:column; min-height:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--raio); overflow:hidden; } .controle-corpo{ flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-6); } .controle-rodape{ flex-shrink:0; position:sticky; bottom:0; padding:var(--space-4) var(--space-5); background:var(--bg-panel); border-top:1px solid var(--border); } .rodape-linha{display:flex; gap:var(--space-3); align-items:flex-end} .variacoes{width:84px; flex-shrink:0} .atalho{margin-top:var(--space-2); text-align:right} /* ---------------------------------------------------- coluna de resultados */ .coluna-resultados{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--raio); overflow:hidden; position:relative; } .resultados-cabeca{ flex-shrink:0; display:flex; align-items:baseline; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); } .grade-resultados{ flex:1; overflow-y:auto; padding:var(--space-5); display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-4); align-content:start; } .grade-resultados:empty{display:none} /* ========================================================================== Tipografia de apoio ========================================================================== */ .bloco-cabeca h2, .resultados-cabeca h2{ font-size:var(--fs-header); font-weight:600; color:var(--text-lo); text-transform:uppercase; letter-spacing:.08em; } .rotulo{display:block; font-size:var(--fs-label); font-weight:500; color:var(--text-lo); margin-bottom:var(--space-1)} .hint,.ajuda{font-size:var(--fs-hint); color:var(--text-lo)} .ajuda{display:block; margin-top:var(--space-1)} code{background:var(--bg-input); padding:1px 5px; border-radius:4px; font-size:12px} .badge{ font-size:11px; font-weight:600; color:var(--text-lo); background:var(--bg-input); border:1px solid var(--border); border-radius:99px; padding:1px 8px; font-variant-numeric:tabular-nums; } .badge.cheio{color:var(--danger); border-color:var(--danger)} /* ========================================================================== Blocos e campos ========================================================================== */ .bloco{display:flex; flex-direction:column; gap:var(--space-4)} .bloco-cabeca{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3)} .campo{display:block} .campo + .campo{margin-top:var(--space-4)} input[type=text],input[type=number],select,textarea{ width:100%; background:var(--bg-input); color:var(--text-hi); border:1px solid var(--border); border-radius:var(--raio-p); padding:9px 11px; transition:border-color var(--transicao); } select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-lo) 50%),linear-gradient(135deg,var(--text-lo) 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px} textarea{resize:vertical; min-height:180px; line-height:1.5} input:hover,select:hover,textarea:hover{border-color:var(--border-forte)} input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)} select:disabled,input:disabled{opacity:.45; cursor:not-allowed} option:disabled{color:var(--text-lo)} .dupla{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-4)} .dupla .campo + .campo{margin-top:0} .chk{display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); cursor:pointer} .chk input{width:16px; height:16px; accent-color:var(--accent); flex-shrink:0} .contador{float:right; font-size:11px; color:var(--text-lo); font-variant-numeric:tabular-nums} .contador.perto{color:var(--warn)} .aviso-inline{font-size:var(--fs-hint); color:var(--warn); margin-top:var(--space-2)} .aviso-inline.grave{color:var(--danger)} .nota-modelo{font-size:var(--fs-hint); color:var(--text-lo); margin-top:var(--space-3)} /* ---------------------------------------------------- montador de prompt */ details#montador{ border:1px solid var(--border); border-radius:var(--raio-p); padding:var(--space-3) var(--space-4); margin-top:var(--space-4); } details#montador summary{ cursor:pointer; font-size:var(--fs-label); color:var(--text-lo); list-style:none; display:flex; align-items:center; gap:var(--space-2); } details#montador summary::-webkit-details-marker{display:none} details#montador summary::before{content:"▸"; color:var(--text-lo)} details#montador[open] summary::before{content:"▾"} details#montador[open] summary{margin-bottom:var(--space-4); color:var(--text-hi)} .grupo{margin-bottom:var(--space-5)} .grupo:last-child{margin-bottom:0} .grupo-cabeca{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2)} .grupo-bloco{font-size:10px; color:var(--text-lo); opacity:.65; text-transform:uppercase; letter-spacing:.08em} .chips-grupo{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-2)} .opcao{ background:var(--bg-input); color:var(--text-lo); border:1px solid var(--border); border-radius:99px; padding:5px 11px; font-size:var(--fs-hint); cursor:pointer; transition:color var(--transicao), border-color var(--transicao), background var(--transicao); } .opcao:hover{color:var(--text-hi); border-color:var(--border-forte)} .opcao.on{color:var(--text-hi); background:var(--bg-eleva); border-color:var(--border-forte); font-weight:500} .opcao.on::before{content:"✓ "; color:var(--text-lo)} .comparar{margin-top:var(--space-4)} .comparar .hint{font-weight:400} .card-ajustes{font-size:11px; color:var(--warn); line-height:1.35} .card-cmp{ font-size:10px; color:var(--text-lo); text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--border); border-radius:99px; padding:0 6px; align-self:flex-start; } /* briefing — o caminho curto: escreve solto, a IA preenche o resto */ .briefing{ border:1px solid var(--border); border-radius:var(--raio-p); background:var(--bg-input); padding:var(--space-3) var(--space-4); margin-top:var(--space-4); } .briefing textarea{min-height:0; background:var(--bg-base)} .briefing-acoes{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3)} .briefing-acoes .hint{flex:1; line-height:1.3} .briefing-acoes button[disabled]{opacity:.5; cursor:wait} .linha-ia{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3)} .linha-ia .hint{flex:1; line-height:1.3} .linha-ia button[disabled]{opacity:.5; cursor:wait} .montador-acoes{ display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-3); border-top:1px solid var(--border); margin-top:var(--space-4); } details#avancado{ border:1px solid var(--border); border-radius:var(--raio-p); padding:var(--space-3) var(--space-4); margin-top:var(--space-4); } details#avancado summary{cursor:pointer; font-size:var(--fs-label); color:var(--text-lo); list-style:none} details#avancado summary::-webkit-details-marker{display:none} details#avancado summary::before{content:"▸ "; color:var(--text-lo)} details#avancado[open] summary::before{content:"▾ "} details#avancado[open] summary{margin-bottom:var(--space-4); color:var(--text-hi)} /* ========================================================================== Botões ========================================================================== */ .botao-primario{ flex:1; display:flex; align-items:center; justify-content:center; gap:var(--space-2); background:var(--accent); color:var(--bg-base); border:0; border-radius:var(--raio-p); padding:12px var(--space-4); font-size:var(--fs-botao); font-weight:600; cursor:pointer; transition:background var(--transicao), opacity var(--transicao); } .botao-primario:hover:not(:disabled){background:#5cf2f2} .botao-primario:disabled{background:var(--bg-eleva); color:var(--text-lo); cursor:not-allowed} .custo{font-size:12px; font-weight:500; opacity:.75; font-variant-numeric:tabular-nums} .botao-secundario{ background:var(--bg-eleva); color:var(--text-hi); border:1px solid var(--border); border-radius:var(--raio-p); padding:8px 14px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; transition:background var(--transicao), border-color var(--transicao); } .botao-secundario:hover{background:#22304a; border-color:var(--border-forte)} .link{background:none; border:0; color:var(--text-lo); cursor:pointer; padding:0; font-size:var(--fs-hint); text-decoration:underline; transition:color var(--transicao)} .link:hover{color:var(--text-hi)} /* ========================================================================== Referências ========================================================================== */ #bloco-refs.inativo .refs-conteudo{opacity:.4; pointer-events:none} .soltar{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); text-align:center; cursor:pointer; color:var(--text-lo); border:1.5px dashed var(--border-forte); border-radius:var(--raio-p); padding:var(--space-5) var(--space-4); transition:border-color var(--transicao), background var(--transicao); } .soltar strong{color:var(--text-hi); font-size:var(--fs-valor); font-weight:600} .soltar span{font-size:var(--fs-hint)} .soltar:hover,.soltar.ativo{border-color:var(--accent); background:var(--bg-input)} .refs-acoes{display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-3)} .filtro{display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-hint); color:var(--text-lo); cursor:pointer} .filtro input{width:14px; height:14px; accent-color:var(--accent)} .ordem-envio{margin-top:var(--space-4)} .ordem-titulo{font-size:var(--fs-label); font-weight:500; color:var(--text-lo); margin-bottom:var(--space-2); display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2)} .ordem-lista{display:flex; flex-wrap:wrap; gap:var(--space-2)} .ordem-item{ position:relative; width:80px; height:80px; border-radius:var(--raio-p); overflow:hidden; border:1px solid var(--accent); cursor:grab; background:var(--bg-input); } .ordem-item.arrastando{opacity:.35} .ordem-item.alvo{outline:2px solid var(--accent); outline-offset:1px} .ordem-item img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none} .ordem-item .num{ position:absolute; top:3px; left:3px; min-width:18px; height:18px; padding:0 4px; border-radius:99px; background:var(--accent); color:var(--bg-base); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } .ordem-item .tirar{ position:absolute; top:3px; right:3px; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity var(--transicao); } .ordem-item:hover .tirar{opacity:1} .grade-refs{ margin-top:var(--space-4); display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:var(--space-2); } .ref{ position:relative; border-radius:var(--raio-p); overflow:hidden; cursor:pointer; border:1px solid var(--border); background:var(--bg-input); transition:border-color var(--transicao); } .ref img{width:100%; aspect-ratio:1; object-fit:cover; display:block; opacity:.65; transition:opacity var(--transicao)} .ref:hover{border-color:var(--border-forte)} .ref:hover img{opacity:.9} .ref.on{border-color:var(--accent)} .ref.on img{opacity:1} .ref .x,.ref .ver{ position:absolute; top:3px; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity var(--transicao), background var(--transicao); display:flex; align-items:center; justify-content:center; padding:0; } .ref .x{right:3px} .ref .ver{left:3px; font-size:11px} .ref:hover .x,.ref:hover .ver,.ref:focus-within .x,.ref:focus-within .ver{opacity:1} .ref .x:hover{background:var(--danger)} .ref .ver:hover{background:var(--accent); color:var(--bg-base)} /* em tela de toque não existe hover: os botões ficam sempre visíveis */ @media (hover:none){ .ref .x,.ref .ver{opacity:.85} } .ref .nome{ position:absolute; left:0; right:0; bottom:0; padding:2px 5px; font-size:10px; background:rgba(0,0,0,.7); color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ========================================================================== Resultados ========================================================================== */ .vazio{ position:absolute; inset:56px 0 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); color:var(--text-lo); padding:var(--space-5); text-align:center; pointer-events:none; } .vazio p{font-size:var(--fs-valor)} .chips{display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; max-width:560px; pointer-events:auto} .chip{ background:var(--bg-input); color:var(--text-lo); border:1px solid var(--border); border-radius:99px; padding:6px 14px; font-size:var(--fs-hint); cursor:pointer; transition:color var(--transicao), border-color var(--transicao); } .chip:hover{color:var(--text-hi); border-color:var(--border-forte)} .card{ border:1px solid var(--border); border-radius:var(--raio); overflow:hidden; background:var(--bg-input); display:flex; flex-direction:column; transition:border-color var(--transicao); } .card:hover{border-color:var(--border-forte)} .card.sel{border-color:var(--accent)} .card-imagem{position:relative; aspect-ratio:1; background:var(--bg-base)} .card-imagem img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in} .card-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; gap:var(--space-2); align-items:center; justify-content:center; background:rgba(11,17,32,.82); opacity:0; transition:opacity var(--transicao); } .card:hover .card-overlay,.card-overlay:focus-within{opacity:1} .card-overlay button,.card-overlay a{min-width:150px} .card-info{padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-1)} .card-modelo{font-size:var(--fs-label); font-weight:500; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .card-prompt{font-size:var(--fs-hint); color:var(--text-lo); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .card-meta{font-size:11px; color:var(--text-lo); font-variant-numeric:tabular-nums} /* esqueleto de carregamento */ .card.carregando .card-imagem{ background:linear-gradient(100deg,var(--bg-input) 30%,var(--bg-eleva) 50%,var(--bg-input) 70%); background-size:220% 100%; animation:brilho 1.4s linear infinite; display:flex; align-items:center; justify-content:center; } @keyframes brilho{from{background-position:180% 0}to{background-position:-80% 0}} .card-estado{font-size:var(--fs-label); color:var(--text-lo); text-align:center; padding:var(--space-3)} .card.falhou .card-imagem{background:rgba(240,77,77,.08); display:flex; align-items:center; justify-content:center} .card-erro{font-size:var(--fs-hint); color:var(--danger); padding:var(--space-3); text-align:center; word-break:break-word; max-height:100%; overflow:auto} /* ========================================================================== Lupa ========================================================================== */ .lupa{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); background:rgba(5,8,16,.9); padding:var(--space-5); } .lupa[hidden]{display:none} .lupa img{max-width:92vw; max-height:82vh; border-radius:var(--raio-p)} .lupa-barra{display:flex; gap:var(--space-3)} /* ========================================================================== Abas (< 900px) ========================================================================== */ /* Quem manda nas abas é o CSS; o JS só troca `data-aba` no container. */ .abas{display:none; gap:var(--space-1); background:var(--bg-input); border:1px solid var(--border); border-radius:var(--raio-p); padding:3px} .aba{background:none; border:0; color:var(--text-lo); font-size:13px; font-weight:500; padding:6px 14px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background var(--transicao), color var(--transicao)} .aba.on{background:var(--bg-eleva); color:var(--text-hi)} @media (max-width:1199px){ :root{--largura-controle:340px} } @media (max-width:899px){ .conteudo{padding:var(--space-3); gap:0} .coluna-controle{width:100%} .abas{display:flex} .conteudo[data-aba="controle"] .coluna-resultados{display:none} .conteudo[data-aba="resultados"] .coluna-controle{display:none} .controle-corpo{padding:var(--space-4)} .grade-resultados{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); padding:var(--space-4)} .marca{font-size:16px} .creditos{font-size:12px} .topbar{padding:0 var(--space-3); gap:var(--space-2)} } /* ========================================================================== Login ========================================================================== */ .login{max-width:320px; margin:14vh auto; text-align:center} .login h1{font-size:var(--fs-titulo); margin-bottom:var(--space-5)} .login input{margin-bottom:var(--space-3); text-align:center}