:root{--primary:#D4AF37;--primary-dark:#B89B2E;--primary-glow:rgba(212,175,55,.2);--darkest:#101010;--dark:#1A1A1A;--darker:#252525;--gray:#404040;--light-gray:#AAA;--light:#F5F5F5;--shadow:0 6px 20px rgba(0,0,0,.25);--glow:0 0 12px rgba(212,175,55,.4)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background-color:var(--darkest);color:var(--light);line-height:1.6;min-height:100vh}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--darker); }
::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; border: 2px solid var(--darker); }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-dark); }
* { scrollbar-width: thin; scrollbar-color: var(--primary) var(--darker); }

.container{max-width:1600px;margin:0 auto;padding:2rem;width:100%}
header{text-align:center;margin-bottom:2.5rem}
header h1{font-size:3rem;font-weight:700;color:var(--primary);letter-spacing:2px;text-transform:uppercase;text-shadow: 0 0 10px var(--primary-glow);}
header p{color:var(--light-gray);font-size:1.1rem;max-width:600px;margin:1rem auto 0}
.app-layout{display:grid;grid-template-columns:450px 1fr;gap:2.5rem;align-items:flex-start}
.controls-panel,.results-panel{background-color:var(--dark);border-radius:16px;border:1px solid var(--gray);overflow:hidden;height:100%}
.panel-content{padding:2rem; height: 100%; overflow-y: auto;}
.form-group{margin-bottom:1.75rem}
label{display:block;margin-bottom:.75rem;color:var(--light);font-weight:500;font-size:1rem}
.prompt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
input,select,textarea{width:100%;padding:.9rem 1.1rem;background-color:var(--darker);border:1px solid var(--gray);border-radius:10px;color:var(--light);font-family:inherit;font-size:1rem;transition:all .3s ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:var(--glow)}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D4AF37' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px 12px;
}
textarea{min-height:120px;resize:vertical}
button,.download-btn,.tool-btn{background:var(--primary);color:var(--darkest);font-weight:600;border:none;padding:.9rem 2rem;font-size:1rem;border-radius:10px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;text-decoration:none;width:100%;position:relative;overflow:hidden;}
button::before,.download-btn::before,.tool-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,var(--primary-glow),transparent);transition:left .4s ease-in-out;}
button:hover::before,.download-btn:hover::before,.tool-btn:hover::before {left:100%;}
button:active,.download-btn:active,.tool-btn:active{transform:translateY(1px)}
button:hover,.download-btn:hover,.tool-btn:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;background-color:var(--gray);}
.secondary-btn{background:transparent;border:1px solid var(--gray);color:var(--light);text-transform:none;font-weight:500}
.secondary-btn:hover{background-color:var(--darker);border-color:var(--primary);color:var(--primary)}
.upload-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.upload-area{border:2px dashed var(--gray);border-radius:10px;padding:2rem;text-align:center;transition:all .3s ease;cursor:pointer;background-color:var(--darker);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;}
.upload-area.active,.upload-area:hover{border-color:var(--primary);background-color:#333}
.upload-area i{font-size:2.5rem;color:var(--primary);margin-bottom:1rem;transition:transform .3s ease;}
.upload-area:hover i {transform:scale(1.1);}

/* --- ESTILOS DAS MINIATURAS E BOTÃO REMOVER (ATUALIZADOS) --- */
#multipleReferenceContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; width: 100%; margin-top: 1rem; }
.reference-thumbnail { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--gray); transition: transform 0.3s ease; }
.reference-thumbnail:hover { transform: scale(1.03); }
.reference-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.remove-reference-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    backdrop-filter: blur(4px);
}

.reference-thumbnail:hover .remove-reference-btn {
    opacity: 1;
    transform: scale(0.5);
}

