body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.header-actions {
    width: 100%;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buttons-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-actions button {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.header-actions button:hover {
    background-color: #218838;
}

.main-content-area {
    display: flex;
    gap: 30px;
}

.image-grid-wrapper {
    flex: 3;
    min-width: 0;
}

.color-tools-sidebar {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    min-width: 280px;
    align-self: flex-start;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.image-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer; /* <--- ADICIONE ESTA LINHA */
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-container {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.image-info {
    font-weight: bold;
    margin-bottom: 10px;
    color: #555;
}

/* --- ESTILOS PARA A NOVA FERRAMENTA DE COR --- */
.color-tool-card{background-color:#2d3748;border:1px solid #4a5568;border-radius:8px;padding:16px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}.color-tool-card-title{color:#fff;text-align:center;font-size:1.125rem;font-weight:500;padding-bottom:16px}.color-display-section{text-align:center}.color-display-section p{color:#fff;font-size:.875rem;margin-bottom:8px}.color-display-section .input-group{display:flex;align-items:center;justify-content:center;gap:8px}.color-display-section input{width:80px;height:32px;font-size:.75rem;text-align:center;background-color:#4a5568;border:1px solid #718096;color:#fff;border-radius:4px}.color-display-section .color-preview-box{width:32px;height:32px;border:1px solid #718096;border-radius:4px}.gradient-picker{position:relative;width:100%;height:128px;border-radius:4px;cursor:crosshair}.gradient-picker-cursor{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:9999px;transform:translate(-50%,-50%);pointer-events:none}.slider-container{display:flex;flex-direction:column;gap:8px}.slider{position:relative;width:100%;height:16px;border-radius:4px;cursor:pointer}.slider-cursor{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:9999px;transform:translate(-50%,-50%);top:50%;pointer-events:none}.hue-slider{background:linear-gradient(to right,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.brightness-slider{background:linear-gradient(to right,#000 0,#fff 100%)}.preset-colors-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.preset-color-button{width:24px;height:24px;border-radius:9999px;border:1px solid #718096;cursor:pointer;transition:transform .2s}.preset-color-button:hover{transform:scale(1.1)}.action-buttons{display:flex;gap:8px;padding-top:8px}.action-buttons button{flex:1;padding:8px 16px;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500}.action-buttons .apply-button{background-color:#38a169}.action-buttons .apply-button:hover{background-color:#2f855a}.action-buttons .cancel-button{background-color:transparent;border:1px solid #718096;color:#e2e8f0}.action-buttons .cancel-button:hover{background-color:#4a5568}

/* --- ESTILOS PARA SELEÇÃO --- */
.selection-instruction {
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
    font-style: italic;
}

.image-item.color-selected {
    border: 2px solid #00a99d;
    box-shadow: 0 0 10px rgba(0, 169, 157, 0.5);
}

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .main-content-area {
        flex-direction: column;
    }
    .color-tools-sidebar {
        min-width: auto;
        width: 100%;
        margin-bottom: 20px;
    }
}