/* Ateliê de Pintura: todas as classes começam com "at-" */
.at-raiz{
  --azul:#2F6BFF;--roxo:#7B3FF2;--roxo-escuro:#3B1A8C;--rosa:#FF4FA3;--ouro:#FFC93C;--verde:#2ED47A;
  --vermelho:#FF4D5E;--tinta:#1A1240;--branco:#FFFDF7;--painel:#2A1B6B;
  --fonte-titulo:"Lilita One","Baloo 2",sans-serif;--fonte-texto:"Baloo 2",sans-serif;
  --at-alt:max(300px,calc(100dvh - 300px));
  display:flex;flex-direction:column;gap:10px;color:var(--branco);font-family:var(--fonte-texto);
  background:linear-gradient(160deg,var(--painel),var(--roxo-escuro));border:4px solid var(--tinta);
  border-radius:26px;padding:12px;box-shadow:0 8px 0 var(--tinta);-webkit-user-select:none;user-select:none;
  box-sizing:border-box;min-width:0
}
.at-raiz *,.at-raiz *::before,.at-raiz *::after{box-sizing:border-box}
.at-raiz button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--tinta)}
.at-raiz button:focus-visible{outline:4px solid var(--ouro);outline-offset:3px}
.at-raiz button:disabled{opacity:.4;cursor:default}
.at-ic{font-size:1.5em;line-height:1;display:block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* Topo: abas dos dois desenhos e ações */
.at-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.at-abas{display:flex;gap:10px;flex-wrap:wrap}
.at-aba{position:relative;display:flex;align-items:center;gap:10px;background:var(--branco);border:4px solid var(--tinta);
  border-radius:18px;padding:5px 14px 5px 5px;box-shadow:0 5px 0 var(--tinta);font-family:var(--fonte-titulo);font-size:1.25rem;
  transition:transform .12s}
.at-aba.at-ativo{background:var(--ouro);transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 var(--tinta)}
.at-mini{width:64px;height:48px;border-radius:10px;border:3px solid var(--tinta);background:#fff;display:block}
.at-ok{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--verde);color:#fff;
  border:3px solid var(--tinta);display:none;place-items:center;font-size:.95rem;font-family:var(--fonte-texto);font-weight:800}
.at-aba.at-tem .at-ok{display:grid}
.at-acoes{display:flex;gap:8px;flex-wrap:wrap}
.at-bt{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--branco);border:4px solid var(--tinta);
  border-radius:16px;padding:6px 12px;box-shadow:0 5px 0 var(--tinta);font-weight:800;font-size:.95rem;min-width:74px}
.at-bt:active:not(:disabled),.at-fer:active,.at-aba:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tinta)}
.at-terminei{background:var(--verde);font-family:var(--fonte-titulo);font-size:1.2rem;color:var(--tinta)}

/* Meio: ferramentas e tela */
.at-meio{display:flex;gap:12px;align-items:flex-start;min-height:0}
.at-ferramentas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none;width:176px}
.at-fer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--branco);
  border:4px solid var(--tinta);border-radius:16px;padding:6px 4px;box-shadow:0 5px 0 var(--tinta);min-height:72px;
  font-weight:800;font-size:.9rem;line-height:1.05;transition:transform .12s,background .12s}
