/* Botão central que abre o ateliê de pintura (placeholder até ter cards). */
        .colorir-cta { text-align:center; padding:8px 18px 64px; }

        /* Destaca o(s) card(s) de desenho desta página: borda mais grossa e escura. */
        .hist-card { border:4px solid rgba(var(--shadow-rgb),0.55); }
        /* Divisória entre a imagem e o texto do card. */
        .hist-body { border-top:2px solid rgba(var(--shadow-rgb),0.55); }

        /* Grid centralizado: com poucos desenhos os cards não ficam jogados à esquerda.
           Colunas com teto de largura (~340px) + justify-content centram tanto 1 card
           quanto a fileira cheia de 3 (e as 2 fileiras quando chega a 6). */
        .hist-grid { justify-content:center; }
        @media (min-width:640px){ .hist-grid { grid-template-columns:repeat(2, minmax(0,340px)); } }
        @media (min-width:980px){ .hist-grid { grid-template-columns:repeat(3, minmax(0,340px)); } }
        /* Filtro sem desenho: a mensagem de vazio fica AO LADO do card "Desenhe ou
           carregue" (ele aparece sempre), ocupando as colunas restantes da fileira —
           não numa faixa embaixo. Estica na altura do card e centra o conteúdo. No
           mobile (1 coluna) volta pra baixo, largura cheia (regra base do style.css). */
        @media (min-width:640px){
            .hist-empty { grid-column:2 / -1; display:flex; flex-direction:column;
                align-items:center; justify-content:center; }
        }

        /* ===== Modal do ateliê de pintura ===== */
        .paint-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:0; }
        .paint-modal[hidden] { display:none; }
        .paint-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
        .paint-modal-card { position:relative; z-index:1; background:#fff; border-radius:0; padding:8px;
            width:100vw; max-width:none; height:100vh; max-height:100vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.35);
            display:flex; flex-direction:column; }
        /* Pílula com bolinha de ícone — base compartilhada (Sair / Salvar / Imprimir).
           Geometria + ícone + hover/active aqui; cor é só um modificador --amber/--green/--blue;
           posição fica na classe de cada botão (.io-bar). */
        .pill-btn { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 22px 0 8px;
            border:0; border-radius:999px; color:#fff; font-family:'Baloo 2',system-ui,sans-serif;
            font-size:1.15rem; font-weight:700; line-height:1; cursor:pointer; transition:transform .15s ease; }
        .pill-btn:hover  { transform:translateY(-2px) scale(1.05); }
        .pill-btn:active { transform:translateY(0) scale(0.96); }
        .pill-btn__icon  { display:grid; place-items:center; width:38px; height:38px; flex:none;
            border-radius:50%; background:rgba(255,255,255,0.28); font-size:18px; }
        .pill-btn--amber { background:linear-gradient(135deg, var(--c-amber), var(--c-pink)); box-shadow:0 12px 28px rgba(236,72,153,0.38); }
        .pill-btn--green { background:linear-gradient(135deg,#34d399,#059669); box-shadow:0 12px 28px rgba(5,150,105,0.38); }
        .pill-btn--blue   { background:linear-gradient(135deg,#38bdf8,#2563eb); box-shadow:0 12px 28px rgba(37,99,235,0.38); }
        .pill-btn--red    { background:linear-gradient(135deg,#fb7185,#e11d48); box-shadow:0 12px 28px rgba(225,29,72,0.38); }
        .pill-btn--violet { background:linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow:0 12px 28px rgba(124,58,237,0.38); }
        .pill-btn--teal   { background:linear-gradient(135deg,#2dd4bf,#0d9488); box-shadow:0 12px 28px rgba(13,148,136,0.38); }
        /* Clicar fora não fecha: o card dá uma "tremidinha" avisando. */
        @keyframes paintShake {
            10%,90% { transform:translateX(-2px); }
            20%,80% { transform:translateX(4px); }
            30%,50%,70% { transform:translateX(-9px); }
            40%,60% { transform:translateX(9px); }
        }
        .paint-modal-card.shake { animation:paintShake .45s cubic-bezier(.36,.07,.19,.97); }

        /* ===== Ateliê: canvas grande no centro, controles flutuando por cima ===== */
        .paint-app { --panel:#2b2f36; --accent:#a23ca0; font-family:'Baloo 2',system-ui,sans-serif; color:#222;
            position:relative; flex:1; min-height:0; }
        .paint-app * { box-sizing:border-box; }
        /* canvas no centro; o inset deixa margem pras barras flutuantes nas bordas */
        .paint-app .canvas-area { position:absolute; inset:92px 14px 92px 14px;
            display:flex; align-items:center; justify-content:center; overflow:hidden; }
        .paint-app .canvas-wrap { transition:transform .12s ease; transform-origin:center center; }
        /* meia-largura do canvas (proporção 760/470, travado pela altura) — usado pra
           colar o slider e as cores nas laterais do desenho em qualquer tamanho de tela */
        .paint-app { --canvas-edge:calc(50vw + min((100vh - 200px) * 0.808, 50vw - 22px) + 80px); }
        .paint-app .canvas-wrap { position:relative; background:#fff; border:6px solid #cfd8e3; border-radius:14px; line-height:0;
            box-shadow:0 8px 24px rgba(0,0,0,.12);
            height:100%; width:auto; aspect-ratio:760/470; max-width:100%; max-height:100%; }
        .paint-app canvas { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; cursor:crosshair; touch-action:none; }
        /* camada de texto: por cima do desenho; não recebe clique (input vai pro canvas de baixo) */
        .paint-app canvas.text-layer { position:absolute; inset:0; pointer-events:none; }
        .paint-app canvas.layer-hidden { opacity:0; }   /* oculta a camada SEM tirar do layout (o fundo precisa receber clique) */

        /* barras flutuantes */
        .paint-app .bar { position:absolute; z-index:3; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
            background:var(--panel); border-radius:14px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.20); }
        /* histórico + ferramentas agrupados num pílula duplo, centralizado no topo */
        /* flex centrado: o grupo [histórico][ferramentas] fica centralizado como unidade.
           pointer-events:none no wrapper pra não bloquear o canvas/Fechar nas laterais vazias. */
        .paint-app .top-bars { position:absolute; top:12px; left:0; right:0; z-index:3; pointer-events:none;
            display:flex; justify-content:center; align-items:start; gap:10px; }
        /* topo sem painel: ícones soltos lado a lado (sem fundo/sombra de barra) */
        .paint-app .top-bars .bar { position:static; pointer-events:auto;
            background:none; box-shadow:none; padding:0; border-radius:0; gap:18px; }
        .paint-app .tools-bar { flex-wrap:nowrap; }
        /* histórico (desfazer/refazer) fora do grupo: canto sup. esquerdo, ao lado do Voltar, SEMPRE visível */
        .paint-app .history-bar { position:absolute; z-index:4; top:12px; left:82px;
            background:none; box-shadow:none; padding:0; gap:14px; }
        .paint-app .bar-sep { width:2px; align-self:center; height:36px; background:rgba(0,0,0,.18); margin:0 5px; flex:none; border-radius:2px; }
        .paint-app .colors-bar { top:50%; left:var(--canvas-edge); right:auto; transform:translateY(-50%); background:#fff; height:80vh; overflow:hidden;
            flex-direction:column; align-items:center; gap:10px; }
        /* coluna à esquerda (fora do canvas), centralizada na vertical: salvar/imprimir/limpar/abrir + sair; visual vem de .pill-btn */
        .paint-app .io-bar { position:absolute; z-index:3; top:50%; left:14px; transform:translateY(-50%);
            display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
        /* Voltar do ateliê: canto superior esquerdo; fecha o modal e volta pra galeria (data-close) */
        .paint-app .atelie-voltar { position:absolute; top:12px; left:14px; z-index:4; padding:0; width:52px; justify-content:center; }
        .paint-app .atelie-voltar .pill-btn__icon svg { width:22px; height:22px; display:block; }
        .paint-app .size-bar { position:absolute; z-index:3; top:50%; right:var(--canvas-edge); left:auto; transform:translateY(-50%);
            background:#fff; border-radius:14px; padding:12px 10px; box-shadow:0 8px 24px rgba(0,0,0,.20);
            display:flex; flex-direction:column; align-items:center; gap:8px; }

        /* botão de camada (Texto): usa o visual .pill-btn; folga extra abaixo pra destacar do grupo de ações */
        .paint-app .io-bar .layer-btn { margin-bottom:20px; }
        .paint-app .layer-btn.off { opacity:.5; }

        /* controle de zoom: faixa inferior, borda direita alinhada à borda direita do canvas */
        .paint-app .zoom-bar { position:absolute; z-index:3; bottom:14px; right:max(14px, calc(100vw - var(--canvas-edge)));
            display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:6px 8px;
            box-shadow:0 8px 24px rgba(0,0,0,.20); }
        .paint-app .zoom-btn { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:10px;
            background:#eef2f7; color:#2b2f36; font-size:18px; cursor:pointer; transition:background .12s ease; }
        .paint-app .zoom-btn:hover { background:#e2e9f2; }
        .paint-app .zoom-val { min-width:54px; text-align:center; font-weight:700; color:#334; font-size:15px; }
        .paint-app .zoom-bar .tool { width:42px; height:42px; min-width:0; padding:0; background:#eef2f7; color:#2b2f36; border-radius:10px; }
        .paint-app .zoom-bar .tool:hover { transform:none; background:#e2e9f2; }
        .paint-app .zoom-bar .tool.sel { background:var(--accent); color:#fff; }

        /* cores */
        /* só as cores rolam; o botão 🎨 (mais cores) fica preso na ponta, sempre visível (.swatch-custom já é flex:none) */
        .paint-app .swatches { display:grid; grid-template-columns:repeat(2,42px); gap:8px;
            flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
        .paint-app .swatches button { width:42px; height:42px; border:2px solid rgba(0,0,0,.10); border-radius:50%;
            cursor:pointer; padding:0; }
        .paint-app .swatches button.sel { outline:3px solid var(--accent); outline-offset:1px; transform:scale(1.12); }
        /* botão de cor personalizada: abre o seletor nativo do navegador */
        .paint-app .swatch-custom { position:relative; width:92px; height:42px; flex:none; border-radius:12px;
            border:2px solid rgba(0,0,0,.10); cursor:pointer; display:grid; place-items:center;
            font-size:20px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.4);
            background:conic-gradient(from .15turn,#ff3b30,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d92,#ff3b30); }
        .paint-app .swatch-custom.sel { outline:3px solid var(--accent); outline-offset:2px; }

        /* Seletor de cor próprio: modal grande e centralizado (pra criança) */
        .cpick { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; }
        .cpick[hidden] { display:none; }
        .cpick-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
        .cpick-card { position:relative; z-index:1; background:#fff; border-radius:24px; padding:24px;
            width:min(92vw,560px); box-shadow:0 24px 60px rgba(0,0,0,.35); font-family:'Baloo 2',system-ui,sans-serif; }
        .cpick-x { position:absolute; top:14px; right:14px; z-index:2; }
        .cpick-title { margin:0 56px 16px; text-align:center; font-size:1.7rem; color:#333; }
        .cpick-sv { position:relative; width:100%; aspect-ratio:3/2; border-radius:16px; cursor:crosshair; touch-action:none;
            background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(320,100%,50%); }
        .cpick-sv-cursor { position:absolute; width:28px; height:28px; border-radius:50%; border:3px solid #fff;
            box-shadow:0 0 0 1.5px rgba(0,0,0,.45); transform:translate(-50%,-50%); pointer-events:none; }
        .cpick-hue { -webkit-appearance:none; appearance:none; width:100%; height:30px; margin:18px 0; border-radius:15px; cursor:pointer;
            background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
        .cpick-hue::-webkit-slider-thumb { -webkit-appearance:none; width:36px; height:36px; border-radius:50%;
            background:#fff; border:3px solid #888; box-shadow:0 2px 6px rgba(0,0,0,.3); cursor:pointer; }
        .cpick-hue::-moz-range-thumb { width:36px; height:36px; border-radius:50%;
            background:#fff; border:3px solid #888; box-shadow:0 2px 6px rgba(0,0,0,.3); cursor:pointer; }
        .cpick-foot { display:flex; align-items:center; gap:12px; }
        .cpick-preview { width:54px; height:54px; border-radius:50%; border:3px solid rgba(0,0,0,.12); flex:none; margin-right:auto; background:#e23ca0; }
        .cpick-saved { margin-top:18px; border-top:2px solid #eee; padding-top:14px; }
        .cpick-saved-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
        .cpick-saved-label { font-size:.95rem; font-weight:700; color:#888; }
        .cpick-saved-actions { display:flex; gap:8px; }
        .cpick-add { border:0; border-radius:999px; background:#eef2f7; color:#3a7bd5; font-family:inherit;
            font-weight:700; font-size:.95rem; padding:8px 14px; cursor:pointer; }
        .cpick-add:hover { background:#e2e9f2; }
        .cpick-remove.is-active { background:#fde2e7; color:#e11d48; }
        .cpick-saved-row { display:flex; flex-wrap:wrap; gap:10px; min-height:42px; }
        .cpick-saved-row button { position:relative; width:42px; height:42px; border-radius:50%; border:2px solid rgba(0,0,0,.10);
            cursor:pointer; padding:0; transition:transform .12s ease; }
        .cpick-saved-row button:hover { transform:scale(1.12); }
        .cpick-saved-row.removing button { outline:2px solid #e11d48; outline-offset:1px; }
        .cpick-saved-row.removing button::after { content:'✕'; position:absolute; inset:0; display:grid; place-items:center;
            font-size:20px; font-weight:900; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.75); }

        /* botões */
        /* cada ferramenta = ícone solto (sem fundo); selecionado fica na cor de destaque */
        .paint-app button.tool { width:56px; height:56px; min-width:56px; padding:0; flex:none;
            display:inline-grid; place-items:center; background:none; color:#2b2f36; border:0;
            font-family:inherit; font-weight:700; font-size:36px; line-height:1; cursor:pointer;
            transition:transform .12s ease, color .12s ease; }
        .paint-app button.tool:hover { transform:translateY(-2px); }
        .paint-app button.tool i { font-size:34px; }
        .paint-app button.tool svg { width:38px; height:38px; }   /* seta-bloco (SVG) no mesmo tamanho visual dos ícones */
        .paint-app button.tool.sel { color:var(--accent); }
        .paint-app button.act { width:56px; height:56px; padding:0; display:inline-grid; place-items:center;
            background:none; color:#2b2f36; border:0; font-family:inherit; font-weight:700; font-size:32px;
            cursor:pointer; transition:transform .12s ease; }
        .paint-app button.act:hover { transform:translateY(-2px); }
        /* botão "Desenhos prontos" (galeria) + painel de desenhos pré-definidos */
        .paint-app .gallery-btn i { font-size:32px; }
        .paint-app .gallery-btn.on { color:var(--accent); }
        /* botão de balões: caret indicando que abre opções */
        .paint-app #balloonBtn, .paint-app #galleryBtn { position:relative; }
        .paint-app .tool-caret { position:absolute; right:-16px; top:50%; transform:translateY(-50%); font-size:32px; line-height:1; color:#9aa3af; pointer-events:none; }
        .paint-app #balloonBtn.sel .tool-caret, .paint-app #galleryBtn.on .tool-caret { color:var(--accent); }
        .paint-app .predef-panel { position:absolute; z-index:5; top:78px; left:50%; transform:translateX(-50%);
            background:#fff; border-radius:16px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,.25);
            display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:310px; max-width:92vw; max-height:70vh; overflow:auto;
            transform-origin:top center; animation:predefPop .26s cubic-bezier(.34,1.45,.5,1) backwards; }
        .paint-app .predef-panel[hidden] { display:none; }
        /* abertura elegante: o painel "salta" do botão (escala+fade) e os cards sobem em cascata */
        @keyframes predefPop { from { opacity:0; transform:translateX(-50%) translateY(-10px) scale(.9); }
                               to   { opacity:1; transform:translateX(-50%) translateY(0)     scale(1);  } }
        @keyframes predefItemUp { from { opacity:0; transform:translateY(8px) scale(.95); }
                                  to   { opacity:1; transform:none; } }
        .paint-app .predef-item { width:86px; display:flex; flex-direction:column; align-items:center; gap:6px;
            border:2px solid #e3e8ef; border-radius:12px; background:#fff; padding:8px 6px; cursor:pointer;
            transition:transform .12s ease, border-color .12s ease; font-family:inherit;
            animation:predefItemUp .3s ease backwards; }
        .paint-app .predef-item:nth-child(1){ animation-delay:.08s; }
        .paint-app .predef-item:nth-child(2){ animation-delay:.13s; }
        .paint-app .predef-item:nth-child(3){ animation-delay:.18s; }
        .paint-app .predef-item:nth-child(4){ animation-delay:.23s; }
        .paint-app .predef-item:nth-child(5){ animation-delay:.28s; }
        .paint-app .predef-item:nth-child(6){ animation-delay:.33s; }
        .paint-app .predef-item:nth-child(7){ animation-delay:.38s; }
        .paint-app .predef-item:hover { transform:translateY(-2px); border-color:var(--accent); }
        .paint-app .predef-item img { width:62px; height:62px; object-fit:contain; }
        .paint-app .predef-item svg { width:60px; height:60px; color:#2b2f36; }   /* prévia dos balões (SVG) */
        .paint-app .predef-item span { font-size:13px; font-weight:700; color:#334; }
        /* slider vertical: fill por gradiente (enche de baixo até o thumb), thumb redondo custom */
        .paint-app input[type=range] { -webkit-appearance:none; appearance:none; cursor:pointer;
            writing-mode:vertical-lr; direction:rtl; width:16px; height:560px; border-radius:9px;
            background:linear-gradient(to top, #2b6ef6 var(--p,21%), #e3e8ef var(--p,21%)); }
        .paint-app input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
            width:24px; height:24px; border-radius:50%; background:#2b6ef6; border:3px solid #fff;
            box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
        .paint-app input[type=range]::-moz-range-thumb { width:24px; height:24px; border:3px solid #fff;
            border-radius:50%; background:#2b6ef6; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
        .paint-app .val { color:#334; font-weight:700; font-size:12px; }

        /* mini-barra de texto: flutua sob a barra de ferramentas */
        .paint-app .text-tools { top:74px; left:12px; }
        .paint-app .text-tools[hidden] { display:none; }
        .paint-app .text-tools .tt { background:#3a3f47; color:#fff; border:0; border-radius:8px;
            width:36px; height:36px; font-family:inherit; font-size:16px; cursor:pointer; }
        .paint-app .text-tools .tt.sel { background:var(--accent); }
        /* alinhamento vertical: bloquinho que sobe/desce dentro do botão mostrando onde o texto fica */
        .paint-app .text-tools .tt-valign { display:flex; flex-direction:column; padding:6px 0; }
        .paint-app .text-tools .tt-valign span { display:block; width:16px; height:9px; margin:0 auto; background:#fff; border-radius:2px; }
        .paint-app .text-tools .tt-valign.va-top    { justify-content:flex-start; }
        .paint-app .text-tools .tt-valign.va-middle { justify-content:center; }
        .paint-app .text-tools .tt-valign.va-bottom { justify-content:flex-end; }
        .paint-app .text-tools .tt-size { width:62px; height:36px; border-radius:8px; border:0;
            padding:0 8px; font-family:inherit; font-weight:700; font-size:14px; }
        /* dropdown próprio (fonte/tamanho): estilizável e não rouba o foco da digitação */
        .paint-app .text-tools .tt-dd { position:relative; }
        .paint-app .text-tools .tt-dd-cur { position:relative; height:36px; border:0; border-radius:8px; background:#3a3f47; color:#fff;
            font-family:inherit; font-size:15px; padding:0 28px 0 12px; cursor:pointer; white-space:nowrap; }
        .paint-app .text-tools .tt-dd-cur::after { content:'▾'; position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.85; }
        /* a lista é movida pro <body> (fica acima do textarea, sem scroll, opaca e clicável) */
        .tt-dd-list { position:fixed; z-index:3000; background:#2b2f36; border-radius:14px; padding:6px;
            box-shadow:0 16px 38px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:2px;
            font-family:'Baloo 2',system-ui,sans-serif; }
        .tt-dd-list[hidden] { display:none; }
        .tt-dd-opt { border:0; background:transparent; color:#fff; font-family:inherit; font-size:18px;
            text-align:left; padding:9px 16px; border-radius:9px; cursor:pointer; white-space:nowrap; line-height:1.1; }
        .tt-dd-opt:hover { background:#3a3f47; }
        .tt-dd-opt.sel { background:#a23ca0; }
        /* controle de fundo da caixa de texto */
        .paint-app .text-tools .tt-bg-cur { width:42px; height:36px; border:0; border-radius:8px; cursor:pointer; padding:0;
            box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
        .paint-app .text-tools .tt-bg-cur.is-none { background:repeating-conic-gradient(#cbd5e1 0% 25%, #fff 0% 50%) 0 / 14px 14px; }
        .tt-bg-pop { width:208px; gap:0 !important; }
        .tt-bg-none { border:0; border-radius:9px; background:#3a3f47; color:#fff; font-family:'Baloo 2',system-ui,sans-serif; font-size:15px;
            padding:9px; cursor:pointer; margin-bottom:8px; }
        .tt-bg-none:hover { background:#4a505a; }
        .tt-bg-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
        .tt-bg-grid .tt-bg-sw { width:100%; aspect-ratio:1; border:2px solid rgba(255,255,255,.18); border-radius:50%; cursor:pointer; padding:0; }
        .tt-bg-grid .tt-bg-sw.sel { outline:2px solid #fff; outline-offset:1px; }
        .tt-bg-op { display:flex; align-items:center; gap:8px; color:#fff; font-family:'Baloo 2',system-ui,sans-serif; font-size:13px; margin-top:12px; }
        .tt-bg-op input { flex:1; accent-color:#a23ca0; }
        /* controle de borda: gatilho mostra a cor como um anel (contorno) */
        .paint-app .text-tools .tt-bd-cur { width:42px; height:36px; border:0; border-radius:8px; cursor:pointer; padding:0; background:#2b2f36; }
        .paint-app .text-tools .tt-bd-cur.is-none { box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); }

        /* Campo de digitação flutuante (texto) — textarea multi-linha sobre a área puxada (canto sup. esq.) */
        .paint-text-input { position:fixed; z-index:1100; box-sizing:border-box; transform:translate(-50%,-50%);
            border:0; background:transparent; padding:0;   /* fundo branco é pintado no canvas (cobre a caixa até a moldura); textarea recuado TEXT_PAD deixa as alças livres */
            outline:none; min-width:8px;
            resize:none; overflow:hidden; text-align:left; line-height:1.25;
            font-family:'Baloo 2',system-ui,sans-serif; white-space:pre-wrap; }
        .paint-text-input::placeholder { color:currentColor; opacity:.5; }   /* "Digite…" prevê a cor escolhida */

        /* prévia de pincel/borracha: círculo do tamanho exato do traço, ícone no centro (fundo definido por ferramenta no JS) */
        .tool-ring { position:fixed; z-index:1150; pointer-events:none; border-radius:50%; display:none;
            place-items:center; border:2px solid rgba(40,40,40,.85);
            box-shadow:0 0 0 1px rgba(255,255,255,.6); transform:translate(-50%,-50%); }
        .tool-ring i { font-size:32px; color:#2b2f36; text-shadow:0 0 3px #fff,0 0 3px #fff; }

        /* Telas estreitas: barras menores, slider deitado, canvas com menos margem */
        @media (max-width:820px) {
            .paint-app .canvas-area { inset:110px 8px 66px 8px; }
            .paint-app .atelie-voltar { left:8px; }
            .paint-app .tools-bar { max-width:calc(100% - 24px); }
            .paint-app .colors-bar { top:60px; right:12px; left:auto; height:auto; max-width:calc(100% - 24px); transform:none; max-height:none; }
            .paint-app .text-tools { top:auto; bottom:64px; left:12px; }
            .paint-app .size-bar { top:auto; bottom:64px; right:12px; left:auto; transform:none; flex-direction:row; }
            .paint-app input[type=range] { writing-mode:horizontal-tb; direction:ltr; width:120px; height:16px;
                background:linear-gradient(to right, #2b6ef6 var(--p,21%), #e3e8ef var(--p,21%)); }
        }

        /* ===== Celular: ateliê em PAISAGEM =====
           Em pé (.girado): o card gira 90° e ocupa a tela como paisagem — o JS
           (colorir.js) troca as coordenadas do canvas pela MESMA media query.
           Deitado de verdade OU girado (.compacto): as barras vão pras bordas da
           tela larga-e-baixa, sem depender de --canvas-edge (vw/vh não valem no
           card girado). Mesmo padrão do kids-puzzle. */
        .paint-modal-card.girado {
            position:fixed; top:0; left:0; width:100vh; height:100vw; max-width:none; max-height:none;
            padding:0; transform-origin:0 0; transform:rotate(90deg) translateY(-100%);
        }
        /* Abas-triângulo (celular): puxam as barras — topo = ferramentas, esquerda = ações.
           Padrão do kids-puzzle (.pz-abrir): a barra nasce recolhida, a aba abre/fecha. */
        .compacto-only { display:none !important; }
        .paint-modal-card.compacto .paint-app .puxar.compacto-only { display:grid !important; }
        .paint-app .puxar { position:absolute; z-index:8; place-items:center; width:54px; height:30px;
            border:0; border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.22);
            color:#5a6472; cursor:pointer; transition:top .18s ease, left .18s ease; }
        .paint-app .puxar .seta { font-size:20px; line-height:1; transition:transform .18s ease; }
        .paint-app .puxar-topo { top:6px; left:50%; transform:translateX(-50%); }
        .paint-app .puxar-lado { left:6px; top:50%; transform:translateY(-50%); width:30px; height:54px; }
        .paint-app .puxar-lado .seta { transform:rotate(-90deg); }                        /* fechado: aponta pra direita */
        .paint-app .puxar-zoom { left:8px; bottom:8px; top:auto; transform:none; }
        .paint-app .puxar-zoom .seta { transform:rotate(180deg); }                        /* fechado: aponta pra cima */
        .paint-modal-card.top-aberto .puxar-topo .seta { transform:rotate(180deg); }        /* aberto: aponta pra cima */
        .paint-modal-card.esq-aberto .puxar-lado .seta { transform:rotate(90deg); }          /* aberto: aponta pra esquerda */
        .paint-modal-card.zoom-aberto .puxar-zoom .seta { transform:rotate(0deg); }           /* aberto: aponta pra baixo */

        /* canvas GRANDE e FIXO; abrir uma barra sobrepõe (não empurra o canvas) */
        .paint-modal-card.compacto .paint-app .canvas-area { inset:44px 90px 8px 44px; }
        .paint-modal-card.compacto .paint-app .atelie-voltar { top:8px; left:8px; width:44px; height:44px; }
        /* histórico sempre visível ao lado do Voltar (não atrás da aba ▾) */
        .paint-modal-card.compacto .paint-app .history-bar { top:8px; left:60px; gap:8px; }

        /* FERRAMENTAS (topo): escondidas; a aba de cima mostra a barra inteira (2 linhas).
           left:170 tira o histórico de trás do Voltar (canto sup. esq.) */
        .paint-modal-card.compacto .paint-app .top-bars { display:none; top:8px; gap:10px; left:170px; right:56px; }
        /* aberta: card branco flutuante centrado, POR CIMA do canvas (não empurra), logo abaixo da aba */
        .paint-modal-card.compacto.top-aberto .paint-app .top-bars { display:inline-flex; top:44px; left:50%; right:auto;
            transform:translateX(-50%); width:auto; max-width:calc(100% - 24px); pointer-events:auto;
            background:rgba(255,255,255,.96); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px 12px; }
        .paint-modal-card.compacto .paint-app .tools-bar { flex-wrap:wrap; justify-content:center; max-width:500px; gap:6px 8px; }
        .paint-modal-card.compacto .paint-app .history-bar { flex:none; flex-wrap:nowrap; }   /* undo/redo lado a lado */
        .paint-modal-card.compacto .paint-app button.tool { width:40px; height:40px; min-width:40px; font-size:27px; }
        .paint-modal-card.compacto .paint-app button.tool i { font-size:25px; }
        .paint-modal-card.compacto .paint-app button.tool svg { width:28px; height:28px; }
        .paint-modal-card.compacto .paint-app button.act { width:40px; height:40px; font-size:24px; }
        .paint-modal-card.compacto .paint-app .bar-sep { height:28px; }

        /* AÇÕES (esquerda): escondidas; a aba do lado mostra a coluna Salvar/Imprimir/…
           top:56 começa abaixo do Voltar pra não esconder o primeiro item (Texto) */
        .paint-modal-card.compacto .paint-app .io-bar { display:none; top:56px; left:8px; transform:none; gap:6px; }
        .paint-modal-card.compacto.esq-aberto .paint-app .io-bar { display:flex; left:44px;
            background:rgba(255,255,255,.9); border-radius:16px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
        .paint-modal-card.compacto .paint-app .io-bar .pill-btn { height:38px; font-size:.92rem; padding:0 14px 0 5px; }
        .paint-modal-card.compacto .paint-app .io-bar .pill-btn__icon { width:28px; height:28px; font-size:14px; }
        .paint-modal-card.compacto .paint-app .io-bar .layer-btn { margin-bottom:6px; }

        /* CORES sempre visíveis: coluna rolável à direita */
        .paint-modal-card.compacto .paint-app .colors-bar { top:44px; bottom:8px; right:8px; left:auto; height:auto;
            max-height:none; max-width:none; transform:none; padding:8px 6px;
            flex-direction:column-reverse; }   /* card girado 90° inverte a ordem visual: reverte pra ler cores → 🎨 no fim */
        .paint-modal-card.compacto .paint-app .colors-bar .swatches { grid-template-columns:32px; gap:6px; }
        .paint-modal-card.compacto .paint-app .colors-bar .swatches button { width:32px; height:32px; }
        .paint-modal-card.compacto .paint-app .colors-bar .swatch-custom { width:32px; height:32px; }
        /* espessura do contorno: barra deitada MAIOR, centrada embaixo */
        .paint-modal-card.compacto .paint-app .size-bar { top:auto; bottom:8px; left:50%; right:auto;
            transform:translateX(-50%); flex-direction:row; padding:14px 16px; }
        .paint-modal-card.compacto .paint-app input[type=range] { writing-mode:horizontal-tb; direction:ltr;
            width:260px; height:22px; border-radius:11px; background:linear-gradient(to right, #2b6ef6 var(--p,21%), #e3e8ef var(--p,21%)); }
        .paint-modal-card.compacto .paint-app input[type=range]::-webkit-slider-thumb { width:34px; height:34px; }
        .paint-modal-card.compacto .paint-app input[type=range]::-moz-range-thumb { width:34px; height:34px; }
        /* ZOOM: escondido; a aba do canto inferior esquerdo mostra os controles acima dela */
        .paint-modal-card.compacto .paint-app .zoom-bar { display:none; left:8px; right:auto; bottom:52px; }
        .paint-modal-card.compacto.zoom-aberto .paint-app .zoom-bar { display:flex; }
        /* texto: mini-barra acima do zoom */
        .paint-modal-card.compacto .paint-app .text-tools { top:auto; bottom:56px; left:8px; }