/* --- style.css --- */
/* Importa fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* --- Variáveis de Cor (Tema Dracula/Neon Escuro) --- */
:root {
    --cor-fundo-principal-inicio: #1a1a2e; /* Azul/Roxo bem escuro (início gradiente) */
    --cor-fundo-principal-fim: #16213e;    /* Azul escuro (fim gradiente) */
    --cor-container-fundo: rgba(40, 42, 54, 0.85); /* Cinza escuro Dracula semi-transparente */
    --cor-container-borda: #bd93f9; /* Roxo claro neon (bordas principais) */
    --cor-texto-padrao: #e0e0ff;    /* Branco levemente azulado/roxo */
    --cor-texto-cabecalho: #f8f8f2; /* Branco quase puro Dracula */
    --cor-texto-secundario: #b0b0d0; /* Cinza azulado claro */
    --cor-verde-neon: #50fa7b;
    --cor-rosa-neon: #ff79c6;
    --cor-roxo-claro: #bd93f9;
    --cor-amarelo-claro: #f1fa8c;
    --cor-laranja-neon: #ffb86c; /* Adicional Dracula Orange */
    --cor-ciano-neon: #8be9fd;   /* Adicional Dracula Cyan */
    --cor-cinza-escuro-1: #44475a; /* Cinza médio escuro */
    --cor-cinza-escuro-2: #282a36; /* Cinza mais escuro (base Dracula) */
    --cor-borda-input: #6272a4; /* Cinza azulado para bordas sutis */
    --cor-fundo-desabilitado: #4a4a5e;
    --cor-texto-desabilitado: #9090a0;
    --cor-fundo-hover-item-camada: #3a3c4e; /* Um pouco mais claro que o container-fundo */


    --sombra-padrao: 0 6px 20px rgba(0, 0, 0, 0.4);
    --border-radius-padrao: 6px; /* Reduzido de 8px para um visual mais compacto */
    --transicao-rapida: all 0.2s ease-in-out;
}

/* --- Reset Básico e Estilos Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px; /* Reduzido de 16px como base para REM, para um visual mais compacto geral */
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6; /* Ajustado de 1.7 */
    background: linear-gradient(135deg, var(--cor-fundo-principal-inicio), var(--cor-fundo-principal-fim));
    color: var(--cor-texto-padrao);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- Estilos para o Efeito GEEK CΦDΞ --- */
.geek { color: var(--cor-verde-neon); font-weight: bold; }
.code { color: var(--cor-rosa-neon); font-weight: bold; }

/* --- ESTILOS DO EDITOR DE IMAGENS (index.html) --- */

.editor-container {
    display: flex;
    flex-grow: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    height: calc(100vh - 55px); /* Ajustado para novo tamanho do rodapé */
}

/* Painel de Controles Lateral */
.controls-panel {
    width: 300px; 
    flex-shrink: 0;
    background-color: var(--cor-cinza-escuro-2);
    padding: 1rem; 
    height: 100%;
    overflow-y: auto;
    border-right: 2px solid var(--cor-roxo-claro);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.7rem; 
}

/* Área Principal (Canvas + Footer Ações) */
.main-content-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cor-fundo-principal-fim), var(--cor-fundo-principal-inicio));
}

.canvas-area {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* Rodapé de Ações (Undo, Redo, etc.) */
.action-buttons-footer {
    flex-shrink: 0;
    padding: 0.6rem 1.2rem; 
    background-color: var(--cor-cinza-escuro-2);
    border-top: 1px solid var(--cor-cinza-escuro-1);
    text-align: center;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
}

.action-buttons-footer .action-buttons-container {
    display: inline-flex;
    justify-content: center;
    gap: 0.5rem; 
    flex-wrap: wrap;
}

/* Cabeçalho do Painel de Controles */
.controls-panel h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4em; 
    color: var(--cor-texto-cabecalho);
    text-align: center;
    margin-bottom: 1rem; 
    padding-bottom: 0.7rem; 
    border-bottom: 1px solid var(--cor-cinza-escuro-1);
    text-shadow: 0 0 5px var(--cor-rosa-neon);
}

.controls-panel h1 i {
    margin-right: 0.5rem; 
    color: var(--cor-rosa-neon);
}

/* Seções dentro do Painel */
.control-section {
    border: 1px solid var(--cor-cinza-escuro-1);
    padding: 0.8rem 1rem; 
    border-radius: var(--border-radius-padrao);
    background-color: var(--cor-container-fundo);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25); 
    margin-bottom: 0.4rem; 
}

.control-section h2 {
    font-size: 1.0em; 
    margin-bottom: 0.7rem; 
    color: var(--cor-roxo-claro);
    padding-bottom: 0.5rem; 
    border-bottom: 1px dashed var(--cor-cinza-escuro-1);
    display: flex;
    align-items: center;
}

.control-section h2 i {
    margin-right: 0.5rem; 
    color: var(--cor-roxo-claro);
    width: 18px; 
    text-align: center;
    font-size: 0.85em; 
}

/* Subtítulos (h3) */
.control-section h3 {
    font-size: 0.95em; 
    margin-bottom: 0.4rem; 
    color: var(--cor-ciano-neon);
    display: flex;
    align-items: center;
}
.control-section h3 i {
    margin-right: 0.4rem; 
    color: var(--cor-ciano-neon);
    width: 18px; text-align: center;
}


/* --- ESTILOS DOS ELEMENTOS DE INTERFACE (Botões, Sliders, Inputs, etc.) --- */

/* Botões Gerais e Labels tipo Botão */
button, .button-like-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem; 
    background-color: var(--cor-cinza-escuro-1);
    color: var(--cor-texto-padrao);
    padding: 0.5rem 0.8rem; 
    border: 1px solid var(--cor-roxo-claro);
    border-radius: var(--border-radius-padrao);
    cursor: pointer;
    font-size: 0.85em; 
    font-weight: 500;
    margin: 0.2rem 0.05rem; 
    transition: var(--transicao-rapida);
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 
}

button i, .button-like-label i {
    color: var(--cor-verde-neon);
    font-size: 0.9em; 
}

button:hover, .button-like-label:hover {
    background-color: var(--cor-roxo-claro);
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-roxo-claro);
    transform: translateY(-1px); 
    box-shadow: 0 3px 6px rgba(189, 147, 249, 0.25);
}
button:hover i, .button-like-label:hover i {
    color: var(--cor-cinza-escuro-2);
}


