/* Tela da arte da peça (frente "Feedbem › Arte"). Interface sóbria; a arte fica no fundo névoa; rosa só no botão principal.
   Os modelos têm o CSS deles em /modelos/modelos.css (carregado aqui embaixo). */
@import url("/modelos/modelos.css");

.ar-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ar-cab h1 { margin: 0 8px 0 0; }
.ar-nota { margin: 0 0 12px; }
.ar-criando { min-height: 240px; display: grid; place-items: center; color: var(--fb-grafite); }

.ar-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .ar-grade { grid-template-columns: minmax(0, 1fr); } }

.ar-previa { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; position: sticky; top: 72px; }
@media (max-width: 900px) { .ar-previa { position: static; } }
.ar-quadro, .ar-tira-quadro, .ar-modelo-quadro { position: relative; overflow: hidden; display: block; flex: none; }
.ar-quadro { border-radius: 4px; box-shadow: var(--fb-sombra-suave); background: var(--fb-branco); }
.ar-quadro.ar-estourou { outline: 3px solid var(--fb-erro); outline-offset: 3px; }
.ar-escala { transform-origin: 0 0; width: max-content; }

.ar-tiras { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; }
.ar-tira { border: 2px solid transparent; background: none; padding: 2px; border-radius: 6px; cursor: pointer; display: grid; gap: 4px; justify-items: center; flex: none; }
.ar-tira.atual { border-color: var(--fb-tinta); }
.ar-tira-quadro { border-radius: 2px; box-shadow: var(--fb-sombra-suave); }
.ar-tira-n { font-size: var(--fb-texto-legenda); font-weight: 600; color: var(--fb-cinza); }

.ar-painel { display: grid; gap: 12px; }
.ar-painel h2 { margin: 0 0 10px; font-size: 16px; }
.ar-painel textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-p); resize: vertical; }
.ar-dica { margin: 6px 0 8px; }
.ar-pequeno { padding: 6px 10px; font-size: var(--fb-texto-legenda); }

.ar-modelos { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-modelo { display: grid; gap: 4px; justify-items: center; width: 82px; padding: 6px 4px; border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-p); background: var(--fb-branco); cursor: pointer; font: inherit; }
.ar-modelo.atual { border: 2px solid var(--fb-tinta); padding: 5px 3px; }
.ar-modelo-quadro { border-radius: 2px; background: var(--fb-nevoa); }
.ar-modelo-nome { font-size: 11px; line-height: 1.2; text-align: center; color: var(--fb-grafite); font-weight: 600; }

.ar-cor { display: grid; gap: 6px; margin-bottom: 10px; }
.ar-cor-nome { font-size: var(--fb-texto-menor); font-weight: 600; }
.ar-amostras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ar-amostra { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fb-linha); cursor: pointer; padding: 0; }
.ar-amostra.atual { box-shadow: 0 0 0 2px var(--fb-branco), 0 0 0 4px var(--fb-tinta); }
.ar-amostras input[type="color"] { width: 34px; height: 30px; padding: 0 2px; border: 1px solid var(--fb-linha); border-radius: var(--fb-canto-p); background: var(--fb-branco); cursor: pointer; }

.ar-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-acoes .principal { flex: 1 1 160px; }
.ar-aviso { font-size: var(--fb-texto-menor); }
.ar-pronto { display: flex; align-items: center; gap: 14px; padding: 12px 4px; }
.ar-pronto p { margin: 0; color: var(--fb-sucesso); font-weight: 600; font-size: var(--fb-texto-menor); }
#ar-erro:empty { display: none; }

/* Palco fora da vista, em tamanho real, para desenhar o PNG */
.ar-palco { position: fixed; left: -20000px; top: 0; pointer-events: none; }