:root{
--gio-bg:#fff;
--gio-preview-bg:#f8f9fa;
--gio-border:#e9ecef;
--gio-accent:#00a651;
--gio-accent-2:#007e3a;
--gio-shadow:0 4px 20px rgba(0,0,0,0.1);
--gio-shadow-soft:0 2px 10px rgba(0,0,0,0.05);
--gio-output-bg-start:rgba(40,167,69,0.05);
--gio-output-bg-end:rgba(0,166,81,0.05);
--gio-output-border:rgba(40,167,69,0.2);
--gio-success:#28a745;
--gio-success-2:#20c997;
--gio-contrast-text:#fff;
--gio-muted:#6c757d;
--gio-secondary-1:#6c757d;
--gio-secondary-2:#495057;
--gio-primary-blue:#0072bc;
--gio-primary-blue-dark:#005a93;
}
/* Tema escuro - usa variáveis globais quando possível para manter consistência com o restante do site */
[data-theme="dark"]{
--gio-bg:var(--color-bg-card,#2d2d2d);
--gio-preview-bg:var(--off-white,#1a1a1a);
--gio-border:var(--color-border,#495057);
--gio-accent:var(--primary-green,#00a651);
--gio-accent-2:var(--dark-green,#007e3a);
--gio-shadow:0 6px 24px rgba(0,0,0,0.5);
--gio-shadow-soft:0 2px 8px rgba(0,0,0,0.35);
--gio-output-bg-start:rgba(0,128,60,0.06);
--gio-output-bg-end:rgba(0,90,45,0.06);
--gio-output-border:rgba(40,167,69,0.12);
--gio-success:var(--success,#28a745);
--gio-success-2:var(--light-green,#20c997);
--gio-muted:var(--medium-gray,#adb5bd);
--gio-secondary-1:var(--medium-gray,#adb5bd);
--gio-secondary-2:var(--light-gray,#495057);
--gio-primary-blue:var(--primary-blue,#0072bc);
--gio-primary-blue-dark:var(--dark-blue,#005a93);
--gio-contrast-text:#fff;
}
.gerador-ico-container{background:var(--gio-bg);border-radius:12px;box-shadow:var(--gio-shadow);padding:2rem;overflow:hidden;position:relative;max-width:700px;margin:0 auto;}
.gerador-ico-preview-section{padding:1.5rem;background:var(--gio-preview-bg);border-radius:12px;border:1px solid var(--gio-border);transition:all 0.3s ease;opacity:0;transform:translateY(10px);}
.gerador-ico-preview-section.show{opacity:1;transform:translateY(0);}
.preview-header{display:flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--gio-accent);margin-bottom:1rem;font-size:1.1rem;}
.preview-container{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1.5rem;}
.gerador-ico-preview{width:120px;height:120px;border-radius:12px;border:2px solid var(--gio-border);object-fit:cover;flex-shrink:0;background:var(--gio-bg);padding:0.5rem;box-shadow:var(--gio-shadow-soft);}
.preview-info{flex:1;display:flex;flex-direction:column;gap:0.75rem;}
.info-item{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid var(--gio-border);}
.info-item:last-child{border-bottom:none;}
.info-label{font-weight:600;color:var(--dark-gray,#343a40);font-size:0.9rem;}
.info-value{font-weight:500;color:var(--gio-muted);font-size:0.9rem;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-actions{display:flex;gap:1rem;align-items:center;justify-content:center;}
.btn-generate-ico{background:linear-gradient(135deg,var(--gio-accent),var(--gio-accent-2));color:#fff;border:none;border-radius:10px;padding:0.875rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem;flex:1;justify-content:center;box-shadow:0 4px 15px rgba(0,166,81,0.2);}
.btn-generate-ico:hover{background:linear-gradient(135deg,var(--gio-accent-2),var(--gio-accent));transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,166,81,0.3);}
.btn-generate-ico:active{transform:translateY(0);box-shadow:0 2px 10px rgba(0,166,81,0.2);}
.btn-new-file{background:linear-gradient(135deg,var(--gio-secondary-1),var(--gio-secondary-2));color:#fff;border:none;border-radius:10px;padding:0.875rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem;box-shadow:0 4px 15px rgba(108,117,125,0.2);}
.btn-new-file:hover{background:linear-gradient(135deg,var(--gio-secondary-2),var(--gio-secondary-1));transform:translateY(-2px);box-shadow:0 6px 20px rgba(108,117,125,0.3);}
.btn-new-file:active{transform:translateY(0);box-shadow:0 2px 10px rgba(108,117,125,0.2);}
.gerador-ico-output{margin-top:1.5rem;padding:2rem;background:linear-gradient(135deg,var(--gio-output-bg-start),var(--gio-output-bg-end));border-radius:12px;border:1px solid var(--gio-output-border);text-align:center;opacity:0;transform:translateY(20px);transition:all 0.3s ease;}
.gerador-ico-output.show{opacity:1;transform:translateY(0);}
.output-header{display:flex;align-items:center;justify-content:center;gap:0.75rem;font-weight:700;color:var(--gio-success);margin-bottom:1.5rem;font-size:1.2rem;}
.output-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.ico-preview{display:flex;align-items:center;gap:1.5rem;padding:1rem;background:var(--gio-bg);border-radius:10px;border:1px solid var(--gio-border);box-shadow:var(--gio-shadow-soft);}
.ico-preview img{width:64px;height:64px;border-radius:8px;border:2px solid var(--gio-success);background:var(--gio-bg);}
.ico-info{display:flex;flex-direction:column;gap:0.5rem;text-align:left;}
.ico-detail{display:flex;gap:1rem;font-size:0.9rem;}
.ico-detail span:first-child{font-weight:600;color:var(--dark-gray,#343a40);min-width:60px;}
.ico-detail span:last-child{color:var(--gio-success);font-weight:500;}
.btn-download-ico{background:linear-gradient(135deg,var(--gio-success),var(--gio-success-2));color:#fff;border:none;border-radius:10px;padding:0.875rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;box-shadow:0 4px 15px rgba(40,167,69,0.2);}
.btn-download-ico:hover{background:linear-gradient(135deg,var(--gio-success-2),var(--gio-success));color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(40,167,69,0.3);}
/* Garantir contraste do texto do botão em tema escuro (mais específico que [data-theme] a) */
[data-theme="dark"] .btn-download-ico,[data-theme="dark"] .btn-download-ico:hover,[data-theme="dark"] .btn-download-ico:focus{color:var(--gio-contrast-text);}
.btn-new-conversion{background:linear-gradient(135deg,var(--gio-primary-blue),var(--gio-primary-blue-dark));color:#fff;border:none;border-radius:10px;padding:0.75rem 1.5rem;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.5rem;}
.btn-new-conversion:hover{background:linear-gradient(135deg,var(--gio-primary-blue-dark),var(--gio-primary-blue));transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,114,188,0.3);}
.btn-generate-ico.loading{background:var(--gio-secondary-1);cursor:not-allowed;pointer-events:none;}
.btn-generate-ico.loading svg{animation:spin 1s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (max-width:768px){
.gerador-ico-container{padding:1.5rem;margin:0 1rem;}
.preview-container{flex-direction:column;align-items:center;text-align:center;gap:1rem;}
.gerador-ico-preview{width:100px;height:100px;}
.preview-info{width:100%;max-width:300px;}
.info-item{flex-direction:column;align-items:flex-start;gap:0.25rem;text-align:left;}
.info-value{max-width:100%;text-align:left;}
.ico-preview{flex-direction:column;gap:1rem;text-align:center;}
.output-content{gap:1rem;}
.btn-download-ico,.btn-new-conversion{width:100%;justify-content:center;}
.preview-actions{flex-direction:column;gap:0.75rem;}
.btn-generate-ico,.btn-new-file{width:100%;justify-content:center;}
}
@media (max-width:480px){
.gerador-ico-container{padding:1rem;margin:0 0.5rem;}
.gerador-ico-preview-section{padding:1rem;}
.gerador-ico-output{padding:1.5rem;}
.btn-generate-ico{padding:0.75rem 1.5rem;font-size:0.95rem;}
.output-header{font-size:1.1rem;}
.ico-preview img{width:56px;height:56px;}
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.gerador-ico-preview-section.show{animation:fadeInUp 0.4s ease-out;}
.gerador-ico-output.show{animation:fadeInUp 0.4s ease-out 0.1s both;}