button:active, .button-like-label:active {
    transform: scale(0.97) translateY(0); 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Estado Desabilitado */
button:disabled, button[disabled],
.button-like-label.disabled, .button-like-label[aria-disabled="true"] {
    background-color: var(--cor-fundo-desabilitado) !important;
    color: var(--cor-texto-desabilitado) !important;
    border-color: var(--cor-cinza-escuro-1) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}
button:disabled i,
.button-like-label.disabled i, .button-like-label[aria-disabled="true"] i {
    color: var(--cor-texto-desabilitado) !important;
}


/* Botão de Ferramenta Ativa */
button.active-tool {
    background-color: var(--cor-verde-neon);
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-verde-neon);
    box-shadow: 0 0 8px var(--cor-verde-neon), inset 0 1px 2px rgba(0,0,0,0.25);
}
button.active-tool i {
    color: var(--cor-cinza-escuro-2);
}

/* Botões iniciais (Escolher/Tela Branca) & Links Úteis (Tutorial/4U) */
.start-options-container,
.links-uteis-container {
    display: flex; 
    flex-wrap: wrap;
    gap: 0.5rem; 
    margin-bottom: 0.8rem;
}

.start-options-container:not(.initial-load-buttons) > .button-like-label,
.start-options-container:not(.initial-load-buttons) > button,
.links-uteis-container > .button-like-label, 
.links-uteis-container > button { 
    margin: 0;
    flex-grow: 1;   
    flex-basis: 0;  
    min-width: 110px; 
}

/* Especificidade aumentada para garantir o layout em coluna */
.start-options-container.initial-load-buttons {
    flex-direction: column !important; /* Força o empilhamento vertical */
    gap: 0.6rem !important; /* Espaço específico para o layout em coluna */
}

.start-options-container.initial-load-buttons > .button-like-label,
.start-options-container.initial-load-buttons > button {
    width: 100% !important; /* Ocupa a largura total quando em coluna */
    margin: 0 !important;   /* Remove margens que poderiam ser de um layout flex row */
    flex-grow: 0 !important; /* Reseta flex-grow para layout em coluna */
    flex-basis: auto !important; /* Reseta flex-basis para layout em coluna */
    min-width: auto !important; /* Reseta min-width para layout em coluna */
}

.start-options-container .button-like-label, 
.start-options-container button,
.links-uteis-container .button-like-label,
.links-uteis-container button {
    border-color: var(--cor-ciano-neon); 
}

.start-options-container .button-like-label i,
.start-options-container button i,
.links-uteis-container .button-like-label i,
.links-uteis-container button i {
     color: var(--cor-ciano-neon); 
}

.start-options-container .button-like-label:hover,
.start-options-container button:hover,
.links-uteis-container .button-like-label:hover,
.links-uteis-container button:hover {
     background-color: var(--cor-ciano-neon);
     border-color: var(--cor-ciano-neon); 
     color: var(--cor-cinza-escuro-2);
     box-shadow: 0 3px 6px rgba(139, 233, 253, 0.25);
}

.start-options-container .button-like-label:hover i,
.start-options-container button:hover i,
.links-uteis-container .button-like-label:hover i,
.links-uteis-container button:hover i {
    color: var(--cor-cinza-escuro-2); 
}


/* Sliders */
input[type="range"] {
    width: 100%;
    cursor: pointer;
    margin-top: 0.2rem; 
    margin-bottom: 0.7rem; 
    accent-color: var(--cor-rosa-neon);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    height: 6px; 
    border-radius: 3px; 
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; 
    background: var(--cor-cinza-escuro-1);
    border-radius: 2px; 
    border: 1px solid var(--cor-cinza-escuro-2);
}
input[type="range"]::-moz-range-track {
    height: 4px; 
    background: var(--cor-cinza-escuro-1);
    border-radius: 2px; 
    border: 1px solid var(--cor-cinza-escuro-2);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; 
    height: 16px; 
    background: var(--cor-rosa-neon);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--cor-cinza-escuro-2);
    box-shadow: 0 1px 2px rgba(255, 121, 198, 0.4);
    margin-top: -7px; 
}
input[type="range"]::-moz-range-thumb {
    width: 16px; 
    height: 16px; 
    background: var(--cor-rosa-neon);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--cor-cinza-escuro-2);
    box-shadow: 0 1px 2px rgba(255, 121, 198, 0.4);
}
input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--cor-texto-desabilitado);
    box-shadow: none; border: none;
}
input[type="range"]:disabled::-moz-range-thumb {
    background: var(--cor-texto-desabilitado);
    box-shadow: none; border: none;
}
input[type="range"]:disabled::-webkit-slider-runnable-track,
input[type="range"]:disabled::-moz-range-track {
    background: var(--cor-fundo-desabilitado);
}


/* Labels e Spans de Valor */
label {
    display: block;
    margin-bottom: 0.3rem; 
    font-size: 0.85em; 
    color: var(--cor-texto-secundario);
    font-weight: 500;
}
.value-span {
    font-weight: bold;
    color: var(--cor-amarelo-claro);
    background-color: var(--cor-cinza-escuro-1);
    padding: 2px 6px; 
    border-radius: 3px; 
    display: inline-block;
    min-width: 30px; 
    text-align: center;
    font-size: 0.85em; 
    margin-left: 4px; 
    border: 1px solid var(--cor-borda-input);
}
label span#fileSizeEstimate {
    font-weight: normal;
    color: var(--cor-texto-secundario);
    font-size: 0.8em; 
    margin-left: 4px;
}
label.disabled {
    color: var(--cor-texto-desabilitado);
}

/* Checkbox */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0.5rem 0; 
    font-size: 0.9em; 
    position: relative;
    padding-left: 1.8rem; 
    user-select: none;
    width: fit-content;
    margin-right: 0.4rem; 
    color: var(--cor-texto-padrao);
}
.checkbox-label input[type="checkbox"] {
    position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;
}
.checkmark {
    position: absolute;
    top: 2px; left: 0;
    height: 16px; width: 16px; 
    background-color: var(--cor-cinza-escuro-1);
    border: 1px solid var(--cor-borda-input);
    border-radius: 3px; 
    transition: var(--transicao-rapida);
}
.checkbox-label:hover .checkmark {
    background-color: var(--cor-cinza-escuro-1);
    border-color: var(--cor-roxo-claro);
}
.checkbox-label input:checked ~ .checkmark {
    background-color: var(--cor-verde-neon);
    border-color: var(--cor-verde-neon);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px; top: 1px; 
    width: 4px; height: 8px; 
    border: solid var(--cor-cinza-escuro-2);
    border-width: 0 2.5px 2.5px 0; 
    transform: rotate(45deg);
}
.checkbox-label input:checked ~ .checkmark:after {
    display: block;
}


