.color-tool-container { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px; display: flex; flex-direction: column; gap: 20px; }
            
            .tool-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
            .section-title { font-size: 1.05rem; font-weight: 600; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }

            /* Paleta gerada */
            .palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; }
            .color-card { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
            .color-preview-box { height: 90px; width: 100%; transition: background-color 0.3s; }
            .color-info { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
            .color-hex { font-size: 0.95rem; font-weight: 700; color: #1e293b; text-align: center; font-family: monospace; }
            
            .btn-action { background: #2563eb; color: white; border: none; border-radius: 6px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
            .btn-action:hover { background: #1d4ed8; }
            .btn-secondary { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
            .btn-secondary:hover { background: #e2e8f0; }

            /* Validador WCAG */
            .wcag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: center; }
            .form-group { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; color: #475569; }
            .form-group input { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; background: #f8fafc; color: #1e293b; outline: none; font-weight: 600; font-family: monospace; }
            .form-group input[type="color"] { padding: 4px; height: 42px; cursor: pointer; width: 100%; }

            .wcag-results { display: flex; flex-direction: column; gap: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
            .ratio-display { font-size: 1.5rem; font-weight: 700; color: #1e293b; display: flex; align-items: baseline; gap: 8px; }
            .ratio-sub { font-size: 0.85rem; font-weight: 500; color: #64748b; }

            .badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; width: fit-content; }
            .badge-pass { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
            .badge-fail { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

            /* Caixa de Teste de Exemplo */
            .sample-preview-box { border-radius: 8px; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; transition: all 0.3s; border: 1px solid #cbd5e1; }
            .sample-title { font-size: 1.1rem; font-weight: 700; }
            .sample-text { font-size: 0.9rem; }