/* --- RESETS & BASE --- */
body { 
    margin: 0; 
    background: #121212; 
    color: #fff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    display: flex; 
    overflow: hidden; 
}
h2 { 
    margin-top: 0; margin-bottom: 0; 
    color: #e3c042; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 1px; 
    font-size: 1.3em;
}

/* --- LAYOUT & CONTAINERS --- */
#sidebar { 
    width: 440px; 
    padding: 25px; background: #1e1e24; box-shadow: 2px 0 10px rgba(0,0,0,0.5); 
    display: flex; flex-direction: column; gap: 15px; z-index: 10;
    height: 100vh; overflow-y: auto; box-sizing: border-box; 
}
#canvas-container { 
    flex-grow: 1; 
    position: relative; 
}
.input-group { 
    display: flex; flex-direction: column; gap: 5px; 
    background: #232329; padding: 10px; border-radius: 6px; 
}
.controls-row { display: flex; gap: 5px; margin-top: 5px; }
.controls-row div { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center;}
.controls-row label { font-size: 0.65rem; color: #777; text-align: center; }
.controls-row input { text-align: center; font-size: 0.8rem; }
.section-header-row { display: flex; align-items: center; justify-content: space-between; }
.checkbox-row { display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; color: #fff; text-transform: none; font-weight: normal; }
#holeControls { display: none; border-top: 1px dashed #444; padding-top: 10px; margin-top: 5px; }

/* --- INLINE STYLE UTILITIES --- */
.palette-group { border: 1px solid #e3c042; }
.palette-label { color: #e3c042; }
.palette-label.mt-10 { margin-top: 10px; }
.perf-group { border: 1px dashed #555; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.checkbox-row-start { margin-top: 10px; justify-content: flex-start; }
.flex-align-center { display: flex; align-items: center; }
.algo-wrapper { margin-top: 10px; }

/* --- TYPOGRAPHY --- */
label { font-size: 0.85rem; color: #aaa; text-transform: uppercase; font-weight: bold; }

/* --- FORMS & INPUTS --- */
input[type="text"], input[type="number"], select { 
    padding: 8px; background: #2a2a30; border: 1px solid #444; color: white; 
    border-radius: 4px; font-weight: bold; width: 100%; box-sizing: border-box; 
}
input:focus, select:focus { outline: none; border-color: #e3c042; }

input[type="color"] {
    -webkit-appearance: none; border: 1px solid #444; width: 100%; height: 32px; 
    border-radius: 4px; padding: 0; cursor: pointer; background: #2a2a30;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
input[type="color"]:focus { border-color: #e3c042; }

input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    background-color: #2a2a30; margin: 0; font: inherit; color: currentColor;
    width: 1.25em; height: 1.25em; border: 1px solid #555; border-radius: 0.2em;
    display: grid; place-content: center; cursor: pointer; transition: border 0.2s;
}
input[type="checkbox"]::before {
    content: ""; width: 0.65em; height: 0.65em; transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #121212; 
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked { background-color: #e3c042; border-color: #e3c042; }
input[type="checkbox"]:checked::before { transform: scale(1); }

/* --- DROP ZONE UPLOAD --- */
input[type="file"] { display: none; }
.custom-file-upload {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 25px 15px; cursor: pointer; text-align: center;
    background: #1a1a20; border: 2px dashed #555; border-radius: 8px;
    transition: all 0.2s ease-in-out; margin-top: 10px;
}
.custom-file-upload:hover { border-color: #e3c042; background: #22222a; }
.custom-file-upload.drag-over { background: rgba(227, 192, 66, 0.1); border-color: #e3c042; border-style: solid; transform: scale(1.02); }

.drop-icon { font-size: 28px; margin-bottom: 8px; display: block; transition: transform 0.2s; filter: grayscale(0.2); }
.custom-file-upload:hover .drop-icon { transform: translateY(-4px); filter: grayscale(0); }
.drop-text-main { font-weight: bold; font-size: 0.95rem; color: #e3c042; display: block; margin-bottom: 4px; text-transform: uppercase; }
.drop-text-sub { font-size: 0.75rem; font-weight: normal; color: #777; display: block; text-transform: none; }

/* --- SLIDERS & AXIS CONTROLS --- */
.slider-header { display: flex; justify-content: space-between; margin-top: 10px; align-items: center; }
.slider-val { color: #e3c042; font-weight: bold; font-size: 0.9rem; }
.dimensions-val { color: #aaa; font-size: 0.8rem; margin-right: 10px; }

.axis-control { display: flex; align-items: center; gap: 8px; margin-top: 4px; width: 100%; box-sizing: border-box; }
.axis-control label { width: 15px; text-align: center; font-size: 0.8rem; flex-shrink: 0; }
.axis-control input { flex: 1; padding: 6px; margin: 0; min-width: 0; }

.slider-control { display: flex; align-items: center; gap: 8px; margin-top: 4px; width: 100%; box-sizing: border-box; }
.slider-control input[type="range"] { flex: 1; margin: 0; min-width: 0; cursor: pointer; width: 100%; }

input[type="range"] { -webkit-appearance: none; background: transparent; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; height: 6px; cursor: pointer; background: #444; border-radius: 3px; border: 1px solid #222;
}
input[type="range"]:focus::-webkit-slider-runnable-track { background: #555; }
input[type="range"]::-webkit-slider-thumb {
    height: 16px; width: 16px; border-radius: 50%; background: #e3c042; cursor: pointer;
    -webkit-appearance: none; margin-top: -6px; box-shadow: 0 0 5px rgba(0,0,0,0.5); transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Danger Zone Custom Track for Resolution */
input[type="range"]#imgRes::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #444 0%, #444 49%, #5a1a1a 49%, #5a1a1a 100%);
}
input[type="range"]#imgRes:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #555 0%, #555 49%, #7a1a1a 49%, #7a1a1a 100%);
}

/* --- BUTTONS --- */
.dir-btn { 
    width: 32px; height: 32px; padding: 0; margin: 0; background: #3a3a42; color: #fff; font-size: 12px; 
    border-radius: 4px; display: flex; justify-content: center; align-items: center; border: none; cursor: pointer; flex-shrink: 0; 
}
.dir-btn:hover { background: #e3c042; color: #121212; }

#updateBtn { 
    width: 100%; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none; padding: 12px; cursor: pointer; font-weight: bold; text-transform: uppercase; 
    border-radius: 4px; transition: background 0.2s; background: #444; color: white; margin-top: 5px; 
}
#updateBtn:hover { background: #555; }

button.export { 
    width: 100%; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none; padding: 12px; cursor: pointer; font-weight: bold; text-transform: uppercase; 
    border-radius: 4px; transition: background 0.2s; background: #e3c042; color: #121212; 
    margin-top: 15px; margin-bottom: 10px; 
}
button.export:hover { background: #f5d14e; }

.pass-btn {
    width: 100%; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 2px solid #e3c042; padding: 10px; cursor: pointer; font-weight: bold; 
    text-transform: uppercase; border-radius: 4px; transition: all 0.2s; 
    background: #1e1e24; color: #e3c042; margin-bottom: 20px;
}
.pass-btn:hover { background: #2a2a30; }

/* --- TOOLTIPS --- */
.tooltip { 
    position: relative; display: inline-block; cursor: help; color: #1e1e24; background: #aaa; 
    border-radius: 50%; width: 16px; height: 16px; text-align: center; line-height: 16px; 
    font-size: 11px; font-weight: bold; transition: background 0.2s;
}
.tooltip-ml { margin-left: 8px; }
.tooltip:hover { background: #e3c042; }

.tooltip .tooltiptext { 
    visibility: hidden; width: 240px; background-color: #222; color: #fff; text-align: center; 
    border-radius: 6px; padding: 10px; position: absolute; z-index: 100; bottom: 130%; 
    right: 0; left: auto; margin-left: 0; opacity: 0; transition: opacity 0.3s; 
    font-size: 0.75rem; font-weight: normal; border: 1px solid #444; box-shadow: 0px 4px 6px rgba(0,0,0,0.5); 
    pointer-events: none; line-height: 1.3;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
.fixed-tooltip { flex: 0 0 auto !important; width: 20px !important; height: 20px !important; line-height: 20px !important; margin: 0; }
.warning-tooltip { background: transparent; font-size: 16px; line-height: 16px !important; }
.warning-tooltip:hover { background: transparent; transform: scale(1.1); }
#resWarning { display: none; margin-left: 6px; color: #ff4444; }

/* Centering overrides to avoid sidebar overflow */
.tooltip .tooltiptext.tooltiptext-res { left: -100px; right: auto; transform: none; }

/* --- IMAGE CAROUSEL --- */
.image-carousel { 
    display: flex; gap: 10px; margin-top: 10px; margin-bottom: 5px; overflow-x: auto; 
    padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #555 #222; 
}
.carousel-item { 
    width: 100px; height: 100px; border-radius: 6px; border: 2px solid #444; background: #2a2a30; 
    cursor: pointer; object-fit: contain; padding: 2px; flex-shrink: 0; transition: border-color 0.2s; 
}
.carousel-item:hover { border-color: #888; }
.carousel-item.selected { border-color: #e3c042; }

/* --- CROP EDITOR --- */
#cropEditor { display: none; margin-top: 10px; border: 1px dashed #555; padding: 10px; background: #1a1a1a; border-radius: 6px; }
#cropWrapper { width: 100%; height: 250px; background: #000; overflow: hidden; margin-bottom: 12px; border-radius: 4px; }
#cropImage { max-width: 100%; display: block; }
#cropWrapper.is-oval .cropper-view-box, #cropWrapper.is-oval .cropper-face { border-radius: 50%; }

.editor-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; justify-content: space-between; }
.editor-select { flex: 1; font-size: 0.8rem; padding: 9px; cursor: pointer; height: 38px; background: #2a2a30; border: 1px solid #444; color: white; border-radius: 4px; font-weight: bold; }
.editor-select:focus { outline: none; border-color: #e3c042; }

.editor-btn {
    flex: 1; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.8rem; font-weight: bold; text-transform: uppercase; height: 38px;
    border-radius: 4px; border: none; cursor: pointer; transition: all 0.2s;
    margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-gold { background: #e3c042; color: #121212; }
.btn-gold:hover { background: #f5d14e; transform: translateY(-1px); }
.btn-purple { background: #8a2be2; color: white; }
.btn-purple:hover { background: #9b42f5; box-shadow: 0 0 10px rgba(138, 43, 226, 0.4); transform: translateY(-1px); }
.btn-outline { width: 100%; background: transparent; border: 1px solid #555; color: #aaa; margin-top: 4px; }
.btn-outline:hover { background: #333; color: white; border-color: #777; }

/* --- FULLSCREEN LOADER & GLOBAL SCROLLBARS --- */
#fullscreenLoader { 
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(0,0,0,0.85); z-index: 9999; flex-direction: column; 
    justify-content: center; align-items: center; color: #e3c042; 
}
#loaderTitle { margin-top: 20px; }
#loaderSubtitle { color: #aaa; max-width: 400px; text-align: center; margin-top: 10px; }
.spinner { width: 60px; height: 60px; border: 6px solid #444; border-top-color: #e3c042; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #121212; border-left: 1px solid #222; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e3c042; }

/* --- MOBILE RESPONSIVE LAYOUT --- */
@media (max-width: 768px) {
    body { 
        flex-direction: column-reverse; /* Pushes Canvas to Top, Controls to Bottom */
    }
    #canvas-container { 
        width: 100vw; 
        height: 45vh; 
        flex-grow: 0;
    }
    #sidebar { 
        width: 100vw; 
        height: 55vh; 
        padding: 15px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.5); 
        z-index: 20;
    }
    .tooltip .tooltiptext { width: 200px; font-size: 0.7rem; }
    .tooltip .tooltiptext.tooltiptext-res { left: auto; right: 0; transform: none; }
}