/* Inputs Numéricos e de Texto */
input[type="number"], input[type="text"] {
    flex-grow: 1;
    padding: 0.5rem 0.7rem; 
    border: 1px solid var(--cor-borda-input);
    border-radius: 3px; 
    font-size: 0.85em; 
    width: 100%;
    background-color: var(--cor-cinza-escuro-1);
    color: var(--cor-texto-padrao);
    transition: border-color 0.2s ease;
}
input[type="number"]:focus, input[type="text"]:focus {
    outline: none;
    border-color: var(--cor-verde-neon);
    box-shadow: 0 0 4px rgba(80, 250, 123, 0.25);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
input::placeholder { color: var(--cor-texto-secundario); opacity: 0.7; }


/* Grupo de inputs para redimensionamento */
.resize-inputs-container { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; } 
.resize-input-group { display: flex; align-items: center; gap: 0.4rem; } 
.resize-input-group label { margin-bottom: 0; flex-basis: 80px; flex-shrink: 0; text-align: right; color: var(--cor-texto-padrao); font-size: 0.85em; } 

/* Select (Dropdown) */
select {
    width: 100%;
    padding: 0.6rem 0.9rem; 
    border: 1px solid var(--cor-roxo-claro);
    border-radius: var(--border-radius-padrao);
    font-size: 0.9em; 
    background-color: var(--cor-cinza-escuro-1);
    color: var(--cor-texto-padrao);
    cursor: pointer;
    margin-bottom: 0.4rem; 
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23bd93f9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center; 
    background-size: 0.9em; 
    transition: border-color 0.2s ease;
}
select:focus {
    outline: none;
    border-color: var(--cor-verde-neon);
    box-shadow: 0 0 4px rgba(80, 250, 123, 0.25);
}

/* Input de Cor */
input[type="color"] {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 36px; height: 28px; 
    background-color: transparent;
    border: 1px solid var(--cor-borda-input);
    border-radius: 3px; 
    cursor: pointer;
    padding: 2px;
    overflow: hidden;
    margin: 0 0.15rem; 
    vertical-align: middle;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 2px; }


/* Container para ferramentas (layout em grid) */
.main-tool-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem; 
    margin-bottom: 0.8rem; 
    padding-bottom: 0.8rem; 
    border-bottom: 1px dashed var(--cor-cinza-escuro-1);
}
.main-tool-buttons > button,
.main-tool-buttons > .button-like-label,
.main-tool-buttons > div
{
    width: 100%; margin: 0;
}
.main-tool-buttons #addTextBtn, .main-tool-buttons #addEmojiBtn { border-color: var(--cor-verde-neon); }
.main-tool-buttons #addTextBtn i, .main-tool-buttons #addEmojiBtn i { color: var(--cor-verde-neon); }

.main-tool-buttons label[for="imageOverlayLoader"] { border-color: var(--cor-laranja-neon); }
.main-tool-buttons label[for="imageOverlayLoader"] i { color: var(--cor-laranja-neon); }
.main-tool-buttons label[for="imageOverlayLoader"]:hover {
    background-color: var(--cor-laranja-neon);
    border-color: var(--cor-laranja-neon);
    color: var(--cor-cinza-escuro-2);
    box-shadow: 0 3px 6px rgba(255, 184, 108, 0.25);
}
.main-tool-buttons label[for="imageOverlayLoader"]:hover i { color: var(--cor-cinza-escuro-2); }


.main-tool-buttons #eraserToolBtn { border-color: var(--cor-rosa-neon); }
.main-tool-buttons #eraserToolBtn i { color: var(--cor-rosa-neon); }
.main-tool-buttons #lineToolBtn,
.main-tool-buttons #arrowToolBtn, .main-tool-buttons #rectToolBtn,
.main-tool-buttons #circleToolBtn,
.main-tool-buttons #penToolBtn { border-color: var(--cor-ciano-neon); }
.main-tool-buttons #lineToolBtn i,
.main-tool-buttons #arrowToolBtn i, .main-tool-buttons #rectToolBtn i,
.main-tool-buttons #circleToolBtn i,
.main-tool-buttons #penToolBtn i { color: var(--cor-ciano-neon); }
.main-tool-buttons #selectToolBtn { border-color: var(--cor-amarelo-claro); }
.main-tool-buttons #selectToolBtn i { color: var(--cor-amarelo-claro); }
.main-tool-buttons #removeBgBtn, .main-tool-buttons #upscaleImageBtn { border-color: var(--cor-amarelo-claro); }
.main-tool-buttons #removeBgBtn i, .main-tool-buttons #upscaleImageBtn i { color: var(--cor-amarelo-claro); }
.main-tool-buttons #removeBgBtn:hover, .main-tool-buttons #upscaleImageBtn:hover {
    background-color: var(--cor-amarelo-claro);
    border-color: var(--cor-amarelo-claro);
    color: var(--cor-cinza-escuro-2);
    box-shadow: 0 3px 6px rgba(241, 250, 140, 0.25);
}
.main-tool-buttons #removeBgBtn:hover i, .main-tool-buttons #upscaleImageBtn:hover i {
    color: var(--cor-cinza-escuro-2);
}


/* Controles comuns (Cor, Espessura, Escala da Camada) */
#shapePenTextControls .tool-container {
    display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; 
}
#shapePenTextControls .tool-container label { margin-bottom: 0; font-size: 0.85em; } 
#shapePenTextControls #lineWidthLabel { margin-left: auto; }

#shapePenTextControls #layerScaleControlGroup label {
    display: block; width: 100%; margin-bottom: 0.2rem;
}
#shapePenTextControls #layerScaleControlGroup input[type="range"] {
    margin-top: 0;
}


/* Container Conta-Gotas - ATIVADO */
.eyedropper-container { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap;} 
.eyedropper-container input[type="text"] {
    flex-grow: 0; flex-shrink: 0; width: 80px; padding: 0.3rem 0.5rem; 
    border: 1px solid var(--cor-ciano-neon);
    background-color: var(--cor-cinza-escuro-2);
    color: var(--cor-ciano-neon);
    font-family: monospace; text-align: center; font-size: 0.8em; 
}
.eyedropper-container button {
    min-width: auto; padding: 0.3rem 0.6rem; 
    background-color: var(--cor-ciano-neon);
    color: var(--cor-cinza-escuro-2);
    font-size: 0.8em; margin: 0; border: none; 
}
.eyedropper-container button i { color: var(--cor-cinza-escuro-2); }
.eyedropper-container button:hover {
    background-color: #a7f3ff;
    color: var(--cor-cinza-escuro-2);
    box-shadow: 0 2px 3px rgba(139, 233, 253, 0.35);
}
#eyedropperPreview {
    width: 24px; height: 24px; border-radius: 3px; 
    border: 1px solid var(--cor-ciano-neon);
    display: inline-block; vertical-align: middle; background-color: transparent;
    margin-right: 0.25rem; background-image: none; 
    background-image: linear-gradient(45deg, #44475a 25%, transparent 25%), linear-gradient(-45deg, #44475a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #44475a 75%), linear-gradient(-45deg, transparent 75%, #44475a 75%);
    background-size: 8px 8px; 
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px; 
}
#eyedropperPreview[style*="background-color: rgb"] { background-image: none; }
#eyedropperPreview[style*="background-color: #"] { background-image: none; }


