:root{
--trocador-cor-card-bg:#fff;
--trocador-cor-card-border:#e9ecef;
--trocador-cor-card-shadow:0 4px 12px rgba(0,0,0,0.08);
--trocador-cor-card-shadow-hover:0 8px 25px rgba(0,0,0,0.12);
--trocador-cor-label-text:#343a40;
--trocador-cor-input-border:#e9ecef;
--trocador-cor-input-bg:#fff;
--trocador-cor-input-text:#343a40;
--trocador-cor-input-focus-bg:#fefffe;
--trocador-cor-range-bg:linear-gradient(to right,#e9ecef 0%,#00a651 100%);
--trocador-cor-range-thumb-bg:#00a651;
--trocador-cor-range-thumb-border:#fff;
--trocador-cor-range-thumb-shadow:0 2px 6px rgba(0,0,0,0.2);
--trocador-cor-range-thumb-hover-bg:#007e3a;
--trocador-cor-canvas-wrap-bg:#f8f9fa;
--trocador-cor-canvas-wrap-border:#e9ecef;
--trocador-cor-canvas-wrap-hover-border:#00a651;
--trocador-cor-canvas-wrap-hover-bg:#fefffe;
--trocador-cor-canvas-wrap-shadow:0 2px 8px rgba(0,0,0,0.1);
--trocador-cor-canvas-wrap-shadow-hover:0 4px 15px rgba(0,0,0,0.15);
--trocador-cor-help-text:#6c757d;
--trocador-cor-help-bg:#f8f9fa;
--trocador-cor-help-hover-bg:#fefffe;
--trocador-cor-help-border:#00a651;
--trocador-cor-header-text:#343a40;
--trocador-cor-header-border:#e9ecef;
--trocador-cor-range-value-shadow:0 2px 6px rgba(0,0,0,0.1);
--trocador-cor-campo-especial-border:#dee2e6;
--trocador-cor-campo-especial-label:#0072bc;
--trocador-cor-checker-dark:rgba(0,0,0,0.08);
--trocador-cor-checker-light:rgba(0,0,0,0.02);
}
[data-theme="dark"]{
--trocador-cor-card-bg:#2d2d2d;
--trocador-cor-card-border:#495057;
--trocador-cor-card-shadow:0 4px 12px rgba(0,0,0,0.3);
--trocador-cor-card-shadow-hover:0 8px 25px rgba(0,0,0,0.5);
--trocador-cor-label-text:#e9ecef;
--trocador-cor-input-border:#495057;
--trocador-cor-input-bg:#1a1a1a;
--trocador-cor-input-text:#e9ecef;
--trocador-cor-input-focus-bg:#2a2a2a;
--trocador-cor-range-bg:linear-gradient(to right,#495057 0%,#00a651 100%);
--trocador-cor-range-thumb-bg:#00a651;
--trocador-cor-range-thumb-border:#2d2d2d;
--trocador-cor-range-thumb-shadow:0 2px 6px rgba(0,0,0,0.5);
--trocador-cor-range-thumb-hover-bg:#4cd964;
--trocador-cor-canvas-wrap-bg:#1a1a1a;
--trocador-cor-canvas-wrap-border:#495057;
--trocador-cor-canvas-wrap-hover-border:#4cd964;
--trocador-cor-canvas-wrap-hover-bg:#2a2a2a;
--trocador-cor-canvas-wrap-shadow:0 2px 8px rgba(0,0,0,0.4);
--trocador-cor-canvas-wrap-shadow-hover:0 4px 15px rgba(0,0,0,0.6);
--trocador-cor-help-text:#adb5bd;
--trocador-cor-help-bg:#1a1a1a;
--trocador-cor-help-hover-bg:#2a2a2a;
--trocador-cor-help-border:#4cd964;
--trocador-cor-header-text:#e9ecef;
--trocador-cor-header-border:#495057;
--trocador-cor-range-value-shadow:0 2px 6px rgba(0,0,0,0.4);
--trocador-cor-campo-especial-border:#495057;
--trocador-cor-campo-especial-label:#5ac8fa;
--trocador-cor-checker-dark:rgba(255,255,255,0.12);
--trocador-cor-checker-light:rgba(255,255,255,0.04);
}
.trocador-cor-container{display:grid;grid-template-columns:1fr;gap:24px;max-width:1200px;margin:0 auto;animation:slideInUp 0.4s ease-out;}
@media (min-width:900px){
.trocador-cor-container{grid-template-columns:380px 1fr;align-items:stretch;}
.trocador-cor-card{min-height:600px;}
.trocador-cor-canvases{height:100%;align-content:start;}
.trocador-cor-canvas-wrap{flex:1;display:flex;flex-direction:column;}
.trocador-cor-canvas-wrap canvas{max-height:400px;object-fit:contain;flex:1;}
}
.trocador-cor-card{background:var(--trocador-cor-card-bg);border:1px solid var(--trocador-cor-card-border);border-radius:16px;padding:24px;box-shadow:var(--trocador-cor-card-shadow);transition:all 0.3s ease;position:relative;overflow:hidden;}
.trocador-cor-card:hover{transform:translateY(-2px);box-shadow:var(--trocador-cor-card-shadow-hover);}
.trocador-cor-card h3{margin:0 0 20px 0;font-size:1.4rem;font-weight:700;color:var(--trocador-cor-label-text);display:flex;align-items:center;gap:10px;}
.trocador-cor-campo{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
/* Margem superior específica para o campo de cor alvo */
.trocador-cor-campo:has(label[for="trocador-cor-color"]){margin-top:16px;}
.trocador-cor-campo label{font-weight:600;color:var(--trocador-cor-label-text);font-size:0.95rem;display:flex;align-items:center;gap:8px;}
.trocador-cor-campo input[type="color"]{width:60px;height:40px;border:2px solid var(--trocador-cor-input-border);border-radius:8px;cursor:pointer;transition:all 0.3s ease;padding:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.trocador-cor-campo input[type="color"]::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:6px;}
.trocador-cor-campo input[type="color"]::-webkit-color-swatch{border:none;border-radius:6px;}
.trocador-cor-campo input[type="color"]::-moz-color-swatch{border:none;border-radius:6px;}
.trocador-cor-campo input[type="text"]{flex:1;padding:12px 16px;border:2px solid var(--trocador-cor-input-border);border-radius:10px;font-size:1rem;background:var(--trocador-cor-input-bg);transition:all 0.3s ease;color:var(--trocador-cor-input-text);font-family:'Courier New',monospace;}
.trocador-cor-campo input[type="text"]:focus{outline:none;border-color:#00a651;box-shadow:0 0 0 3px rgba(0,166,81,0.1);background:var(--trocador-cor-input-focus-bg);}
.trocador-cor-campo input[type="range"]{flex:1;height:8px;border-radius:5px;background:var(--trocador-cor-range-bg);outline:none;transition:all 0.3s ease;}
.trocador-cor-campo input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--trocador-cor-range-thumb-bg);cursor:pointer;border:3px solid var(--trocador-cor-range-thumb-border);box-shadow:var(--trocador-cor-range-thumb-shadow);transition:all 0.3s ease;}
.trocador-cor-campo input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--trocador-cor-range-thumb-hover-bg);}
.trocador-cor-campo select{flex:1;padding:12px 16px;border:2px solid var(--trocador-cor-input-border);border-radius:10px;font-size:1rem;background:var(--trocador-cor-input-bg);transition:all 0.3s ease;color:var(--trocador-cor-input-text);cursor:pointer;}
.trocador-cor-campo select:focus{outline:none;border-color:#00a651;box-shadow:0 0 0 3px rgba(0,166,81,0.1);}
.trocador-cor-campo input[type="checkbox"]{width:18px;height:18px;margin:0;cursor:pointer;}
.trocador-cor-grid-dupla{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;}
.trocador-cor-range-wrapper{display:flex;align-items:center;gap:12px;}
.trocador-cor-range-value{background:var(--trocador-cor-range-value-bg);color:var(--black);padding:8px 12px;border-radius:8px;font-weight:600;min-width:45px;text-align:center;font-size:0.9rem;box-shadow:var(--trocador-cor-range-value-shadow);}
.trocador-cor-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.trocador-cor-btns .tool-btn{flex:1;justify-content:center;min-width:140px;}
.trocador-cor-canvases{display:grid;grid-template-columns:1fr;gap:20px;}
.trocador-cor-canvas-wrap{position:relative;border:2px solid var(--trocador-cor-canvas-wrap-border);border-radius:12px;padding:16px;background:var(--trocador-cor-canvas-wrap-bg);transition:all 0.3s ease;overflow:hidden;}
.trocador-cor-canvas-wrap:hover{border-color:var(--trocador-cor-canvas-wrap-hover-border);background:var(--trocador-cor-canvas-wrap-hover-bg);}
.trocador-cor-canvas-wrap header{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--trocador-cor-header-text);display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--trocador-cor-header-border);}
.trocador-cor-canvas-wrap canvas{max-width:100%;width:100%;height:auto;border-radius:8px;box-shadow:var(--trocador-cor-canvas-wrap-shadow);transition:all 0.3s ease;display:block;margin:0 auto;}
.trocador-cor-canvas-wrap canvas:hover{box-shadow:var(--trocador-cor-canvas-wrap-shadow-hover);}
.trocador-cor-help{font-size:0.9rem;line-height:1.5;color:var(--trocador-cor-help-text);background:var(--trocador-cor-help-bg);padding:12px 16px;border-radius:8px;border-left:4px solid var(--trocador-cor-help-border);margin-top:16px;transition:all 0.3s ease;display:none;}
.trocador-cor-help:hover{background:var(--trocador-cor-help-hover-bg);}
.trocador-cor-icon{width:16px;height:16px;flex-shrink:0;transition:color 0.3s ease;}
/* Responsividade Mobile */
@media (max-width:768px){
.trocador-cor-card{padding:20px;border-radius:12px;}
.trocador-cor-card h3{font-size:1.2rem;}
.trocador-cor-campo{margin-bottom:16px;}
.trocador-cor-btns{flex-direction:column;}
.trocador-cor-btns .tool-btn{width:100%;flex:unset;}
.trocador-cor-canvases{grid-template-columns:1fr;gap:16px;}
.trocador-cor-canvas-wrap{padding:12px;}
}
@media (max-width:480px){
.trocador-cor-card{padding:16px;}
.trocador-cor-campo input[type="text"],.trocador-cor-campo select{padding:10px 12px;}
}
/* Animações */
@keyframes slideInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.trocador-cor-card{animation:slideInUp 0.4s ease-out;}
.trocador-cor-card:nth-child(2){animation-delay:0.1s;}
/* Estado de loading para canvas */
.trocador-cor-canvas-loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--trocador-cor-help-text);font-style:italic;}
/* Melhorias visuais para campos especiais */
.trocador-cor-campo-especial{background:var(--trocador-cor-campo-especial-bg);padding:16px;border-radius:12px;border:1px solid var(--trocador-cor-campo-especial-border);margin-bottom:20px;}
.trocador-cor-campo-especial label{color:var(--trocador-cor-campo-especial-label);font-weight:700;}