.results-panel .panel-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem}
#result-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 1.5rem; width: 100%;}
#result-container.single-item-view { grid-template-columns: 1fr; max-width: 768px; }
.generated-image-item { width: 100%; background-color: var(--darkest); aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; border: 1px solid var(--gray); transition: transform .3s ease, box-shadow .3s ease; }
.generated-image-item:hover {transform: scale(1.03); box-shadow: 0 0 20px rgba(0,0,0,0.5);}
.generated-image-item img {width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease;}
.generated-image-item:hover img {transform: scale(1.1);}
.placeholder-area{text-align:center;color:var(--light-gray); grid-column: 1 / -1; margin: auto; animation: fadeIn .5s;}
.placeholder-area i{font-size:4rem;margin-bottom:1rem;opacity:.5}
#batch-actions-container { width: 100%; display: flex; justify-content: center; margin-top: 1rem; }
#downloadAllBtn { max-width: 300px; }
.loading{display:none;text-align:center;margin-top:1.5rem;flex-direction:column;align-items:center;gap:1rem}
.loading-spinner{border:4px solid var(--gray);border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite, fadeIn .5s;margin:0 auto}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.status{margin-top:1.5rem;padding:.8rem 1rem;border-radius:10px;text-align:center;font-weight:500;display:none; animation: fadeIn .5s;}
.status.success{background-color:rgba(212,175,55,.1);color:var(--primary);border:1px solid var(--primary)}
.status.error{background-color:rgba(255,85,85,.1);color:#ff5555;border:1px solid #ff5555}
.status i{margin-right:.5rem}
.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:all .4s ease-out}
.popup-overlay.active{opacity:1;visibility:visible}
.popup-content{background-color:var(--dark);border-radius:16px;padding:2.5rem;width:100%;max-width:90vw;max-height:90vh;overflow-y:auto;position:relative;border:1px solid var(--primary);box-shadow:var(--shadow); transform: scale(0.95); transition: transform .4s ease-out;}
.popup-overlay.active .popup-content {transform: scale(1);}
.popup-close{position:absolute;top:1rem;right:1rem;background:var(--darker);border:1px solid var(--gray);color:var(--light);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:all .2s ease; z-index: 1010;}
.popup-close:hover{color:var(--primary);border-color:var(--primary);background-color:#333;}
.history-title{color:var(--primary);text-align:center;font-size:2rem;font-weight:100;margin-bottom:1.5rem}
.history-actions {display: flex;justify-content: center;margin-bottom: 1.5rem;}
#clearHistoryBtn {width: auto; padding-left: 2.5rem; padding-right: 2.5rem;}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.history-item{background-color: var(--darkest); border-radius:10px;overflow:hidden;cursor:pointer;transition:all .3s ease;position:relative;aspect-ratio:1/1;border:1px solid var(--gray);}
.history-item .prompt-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.95),transparent);color:#fff;padding:2rem 1rem 1rem;font-size:.85rem;opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item:hover{transform:scale(1.05);box-shadow:var(--glow);border-color:var(--primary)}
.history-item:hover .prompt-overlay{opacity:1}
.history-item img{width:100%;height:100%; object-fit: contain; transition:transform .3s ease}
.history-item:hover img{transform:scale(1.1)}
.history-download-action { margin-top: 2rem; display: flex; justify-content: center; }
#downloadHistoryBtn { max-width: 400px; }
.image-viewer{display:flex;align-items:center;justify-content:center;min-height:50vh}
.image-viewer img{max-width:100%;max-height:calc(85vh - 200px);border-radius:12px;object-fit:contain}
.image-actions{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}
.image-details {margin-top: 1.5rem;padding: 1.5rem;background-color: var(--darker);border: 1px solid var(--gray);border-radius: 10px;font-size: 0.95rem;color: var(--light-gray);max-width: 800px;margin-left: auto;margin-right: auto;}
.image-details p {margin-bottom: 0.75rem;display: flex;align-items: flex-start;}
.image-details p:last-child {margin-bottom: 0;}
.image-details strong {color: var(--primary);margin-right: .75rem;font-weight: 600;min-width: 70px;}
.image-details .prompt-text {color: var(--light);word-break: break-word;}
.model-options{display:none;background-color:var(--darker);padding:1.5rem;margin-top:1rem;margin-bottom: 1.5rem;border-radius:10px;border:1px solid var(--gray); animation: fadeIn .5s;}
.model-options.active{display:block}
.size-custom{display:flex;gap:1rem;margin-top:1rem}
.footer{text-align:center;margin-top:3rem;padding:2rem 0;color:var(--gray);font-size:.9rem;font-weight:300;opacity:.8;border-top:1px solid var(--dark)}
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.coffee-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background-color: #ffdd00; color: #000; border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform .3s ease, box-shadow .3s ease; }
.coffee-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(255, 221, 0, 0.3); }
.coffee-btn i { font-size: 1.5rem; }
#editPopup { background-color: rgba(0,0,0,0.95); }
#editPopup .popup-content { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; padding: 0; display: flex; flex-direction: column; background: none; border: none; }
.editor-container { position: relative; flex-grow: 1; overflow: hidden; background-color: var(--darkest); cursor: none; }
#editorCanvas { position: absolute; top: 0; left: 0; }
.editor-tools { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1005; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background-color: var(--dark); border: 1px solid var(--gray); border-radius: 12px; box-shadow: var(--shadow); }
.tool-group { display: flex; align-items: center; gap: 0.5rem; }
.tool-btn { padding: 0.75rem; width: 50px; height: 50px; font-size: 1.2rem; background-color: var(--darker); color: var(--light); border: 1px solid var(--gray); }
.tool-btn.active { background-color: var(--primary); color: var(--darkest); border-color: var(--primary-dark); }
input[type="range"] { accent-color: var(--primary); min-width: 120px; }
.image-combiner { margin-top: 1rem; border-top: 1px solid var(--gray); padding-top: 1.5rem; }
.image-combiner-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.image-combiner-preview { border: 2px dashed var(--gray); border-radius: 8px; padding: 1rem; text-align: center; background-color: var(--darker); min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.image-combiner-preview img { max-width: 100%; max-height: 100px; display: none; border-radius: 4px; }
.image-combiner-preview p { margin: 0; font-size: .9rem; color: var(--light-gray); }
.image-combiner-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
#customCursor { position: fixed; border: 1px solid white; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width 0.05s, height 0.05s; z-index: 2000; }
#customCursor::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background-color: white; border-radius: 50%; transform: translate(-50%, -50%); }
.label-group { display: flex; flex-direction: column; }
.label-subtitle { font-size: 0.8rem; color: var(--light-gray); margin-top: -0.5rem; }
.toggle-switch {--width: 60px; --height: 30px; position: relative; display: inline-block; width: var(--width); height: var(--height); cursor: pointer;}
.toggle-switch input {opacity: 0; width: 0; height: 0;}
.toggle-slider {position: absolute;inset: 0;background-color: var(--darker);border: 1px solid var(--gray);transition: .4s;border-radius: var(--height);}
.toggle-slider:before {position: absolute;content: "";height: calc(var(--height) - 8px);width: calc(var(--height) - 8px);left: 4px;bottom: 4px;background-color: var(--light-gray);-webkit-transition: .4s;transition: .4s;border-radius: 50%;font-family:"Font Awesome 6 Free";font-weight:900;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--darker);}
input:checked + .toggle-slider {background-color: var(--primary-dark);}
input:checked + .toggle-slider:before {transform: translateX(calc(var(--width) - var(--height)));background-color: var(--primary);color:var(--darkest);}
.toggle-slider.icon:before {content: "\f186";} /* moon */
input:checked + .toggle-slider.icon:before {content: "\f185";} /* sun */
.model-options .prompt-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
.model-options .prompt-header label {margin-bottom: 0; font-size: 0.95rem;}
@media (max-width:1024px){.app-layout{grid-template-columns:1fr}}
@media (max-width:768px){.container{padding:1rem}.panel-content{padding:1.5rem}.editor-tools{width: 90%; bottom: 1rem;}}