/* Grid de Transformações (Rotação/Espelhamento) */
.transform-buttons-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; 
    margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--cor-cinza-escuro-1); 
}
.transform-column { display: flex; flex-direction: column; gap: 0.4rem; } 
.transform-column button {
    width: 100%; margin: 0;
    border-color: var(--cor-laranja-neon);
}
.transform-column button i { color: var(--cor-laranja-neon); }
.transform-column button:hover {
    background-color: var(--cor-laranja-neon);
    border-color: var(--cor-laranja-neon);
    color: var(--cor-cinza-escuro-2);
    box-shadow: 0 3px 6px rgba(255, 184, 108, 0.25);
}
.transform-column button:hover i { color: var(--cor-cinza-escuro-2); }

/* Download Section */
.download-options { margin-bottom: 0.8rem; } 
.download-options label { margin-bottom: 0.4rem; } 
.download-options select { margin-bottom: 0.4rem; } 
.info-text { font-size: 0.8em; color: var(--cor-texto-secundario); margin-top: 0.4rem; line-height: 1.3; } 
.info-text strong { color: var(--cor-texto-padrao); font-weight: 600; }


/* Canvas e Cursores */
#imageCanvas {
    display: block;
    background-color: transparent;
    background-image: linear-gradient(45deg, var(--cor-cinza-escuro-1) 25%, transparent 25%), linear-gradient(-45deg, var(--cor-cinza-escuro-1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cor-cinza-escuro-1) 75%), linear-gradient(-45deg, transparent 75%, var(--cor-cinza-escuro-1) 75%);
    background-size: 18px 18px; 
    background-position: 0 0, 0 9px, 9px -9px, -9px 0px; 
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    touch-action: none;
}
#tempCanvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 2;
    background: transparent;
    width: 100%;
    height: 100%;
}
#cropOverlay {
    position: absolute;
    pointer-events: none;
    display: none;
    z-index: 10;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
    border: 1.5px dashed var(--cor-verde-neon);
}

/* Pré-visualização de Imagem (Painel) */
.preview-container { margin-top: 0.8rem; } 
.preview-container p { margin-bottom: 0.4rem; font-weight: 600; color: var(--cor-texto-secundario); font-size: 0.85em; } 
.preview-container img {
    border: 1px solid var(--cor-cinza-escuro-1);
    padding: 3px; 
    background-color: var(--cor-cinza-escuro-2);
    border-radius: 3px; 
    margin-top: 0.4rem; 
    max-width: 100%;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    display: block;
}


/* --- Modal de Emojis/Figurinhas --- */
.modal-backdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); z-index: 99; animation: fadeIn 0.3s ease-out;
}
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: var(--cor-cinza-escuro-2);
    padding: 1.6rem; 
    border-radius: var(--border-radius-padrao);
    border: 1px solid var(--cor-roxo-claro);
    box-shadow: var(--sombra-padrao);
    z-index: 100;
    max-width: 90%; width: 480px; max-height: 80vh; 
    display: none;
    flex-direction: column;
    animation: scaleIn 0.3s ease-out forwards;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem; padding-bottom: 0.7rem; 
    border-bottom: 1px solid var(--cor-cinza-escuro-1); flex-shrink: 0;
}
.modal-header h3 {
    margin: 0; font-size: 1.15em; color: var(--cor-roxo-claro); 
    font-family: 'Poppins', sans-serif; font-weight: 600;
}
.modal-close-btn {
    background: none; border: none; font-size: 1.8em; 
    color: var(--cor-texto-secundario); cursor: pointer; line-height: 1; padding: 0 0.25rem; 
    transition: color 0.2s ease;
}
.modal-close-btn:hover { color: var(--cor-rosa-neon); }
#emojiGrid {
    flex-grow: 1; overflow-y: auto; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); 
    gap: 0.6rem; justify-content: center; 
    padding: 0.4rem; 
    margin-right: -8px;
    padding-right: 8px;
}
.emoji-grid button {
    background: var(--cor-cinza-escuro-1);
    border: 1px solid transparent;
    font-size: 1.7em; padding: 0.25rem; 
    cursor: pointer;
    border-radius: 3px; transition: var(--transicao-rapida);
    line-height: 1; color: var(--cor-texto-padrao);
}
.emoji-grid button:hover {
    background-color: var(--cor-cinza-escuro-1);
    border-color: var(--cor-verde-neon);
    transform: scale(1.08); 
}

/* --- INÍCIO DOS ESTILOS PARA O PAINEL DE CAMADAS --- */
.layer-panel-section h2 i {
    color: var(--cor-ciano-neon);
}

.layer-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; 
    max-height: 220px; 
    overflow-y: auto;
    padding: 0.25rem; 
    border: 1px solid var(--cor-cinza-escuro-1);
    border-radius: var(--border-radius-padrao);
    background-color: var(--cor-cinza-escuro-2);
}

.layer-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.7rem; 
    background-color: var(--cor-container-fundo);
    border: 1px solid var(--cor-cinza-escuro-1);
    border-radius: calc(var(--border-radius-padrao) - 2px);
    cursor: pointer;
    transition: var(--transicao-rapida);
    user-select: none;
}

.layer-item:hover:not(.selected-layer):not(.dragging) { /* Adicionado :not(.dragging) para evitar conflito visual */
    background-color: var(--cor-fundo-hover-item-camada);
    border-color: var(--cor-roxo-claro);
}

.layer-item.selected-layer {
    background-color: var(--cor-roxo-claro);
    border-color: var(--cor-verde-neon);
    color: var(--cor-cinza-escuro-2);
}
.layer-item.selected-layer .layer-type-icon,
.layer-item.selected-layer .layer-name,
.layer-item.selected-layer .layer-action-btn i {
    color: var(--cor-cinza-escuro-2);
}
.layer-item.selected-layer .layer-drag-handle {
    color: var(--cor-cinza-escuro-2);
}


.layer-drag-handle {
    cursor: grab;
    margin-right: 0.6rem; 
    color: var(--cor-texto-secundario);
    opacity: 0.7;
    transition: opacity 0.2s;
    font-size: 0.9em; 
}
.layer-drag-handle:hover {
    opacity: 1;
}
/* .layer-item.dragging .layer-drag-handle movido para .layer-item:active para melhor resposta */
.layer-item:active .layer-drag-handle, /* Para feedback imediato ao clicar para arrastar */
.layer-item.dragging .layer-drag-handle { /* Mantém durante o arrasto */
    cursor: grabbing;
}

