/* VERSÃO DO ARQUIVO: 1.1.16 - Move CTA contextual do plano Premium para o CSS global compartilhado */
:root{
--svgpng-bg-card:var(--color-bg-card);
--svgpng-bg-input:var(--white);
--svgpng-border:var(--color-border);
--svgpng-text:var(--color-text);
--svgpng-text-secondary:var(--color-text-secondary);
--svgpng-text-muted:#999;
--svgpng-shadow:0 4px 12px rgba(0,0,0,0.06);
--svgpng-shadow-hover:0 8px 25px rgba(0,0,0,0.1);
--svgpng-highlight:rgba(0,166,81,0.1);
--svgpng-preset-bg:var(--white);
--svgpng-preset-bg-hover:var(--off-white);
--svgpng-checker:rgba(0,0,0,0.08);
--svgpng-preview-bg:var(--off-white);
}
[data-theme="dark"]{
--svgpng-bg-card:#1e1e1e;
--svgpng-bg-input:#2a2a2a;
--svgpng-border:#444;
--svgpng-text:#f0f0f0;
--svgpng-text-secondary:#aaa;
--svgpng-text-muted:#888;
--svgpng-shadow:0 4px 12px rgba(0,0,0,0.3);
--svgpng-shadow-hover:0 8px 25px rgba(0,0,0,0.4);
--svgpng-highlight:rgba(0,166,81,0.15);
--svgpng-preset-bg:#2a2a2a;
--svgpng-preset-bg-hover:#333;
--svgpng-checker:rgba(255,255,255,0.08);
--svgpng-preview-bg:#2a2a2a;
}
.svg-png-tool{display:grid;gap:var(--spacing-lg);}
.svg-png-tool *{box-sizing:border-box;}
.svg-png-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,0.8fr);gap:var(--spacing-lg);align-items:start;}
.svg-png-panel{display:grid;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--svgpng-bg-card);border:1px solid var(--svgpng-border);border-radius:var(--border-radius-lg);box-shadow:var(--svgpng-shadow);transition:all var(--transition-normal);position:relative;overflow:hidden;}
.svg-png-panel:hover{transform:translateY(-2px);box-shadow:var(--svgpng-shadow-hover);}
.svg-png-section{display:grid;gap:var(--spacing-md);}
.svg-png-section-title{margin:0;font-size:1.1rem;font-weight:600;line-height:1.4;color:var(--svgpng-text);display:flex;align-items:center;gap:var(--spacing-sm);}
.svg-png-help-text,.svg-png-limit-text{margin:0;font-size:0.85rem;line-height:1.5;color:var(--svgpng-text-secondary);}
.svg-png-meta{margin:0;font-size:0.9rem;line-height:1.5;color:var(--svgpng-text-secondary);}
.svg-png-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:flex-start;}
.svg-png-output-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);}
.svg-png-preset-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);}
.svg-png-preset-list button{padding:var(--spacing-sm) var(--spacing-md);border-radius:30px;border:1px solid var(--svgpng-border);background:var(--svgpng-preset-bg);color:var(--svgpng-text);font-size:0.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 4px rgba(0,0,0,0.05);}
.svg-png-preset-list button:hover{background:var(--svgpng-preset-bg-hover);border-color:var(--primary-green);color:var(--primary-green);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,166,81,0.15);}
.svg-png-preset-list button:active{transform:translateY(0);}
/* Mantem foco visivel nos controles customizados da ferramenta, sem depender apenas do estilo padrao do navegador. */
.svg-png-preset-list button:focus-visible,
.svg-png-actions .tool-btn:focus-visible,
.svg-png-output-actions .tool-btn:focus-visible{outline:3px solid var(--primary-green);outline-offset:2px;box-shadow:0 0 0 3px var(--svgpng-highlight);}
.svg-png-textarea{width:100%;min-height:320px;padding:14px;resize:vertical;font-family:Consolas,Monaco,'Courier New',monospace;font-size:0.95rem;line-height:1.5;background:var(--svgpng-bg-input);color:var(--svgpng-text);border:1px solid var(--svgpng-border);border-radius:var(--border-radius-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.svg-png-textarea:focus{outline:0;border-color:var(--primary-green);box-shadow:0 0 0 3px var(--svgpng-highlight);}
.svg-png-textarea::placeholder{color:var(--svgpng-text-muted);font-style:italic;}
.svg-png-field{display:grid;gap:var(--spacing-xs);}
.svg-png-field>span{font-size:0.9rem;font-weight:500;color:var(--svgpng-text);}
.svg-png-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.svg-png-field input[type='number']{width:100%;min-height:42px;padding:var(--spacing-sm) var(--spacing-md);background:var(--svgpng-bg-input);color:var(--svgpng-text);border:1px solid var(--svgpng-border);border-radius:var(--border-radius-sm);font-size:1rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.svg-png-field input[type='number']:focus{outline:0;border-color:var(--primary-green);box-shadow:0 0 0 3px var(--svgpng-highlight);}
.svg-png-field input[type='number']:disabled{opacity:0.6;cursor:not-allowed;}
.svg-png-field input[type='number']::placeholder{color:var(--svgpng-text-muted);font-style:italic;}
.svg-png-field input[type='color']{width:80px;min-height:48px;padding:4px;border:1px solid var(--svgpng-border);border-radius:var(--border-radius-md);cursor:pointer;background:var(--svgpng-bg-input);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.svg-png-field input[type='color']:focus{outline:0;border-color:var(--primary-green);box-shadow:0 0 0 3px var(--svgpng-highlight);}
.svg-png-field input[type='color']:disabled{opacity:0.6;cursor:not-allowed;filter:grayscale(100%);}
.svg-png-choice-list{display:grid;gap:var(--spacing-xs);}
.svg-png-choice{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;transition:background var(--transition-fast);}
.svg-png-choice:hover{background:var(--svgpng-highlight);}
.svg-png-choice input[type='radio']{accent-color:var(--primary-green);width:18px;height:18px;cursor:pointer;flex-shrink:0;}
.svg-png-choice>span{font-size:0.95rem;color:var(--svgpng-text);}
.svg-png-inline-note{display:inline-flex;align-items:center;gap:var(--spacing-sm);font-size:0.9rem;color:var(--svgpng-text);cursor:pointer;}
.tool-upload-smallprint{font-size:0.78rem;color:var(--svgpng-text-muted);margin-top:var(--spacing-xs);text-align:center;line-height:1.4;display:flex;align-items:center;justify-content:center;gap:0.3rem;}
.svg-png-preview-shell{display:grid;gap:14px;}
.svg-png-preview-actions{display:flex;justify-content:center;gap:var(--spacing-sm);}
.svg-png-preview-frame{display:grid;place-items:center;min-height:320px;padding:var(--spacing-lg);border:1px solid var(--svgpng-border);border-radius:var(--border-radius-lg);overflow:hidden;background:var(--svgpng-preview-bg);}
.svg-png-preview-frame.has-preview{width:min(100%,var(--svgpng-preview-width,var(--svgpng-preview-max-width,520px)));aspect-ratio:var(--svgpng-preview-ratio,1 / 1);min-height:0;padding:0;place-items:stretch;justify-self:center;border-radius:0;}
.svg-png-preview-frame.is-transparent{background-image:linear-gradient(45deg,var(--svgpng-checker) 25%,transparent 25%),linear-gradient(-45deg,var(--svgpng-checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--svgpng-checker) 75%),linear-gradient(-45deg,transparent 75%,var(--svgpng-checker) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;background-color:transparent;}
.svg-png-preview-image{display:none;max-width:100%;max-height:480px;width:auto;height:auto;object-fit:contain;border-radius:var(--border-radius-md);}
.svg-png-preview-frame.has-preview .svg-png-preview-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;border-radius:0;}
.svg-png-preview-placeholder{margin:0;text-align:center;font-size:0.95rem;line-height:1.5;color:var(--svgpng-text-muted);}
.svg-png-hidden{display:none !important;}
@media (prefers-reduced-motion:no-preference){
.svg-png-panel{animation:svgpng-fadeInUp 0.4s ease-out both;}
.svg-png-grid>.svg-png-panel:nth-child(2){animation-delay:0.1s;}
.svg-png-tool>.svg-png-panel{animation-delay:0.15s;}
}
@keyframes svgpng-fadeInUp{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
.svg-png-panel,.svg-png-panel:hover,.svg-png-preset-list button:hover{animation:none;transform:none;}
}
@media (max-width:900px){
.svg-png-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
.svg-png-output-actions{flex-direction:column;}
.svg-png-output-actions .tool-btn{width:100%;justify-content:center;}
}
@media (max-width:640px){
.svg-png-field-grid{grid-template-columns:1fr;}
.svg-png-panel{padding:var(--spacing-md);border-radius:var(--border-radius-md);}
.svg-png-textarea{min-height:260px;}
.svg-png-preview-frame{min-height:260px;padding:14px;}
.svg-png-preview-frame.has-preview{padding:0;}
.svg-png-actions{justify-content:center;}
.svg-png-actions .tool-btn{width:100%;justify-content:center;}
.svg-png-preset-list{justify-content:center;}
}