.at-fer .at-ic{font-size:1.9rem}
.at-fer.at-ativo{background:var(--ouro);transform:translateY(-3px) scale(1.04);box-shadow:0 8px 0 var(--tinta)}
.at-fer.at-ativo .at-ic{animation:at-pula .5s}
@keyframes at-pula{40%{transform:translateY(-6px) rotate(-8deg) scale(1.15)}}
.at-palco-caixa{flex:1;min-width:0;display:flex;justify-content:center}
.at-palco{position:relative;width:min(100%,calc(var(--at-alt) * 4 / 3));aspect-ratio:4/3;border-radius:20px;border:5px solid var(--tinta);
  box-shadow:0 7px 0 var(--tinta);background:#fff;overflow:hidden;touch-action:none}
.at-tela,.at-camada{position:absolute;inset:0;width:100%;height:100%;display:block}
.at-camada{touch-action:none}

/* Barra do objeto selecionado */
.at-contexto{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(26,18,64,.9);
  padding:6px;border-radius:999px;z-index:3;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.at-contexto[hidden]{display:none}
.at-contexto button{width:46px;height:46px;border-radius:50%;border:3px solid var(--tinta);background:var(--branco);font-size:1.3rem;
  display:grid;place-items:center;padding:0;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif}
.at-contexto button:active{transform:scale(.9)}

/* Aviso */
.at-aviso{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px);background:var(--tinta);color:var(--branco);padding:8px 16px;
  border-radius:14px;font-weight:700;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:.25s;z-index:4}
.at-aviso.at-mostra{opacity:1;transform:translate(-50%,0)}

/* Biblioteca de adesivos */
.at-biblioteca{position:absolute;inset:0;z-index:5;background:rgba(26,18,64,.94);display:flex;flex-direction:column;padding:12px;gap:10px;
  animation:at-sobe .22s ease-out}
.at-biblioteca[hidden]{display:none}
@keyframes at-sobe{from{transform:translateY(24px);opacity:0}}
.at-bib-topo{display:flex;gap:8px;align-items:flex-start}
.at-bib-cats{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.at-bib-cat{display:flex;align-items:center;gap:6px;background:var(--branco);border:3px solid var(--tinta);border-radius:999px;padding:5px 14px 5px 8px;
  font-weight:800;font-size:1rem;box-shadow:0 4px 0 #000}
.at-bib-cat .at-ic{font-size:1.4rem}
.at-bib-cat.at-ativo{background:var(--rosa);color:#fff}
.at-bib-fechar{width:46px;height:46px;border-radius:50%;border:3px solid var(--tinta);background:var(--vermelho);color:#fff!important;font-size:1.3rem;font-weight:900;flex:none}
.at-bib-grade{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;align-content:start;padding:4px}
.at-adesivo{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--branco);border:3px solid var(--tinta);border-radius:18px;
  padding:8px 4px 6px;font-weight:800;font-size:.92rem;line-height:1.05;box-shadow:0 4px 0 #000;transition:transform .12s}
.at-adesivo img{width:72px;height:72px;object-fit:contain;display:block}
.at-adesivo .at-emoji{font-size:56px;line-height:72px;height:72px;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif}
.at-adesivo:hover,.at-adesivo.at-foco{transform:translateY(-3px) scale(1.06);background:var(--ouro)}
.at-adesivo.at-foco{outline:5px solid var(--ouro);outline-offset:3px}

/* Base: cores e tamanhos */
.at-base{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.at-cores{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.at-cor{width:42px;height:42px;border-radius:50%;border:4px solid var(--tinta);background:var(--c);box-shadow:0 4px 0 var(--tinta);padding:0;transition:transform .12s}
.at-cor-arco{background:conic-gradient(#FF4D5E,#FF8A2B,#FFD23F,#2ED47A,#4FC3F7,#2F6BFF,#7B3FF2,#FF4D5E)}
.at-cor.at-ativo{transform:translateY(-4px) scale(1.18);box-shadow:0 0 0 4px var(--ouro),0 6px 0 var(--tinta)}
.at-tamanhos{display:flex;gap:7px;background:rgba(255,255,255,.12);padding:5px;border-radius:16px}
.at-tam{width:52px;height:52px;border-radius:14px;border:4px solid var(--tinta);background:var(--branco);display:grid;place-items:center;padding:0;box-shadow:0 4px 0 var(--tinta)}
.at-tam span{width:var(--d);height:var(--d);border-radius:50%;background:var(--tinta);display:block}
.at-tam.at-ativo{background:var(--ouro);transform:translateY(-3px)}

/* Legenda do controle (só aparece com controle) */
.at-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;background:rgba(0,0,0,.35);border-radius:16px;padding:8px 12px;font-weight:700;font-size:1rem}
.at-legenda[hidden]{display:none}
.at-leg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.at-gtxt{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--branco);color:var(--tinta);font-size:.85rem}

/* Celular e telas estreitas: ferramentas viram uma faixa que rola */
@media (max-width:820px){
  .at-raiz{padding:8px;gap:8px;border-radius:20px;--at-alt:max(240px,calc(100dvh - 330px))}
  .at-meio{flex-direction:column;align-items:stretch}
  .at-palco-caixa{order:1}
  .at-ferramentas{order:2;display:flex;width:auto;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
  .at-fer{flex:none;width:76px;min-height:66px}
  .at-abas{flex-wrap:nowrap;width:100%}
  .at-aba{flex:1;min-width:0;font-size:.95rem;padding:4px 8px 4px 4px;gap:6px}
  .at-aba-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .at-mini{width:44px;height:33px;flex:none}
  .at-acoes{width:100%}
  .at-bt{flex:1;min-width:0;padding:5px 4px;font-size:.8rem}
  .at-base{flex-direction:column;gap:6px}
  .at-cores{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding:6px 4px 8px;scrollbar-width:thin}
  .at-cor{flex:none;width:36px;height:36px;border-width:3px}
  .at-tam{width:44px;height:44px}
  .at-legenda{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){.at-raiz *{animation:none!important;transition:none!important}}