.layer-item.layer-drop-target-above {
    border-top: 2px dashed var(--cor-verde-neon) !important; /* !important para sobrepor hover */
    margin-top: -2px; /* Para compensar a borda */
}
.layer-item.layer-drop-target-below {
    border-bottom: 2px dashed var(--cor-verde-neon) !important; /* !important para sobrepor hover */
    margin-bottom: -2px; /* Para compensar a borda */
}


.layer-type-icon {
    margin-right: 0.6rem; 
    color: var(--cor-ciano-neon);
    width: 16px; 
    text-align: center;
    font-size: 0.9em; 
}

.layer-name {
    flex-grow: 1;
    font-size: 0.85em; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* Para que o drag handle e botões recebam eventos mesmo sobre o nome */
}
.layer-item .layer-name[contenteditable="true"] {
    outline: 2px dashed var(--cor-ciano-neon);
    background-color: rgba(255, 255, 255, 0.05);
    pointer-events: all; /* Permitir edição */
}

.layer-item.selected-layer .layer-name {
    font-weight: 600;
}

.layer-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem; 
    margin-left: 0.7rem; 
}

.layer-action-btn {
    background: none;
    border: none;
    color: var(--cor-texto-secundario);
    cursor: pointer;
    padding: 0.25rem 0.35rem; 
    font-size: 0.9em; 
    border-radius: 3px; 
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.layer-action-btn:hover {
    color: var(--cor-texto-padrao);
    background-color: var(--cor-cinza-escuro-1);
}
.layer-action-btn i { margin: 0; pointer-events: none; /* Para que o botão receba o clique */}

.layer-action-btn.toggle-visibility-btn .fa-eye-slash {
    color: var(--cor-rosa-neon);
}
.layer-item.selected-layer .layer-action-btn.toggle-visibility-btn .fa-eye-slash {
    color: var(--cor-cinza-escuro-1); /* Ajuste para contraste com fundo selecionado */
}
.layer-item .layer-hidden .toggle-visibility-btn .fa-eye { /* Se a camada estiver oculta, o ícone é de olho */
    color: var(--cor-texto-secundario); /* Ou uma cor específica para "visível" */
}
.layer-item .layer-hidden .toggle-visibility-btn .fa-eye-slash { /* Este não deve aparecer se layer-hidden */
    /* display: none; */
}


.layer-action-btn.delete-layer-btn:hover i {
    color: var(--cor-rosa-neon);
}
.layer-item.selected-layer .layer-action-btn.delete-layer-btn:hover i {
    color: var(--cor-cinza-escuro-1); /* Ajuste para contraste */
}

.layer-action-btn:disabled, .layer-action-btn[disabled] {
    color: var(--cor-texto-desabilitado) !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
}
.layer-action-btn:disabled i, .layer-action-btn[disabled] i {
    color: var(--cor-texto-desabilitado) !important;
}

.layer-item.dragging {
    opacity: 0.6;
    background-color: var(--cor-cinza-escuro-1) !important; /* !important para sobrepor outros estados */
    border: 1px dashed var(--cor-verde-neon) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transform: scale(1.02); /* Leve aumento para destacar */
}

/* Estilo para o placeholder não é mais necessário se usarmos as classes -above/-below */
/* .layer-drag-placeholder { ... } */

/* Camada Base (Imagem Principal) */
.layer-item[data-layer-id="main"], .layer-item.base-layer /* Adicionada classe base-layer como alternativa */
{
    background-color: var(--cor-cinza-escuro-1); /* Um pouco diferente para destacar */
    border-left: 3px solid var(--cor-ciano-neon);
}
.layer-item[data-layer-id="main"] .layer-drag-handle,
.layer-item.base-layer .layer-drag-handle
{
    visibility: hidden; /* Não arrastável */
    cursor: default;
}
.layer-item[data-layer-id="main"].selected-layer,
.layer-item.base-layer.selected-layer {
    background-color: var(--cor-roxo-claro) !important; /* Garante que a seleção sobreponha o estilo base */
    border-left: 3px solid var(--cor-verde-neon) !important;
}


/* Estilo geral para hover e focus nos itens da lista de camadas, precisa ser menos específico que .selected-layer */
.layer-item:focus-within:not(.selected-layer) { /* Usar focus-within para quando um botão dentro tem foco */
    /* background-color: var(--cor-fundo-hover-item-camada); */ /* Já coberto pelo hover normal */
    box-shadow: 0 0 0 1.5px var(--cor-ciano-neon) inset; /* Outline sutil no foco */
}

/* Botão duplicar - exemplo de como seria se existisse no CSS */
.layer-action-btn.duplicate-layer-btn:hover i {
    color: var(--cor-verde-neon);
}
.layer-item.selected-layer .layer-action-btn.duplicate-layer-btn:hover i {
    color: var(--cor-cinza-escuro-1);
}

/* Ajustes para botões dentro de .action-buttons-footer para evitar conflito com .layer-item:hover */
.action-buttons-footer button:hover, .action-buttons-footer button:focus {
    background-color: var(--cor-roxo-claro); /* Restaura o hover original do botão */
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-roxo-claro);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(189, 147, 249, 0.25); /* Restaura a sombra original do botão */
}
.action-buttons-footer button:hover i, .action-buttons-footer button:focus i {
    color: var(--cor-cinza-escuro-2); /* Restaura a cor do ícone original do botão */
}
/* --- FIM DOS ESTILOS PARA O PAINEL DE CAMADAS --- */


/* --- Animações Simples --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(80, 250, 123, 0.5); } 70% { transform: scale(1.02); box-shadow: 0 0 5px 10px rgba(80, 250, 123, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(80, 250, 123, 0); } }


/* --- ESTILOS DA PÁGINA DE TUTORIAL (tutorial.html) --- */
.tutorial-header {
    background: linear-gradient(135deg, var(--cor-fundo-principal-inicio), var(--cor-fundo-principal-fim));
    color: var(--cor-texto-cabecalho);
    padding: 3.5rem 1.5rem; 
    text-align: center;
    border-bottom: 3px solid var(--cor-roxo-claro);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.tutorial-header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem; 
    margin-bottom: 0.7rem;
    font-weight: 700;
    text-shadow: 0 0 8px var(--cor-rosa-neon);
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.tutorial-header h1 i {
    color: var(--cor-rosa-neon);
    margin-right: 0.25rem; font-size: 0.85em;
}
.tutorial-header p {
    font-size: 1.0rem; 
    max-width: 750px; margin: 0 auto; font-weight: 300;
    color: var(--cor-texto-secundario); margin-bottom: 0;
}

.tutorial-main {
    max-width: 850px; 
    margin: 1.8rem auto; 
    padding: 0 0.8rem;
    flex-grow: 1;
}

.tutorial-section {
    background-color: var(--cor-container-fundo);
    padding: 2rem 2.5rem; 
    margin-bottom: 2rem; 
    border-radius: var(--border-radius-padrao);
    border: 1px solid var(--cor-container-borda);
    box-shadow: var(--sombra-padrao);
}

.tutorial-section h2, .tutorial-section h3 {
    color: var(--cor-roxo-claro);
    margin-bottom: 1rem; 
    line-height: 1.35; 
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem; 
}

.tutorial-section h2 {
    font-size: 1.5em; 
    margin-top: 2.5rem; 
    border-bottom: 1px solid var(--cor-cinza-escuro-1);
    padding-bottom: 0.6rem; 
}
.tutorial-section h2:first-of-type { margin-top: 0; }

#indice-titulo {
    border-bottom: none; margin-bottom: 0.8rem; margin-top: 0;
    font-size: 1.3em; text-align: center; color: var(--cor-ciano-neon); 
}
#indice-titulo i { color: var(--cor-ciano-neon); }

.tutorial-section h3 {
    font-size: 1.25em; 
    margin-top: 1.8rem; 
    color: var(--cor-verde-neon);
    border-bottom: none; padding-bottom: 0;
}
.tutorial-section h3 i { color: var(--cor-verde-neon); }

.tutorial-section p i, .tutorial-section li i, .tutorial-section a i {
    margin-right: 0.25rem; 
    color: var(--cor-amarelo-claro);
    font-size: 0.9em; 
}

.tutorial-section ul, .tutorial-section ol {
    margin-left: 1.3rem; 
    margin-bottom: 1rem; 
    padding-left: 0.8rem; 
}
.tutorial-section ul ul, .tutorial-section ol ol {
    margin-bottom: 0.4rem; 
    margin-top: 0.4rem; 
}
.tutorial-section li {
    margin-bottom: 0.5rem; 
    color: var(--cor-texto-padrao);
}
.tutorial-section li::marker {
    color: var(--cor-roxo-claro);
}

.tutorial-section a {
    color: var(--cor-ciano-neon);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transicao-rapida);
    border-bottom: 1px dashed var(--cor-ciano-neon);
}
.tutorial-section a:hover {
    color: var(--cor-verde-neon);
    border-bottom-color: var(--cor-verde-neon);
}
.tutorial-section a i { color: var(--cor-ciano-neon); transition: var(--transicao-rapida); }
.tutorial-section a:hover i { color: var(--cor-verde-neon); }

.tutorial-section p {
    margin-bottom: 1rem; 
    color: var(--cor-texto-padrao);
}
.tutorial-section p strong {
    color: var(--cor-amarelo-claro);
    font-weight: 600;
}

.tutorial-section hr {
    border: none;
    border-top: 1px solid var(--cor-cinza-escuro-1);
    margin: 2rem 0; 
}
hr.toc-separator {
    border-top: 1px dashed var(--cor-ciano-neon);
    margin: 1.3rem 0; 
}

.back-to-top {
    text-align: right;
    margin-top: 1.3rem; 
    margin-bottom: 0.4rem; 
    font-size: 0.85em; 
}
.back-to-top a {
    color: var(--cor-texto-secundario);
    border-bottom: 1px dashed var(--cor-texto-secundario);
}
.back-to-top a:hover {
    color: var(--cor-ciano-neon);
    border-bottom-color: var(--cor-ciano-neon);
}
.back-to-top a i { color: var(--cor-texto-secundario); }
.back-to-top a:hover i { color: var(--cor-ciano-neon); }


.warning {
    background-color: rgba(255, 184, 108, 0.1);
    border-left: 3px solid var(--cor-laranja-neon); 
    padding: 0.8rem 1.2rem; 
    margin: 1.3rem 0; 
    border-radius: 0 var(--border-radius-padrao) var(--border-radius-padrao) 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem; 
}
.warning i.fas.fa-exclamation-triangle {
    color: var(--cor-laranja-neon);
    font-size: 1.3em; 
    margin-top: 0.15em; 
}
.warning div { flex: 1; }
.warning strong {
    color: var(--cor-laranja-neon);
    display: block;
    margin-bottom: 0.25rem; 
}
.warning p { margin-bottom: 0; }

/* Rodapé Informativo do Site (Compartilhado) */
.site-footer {
    background-color: var(--cor-cinza-escuro-2);
    color: var(--cor-texto-secundario);
    text-align: center;
    padding: 1.2rem 0.8rem; 
    border-top: 2px solid var(--cor-roxo-claro);
    width: 100%;
    font-size: 0.85em; 
    margin-top: auto;
    flex-shrink: 0;
    height: 55px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footer-links {
    margin-bottom: 0.4rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem; 
}
.footer-links a {
    color: var(--cor-texto-secundario);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--cor-ciano-neon);
}
.footer-links span {
    color: var(--cor-cinza-escuro-1);
    user-select: none;
}
.copyright {
    margin: 0;
    font-size: 0.85em; 
}
.copyright #current-year { font-weight: bold; }

/* Estilos para os novos botões de zoom no rodapé */
.action-buttons-footer .action-buttons-container button#zoomDisplayFooterBtn[disabled] {
    background-color: var(--cor-fundo-desabilitado); 
    color: var(--cor-texto-padrao); 
    border-color: var(--cor-cinza-escuro-1);
    opacity: 0.9; 
    cursor: default;
    min-width: 60px; 
    padding: 0.5rem 0.4rem; 
}
.action-buttons-footer .action-buttons-container button#zoomOutFooterBtn i,
.action-buttons-footer .action-buttons-container button#zoomInFooterBtn i,
.action-buttons-footer .action-buttons-container button#fitToScreenBtn i {
    color: var(--cor-ciano-neon);
}
.action-buttons-footer .action-buttons-container button#zoomOutFooterBtn:hover i,
.action-buttons-footer .action-buttons-container button#zoomInFooterBtn:hover i,
.action-buttons-footer .action-buttons-container button#fitToScreenBtn:hover i {
    color: var(--cor-cinza-escuro-2);
}

/* --- Responsividade (Ajustes básicos para telas menores) --- */
@media (max-width: 900px) {
    .editor-container {
        flex-direction: column;
        height: auto;
    }
    .controls-panel {
        width: 100%;
        height: auto;
        max-height: 45vh; 
        border-right: none;
        border-bottom: 2px solid var(--cor-roxo-claro);
        overflow-y: auto;
    }
    .main-content-area {
        height: auto;
        min-height: 350px; 
        flex-grow: 1;
    }
    .canvas-area {
        min-height: calc(100vh - 55px - 45vh - 58px); /* Rodapé site - Painel Controles - Rodapé Ações */
    }
    .action-buttons-footer .action-buttons-container {
        gap: 0.4rem; 
    }
    .action-buttons-footer .action-buttons-container button {
        padding: 0.5rem 0.7rem; 
        font-size: 0.85em; 
    }

    .tutorial-main { padding: 0 0.4rem; } 
    .tutorial-section { padding: 1.3rem; } 
    .tutorial-header h1 { font-size: 1.8rem; } 
    .tutorial-header p { font-size: 0.95rem; } 
    .tutorial-section h2 { font-size: 1.3em; margin-top: 1.8rem; } 
    .tutorial-section h3 { font-size: 1.15em; margin-top: 1.3rem; } 

    .site-footer { padding: 0.8rem; font-size: 0.8em; height: auto; } 
    .footer-links { gap: 0.2rem 0.4rem; } 

    .layer-list-container {
        max-height: 180px; 
    }
}

@media (max-width: 480px) {
    html { font-size: 14px; } 

    .controls-panel {
        padding: 0.8rem; 
        gap: 0.6rem; 
        max-height: 40vh; 
    }
    .controls-panel h1 { font-size: 1.3em; margin-bottom: 0.8rem; } 
    .control-section { padding: 0.7rem 0.9rem; } 
    .control-section h2 { font-size: 0.95em; margin-bottom: 0.7rem; } 
    .control-section h3 { font-size: 0.9em; } 

    button, .button-like-label {
        padding: 0.45rem 0.7rem; 
        font-size: 0.8em; 
        gap: 0.3rem; 
    }
    .main-tool-buttons { gap: 0.5rem; } 

    .action-buttons-footer { padding: 0.5rem 1rem; } 
    .action-buttons-footer .action-buttons-container button {
        padding: 0.4rem 0.6rem; 
        font-size: 0.8em; 
        gap: 0.3rem; 
    }
    .action-buttons-footer .action-buttons-container button i {
        font-size: 0.85em; 
    }
    
    button#zoomDisplayFooterBtn[disabled] { /* Removido !important para consistência */
        min-width: 50px; 
        padding: 0.4rem 0.2rem; 
    }


    .layer-item {
        padding: 0.4rem 0.5rem; 
    }
    .layer-name {
        font-size: 0.8em; 
    }
    .layer-action-btn {
        font-size: 0.85em; 
        padding: 0.2rem 0.25rem; 
    }
    .layer-list-container {
        max-height: 130px; 
    }

    .modal { width: 95%; padding: 1.2rem; } 
    .modal-header h3 { font-size: 1.1em; }
    .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); gap: 0.5rem; }
    .emoji-grid button { font-size: 1.5em; }

    .site-footer { font-size: 0.75em; }
}


/* --- Toast Notifications --- */
.toast {
    position: fixed;
    bottom: 2rem; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--cor-cinza-escuro-2); 
    color: var(--cor-texto-padrao);
    padding: 0.8rem 1.2rem;
    border-radius: var(--border-radius-padrao);
    border: 1px solid var(--cor-cinza-escuro-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, bottom 0.3s ease;
    z-index: 9999;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.toast.show {
    opacity: 1;
    bottom: 3rem; 
}
.toast.toast-info { /* Adicionada especificidade */
    background-color: var(--cor-ciano-neon);
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-ciano-neon);
}
.toast.toast-success { /* Adicionada especificidade */
    background-color: var(--cor-verde-neon);
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-verde-neon);
}
.toast.toast-error { /* Adicionada especificidade */
    background-color: var(--cor-rosa-neon);
    color: var(--cor-cinza-escuro-2);
    border-color: var(--cor-rosa-neon);
}

/* Foco para botões genéricos e labels tipo botão */
button:focus, .button-like-label:focus {
    outline: none; 
    box-shadow: 0 0 0 2px var(--cor-ciano-neon), 0 3px 6px rgba(189, 147, 249, 0.25); 
}
button:focus:not(:hover) { 
    transform: none;
}


/* ============================= */
/* LOADING OVERLAY               */
/* ============================= */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 42, 54, 0.95);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.loading-content {
    text-align: center;
    background: var(--cor-cinza-escuro-2);
    padding: 3rem 2.5rem;
    border-radius: 20px;
    border: 2px solid var(--cor-ciano-neon);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
                0 0 30px rgba(139, 233, 253, 0.3);
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
}

.loading-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cor-ciano-neon), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.loading-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    border: 4px solid var(--cor-cinza-escuro-1);
    border-top: 4px solid var(--cor-ciano-neon);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}

.loading-spinner::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid var(--cor-rosa-neon);
    border-radius: 50%;
    animation: spin 1.5s linear infinite reverse;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content h3 {
    color: var(--cor-ciano-neon);
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.loading-content p {
    color: var(--cor-texto-claro);
    margin: 0 0 1.5rem 0;
    opacity: 0.8;
    font-size: 0.95rem;
}

.loading-progress {
    width: 100%;
    height: 6px;
    background: var(--cor-cinza-escuro-1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cor-ciano-neon), var(--cor-rosa-neon));
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

.loading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============================= */
/* CUSTOM MODAL SYSTEM           */
/* ============================= */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 42, 54, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.custom-modal {
    background: var(--cor-cinza-escuro-2);
    border: 2px solid var(--cor-ciano-neon);
    border-radius: 15px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(139, 233, 253, 0.2);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.custom-modal-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.custom-modal-icon {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--cor-ciano-neon);
}

.custom-modal-icon.error {
    color: var(--cor-rosa-neon);
}

.custom-modal-icon.success {
    color: var(--cor-verde-neon);
}

.custom-modal-icon.warning {
    color: #ffb86c;
}

.custom-modal-title {
    color: var(--cor-texto-claro);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.custom-modal-message {
    color: var(--cor-texto-claro);
    margin: 1rem 0 2rem 0;
    line-height: 1.5;
    opacity: 0.9;
}

.custom-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.custom-modal-btn {
    padding: 0.7rem 1.5rem;
    border: 2px solid;
    border-radius: 8px;
    background: transparent;
    color: var(--cor-texto-claro);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 100px;
}

.custom-modal-btn.primary {
    border-color: var(--cor-ciano-neon);
    color: var(--cor-ciano-neon);
}

.custom-modal-btn.primary:hover {
    background: var(--cor-ciano-neon);
    color: var(--cor-cinza-escuro-2);
}

.custom-modal-btn.secondary {
    border-color: var(--cor-cinza-escuro-1);
    color: var(--cor-texto-claro);
}

.custom-modal-btn.secondary:hover {
    background: var(--cor-cinza-escuro-1);
}

.custom-modal-btn.danger {
    border-color: var(--cor-rosa-neon);
    color: var(--cor-rosa-neon);
}

.custom-modal-btn.danger:hover {
    background: var(--cor-rosa-neon);
    color: var(--cor-cinza-escuro-2);
}
// ============================================
// SCRIPT PARA PADRONIZAR BOTÃO DOWNLOAD
// ============================================

console.log("[DOWNLOAD BTN] 🎨 Iniciando padronização do botão Download...");

// Função para padronizar o botão de download
function standardizeDownloadButton() {
    const downloadBtn = document.getElementById('downloadBtn');
    
    if (!downloadBtn) {
        console.warn("[DOWNLOAD BTN] Botão #downloadBtn não encontrado");
        return;
    }
    
    // Define o conteúdo exato do botão
    downloadBtn.innerHTML = '<i class="fas fa-save"></i> Download';
    
    // Remove classes conflitantes
    downloadBtn.className = '';
    
    // Adiciona ID para garantir especificidade CSS
    downloadBtn.id = 'downloadBtn';
    
    // Define atributos importantes
    downloadBtn.setAttribute('type', 'button');
    downloadBtn.setAttribute('title', 'Baixar imagem editada');
    
    // Log de confirmação
    console.log("[DOWNLOAD BTN] ✅ Botão padronizado:", {
        text: downloadBtn.textContent.trim(),
        id: downloadBtn.id,
        className: downloadBtn.className
    });
}

// Função para garantir que os estilos sejam aplicados
function ensureDownloadButtonStyles() {
    // Cria uma folha de estilo específica se necessário
    const existingStyle = document.getElementById('download-btn-styles');
    if (existingStyle) {
        return; // Já existe
    }
    
    const style = document.createElement('style');
    style.id = 'download-btn-styles';
    style.textContent = `
        /* Força estilos do botão Download */
        #downloadBtn {
            background-color: var(--cor-cinza-escuro-1) !important;
            color: var(--cor-texto-padrao) !important;
            padding: 0.5rem 0.8rem !important;
            border: 1px solid var(--cor-roxo-claro) !important;
            border-radius: var(--border-radius-padrao) !important;
            cursor: pointer !important;
            font-size: 0.85em !important;
            font-weight: 500 !important;
            margin: 0.2rem 0.05rem !important;
            transition: var(--transicao-rapida) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.4rem !important;
            width: 100% !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
        }
        
        #downloadBtn i {
            color: var(--cor-verde-neon) !important;
            font-size: 0.9em !important;
        }
        
        #downloadBtn:hover {
            background-color: var(--cor-roxo-claro) !important;
            color: var(--cor-cinza-escuro-2) !important;
            border-color: var(--cor-roxo-claro) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 3px 6px rgba(189, 147, 249, 0.25) !important;
        }
        
        #downloadBtn:hover i {
            color: var(--cor-cinza-escuro-2) !important;
        }
        
        #downloadBtn:active {
            transform: scale(0.97) translateY(0) !important;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
        }
    `;
    
    document.head.appendChild(style);
    console.log("[DOWNLOAD BTN] ✅ Estilos CSS aplicados");
}

// Função para verificar se existe botão "Salvar Projeto JSON" e sincronizar estilos
function syncWithProjectButtons() {
    const projectButtons = document.querySelectorAll('[id*="project"], [id*="save"], [id*="load"]');
    const downloadBtn = document.getElementById('downloadBtn');
    
    if (!downloadBtn) return;
    
    console.log("[DOWNLOAD BTN] 🔄 Sincronizando com botões de projeto:", projectButtons.length);
    
    // Se encontrar botões de projeto, copia os estilos computados
    if (projectButtons.length > 0) {
        const referenceBtn = Array.from(projectButtons).find(btn => 
            btn.id.includes('save') || btn.id.includes('project')
        );
        
        if (referenceBtn) {
            const refStyles = window.getComputedStyle(referenceBtn);
            console.log("[DOWNLOAD BTN] 📋 Referência encontrada:", referenceBtn.id);
            
            // Lista de propriedades para sincronizar
            const propertiesToSync = [
                'backgroundColor',
                'color',
                'padding',
                'border',
                'borderRadius',
                'fontSize',
                'fontWeight',
                'boxShadow'
            ];
            
            propertiesToSync.forEach(prop => {
                downloadBtn.style[prop] = refStyles[prop];
            });
            
            console.log("[DOWNLOAD BTN] ✅ Estilos sincronizados com", referenceBtn.id);
        }
    }
}

// Função de verificação periódica
function verifyDownloadButton() {
    const downloadBtn = document.getElementById('downloadBtn');
    
    if (!downloadBtn) {
        console.warn("[DOWNLOAD BTN] ⚠️ Botão não encontrado durante verificação");
        return false;
    }
    
    const expectedText = 'Download';
    const actualText = downloadBtn.textContent.trim();
    
    if (actualText !== expectedText) {
        console.log("[DOWNLOAD BTN] 🔧 Corrigindo texto:", actualText, '→', expectedText);
        downloadBtn.innerHTML = '<i class="fas fa-save"></i> ' + expectedText;
    }
    
    return true;
}

// Função principal de inicialização
function initializeDownloadButton() {
    console.log("[DOWNLOAD BTN] 🚀 Inicializando sistema de padronização...");
    
    try {
        // 1. Padroniza o botão
        standardizeDownloadButton();
        
        // 2. Aplica estilos
        ensureDownloadButtonStyles();
        
        // 3. Sincroniza com outros botões
        setTimeout(() => {
            syncWithProjectButtons();
        }, 500);
        
        // 4. Verificação periódica
        setInterval(verifyDownloadButton, 5000);
        
        console.log("[DOWNLOAD BTN] ✅ Sistema inicializado com sucesso!");
        
    } catch (error) {
        console.error("[DOWNLOAD BTN] ❌ Erro na inicialização:", error);
    }
}

// Observer para detectar mudanças no DOM
function setupDownloadButtonObserver() {
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                const downloadBtn = document.getElementById('downloadBtn');
                if (downloadBtn && downloadBtn.textContent.trim() !== 'Download') {
                    console.log("[DOWNLOAD BTN] 🔄 Mutação detectada, repadronizando...");
                    setTimeout(standardizeDownloadButton, 100);
                }
            }
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        characterData: true
    });
    
    console.log("[DOWNLOAD BTN] 👁️ Observer ativo");
}

// Comando global para desenvolvedores
window.fixDownloadButton = function() {
    console.log("[DEV] 🔧 Comando fixDownloadButton() executado");
    initializeDownloadButton();
};

// Inicialização automática
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(initializeDownloadButton, 1000);
    setupDownloadButtonObserver();
});

// Fallback para carregamento tardio
setTimeout(() => {
    if (document.getElementById('downloadBtn')) {
        initializeDownloadButton();
    }
}, 2000);

console.log("🎨 [DOWNLOAD BTN] Sistema de padronização carregado!");
console.log("🎨 [DOWNLOAD BTN] Comando: fixDownloadButton()");