/* Reset */
* { 
    margin:0; padding:0; box-sizing:border-box; 
    font-family:'Courier New', Courier, monospace; 
    color:#00ffff;
}
body { 
    background:#0f0f1f; 
    padding:20px; 
}

/* Ensure inputs, buttons, selects also use monospace */
input, textarea, button, select {
    font-family:'Courier New', Courier, monospace;
}

/* Loading Overlay */
#loadingOverlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(15,15,31,0.95);
    display:flex; flex-direction:column; justify-content:center; align-items:center; 
    z-index:9999;
}
.loader {
    width:50px; height:50px;
    border:5px solid #555; 
    border-top:5px solid #00ffff; 
    border-radius:50%;
    animation: spin 1s linear infinite; 
    margin-bottom:15px;
}
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

/* Main Tabs */
.tab {
    background:#1e1e2f; 
    width:95%; max-width:550px; margin:60px auto; padding:40px; 
    border-radius:20px; 
    box-shadow: 8px 8px 20px #0a0a14, -8px -8px 20px #33334f;
    text-align:center;
}

/* Tab text */
.tab p, #resultTab p {
    font-size:18px;
    line-height:1.5;
    color:#00ffff;
}

/* Headings */
.tab h2, #resultTab h2 {
    font-size:22px;
    margin-bottom:15px;
    color:#00ffff;
}

/* Buttons */
.tab button, .controls button {
    background:#00ffff; 
    color:#0f0f1f; 
    padding:15px 40px; 
    font-size:16px;
    border-radius:12px; 
    border:none; 
    cursor:pointer;
    transition: all 0.3s ease;
}
.tab button:hover, .controls button:hover {
    background:#00cccc; 
    transform: translateY(-2px);
}

/* Circle container */
.circle-container {
    width:150px; height:150px; border-radius:50%; overflow:hidden;
    margin:20px auto; display:flex; justify-content:center; align-items:center;
    border:3px solid #00ffff;
}
.circle-container img { width:100%; height:100%; object-fit:cover; }

/* Controls + dropdowns */
.controls {
    display:flex; justify-content:flex-start; align-items:center; gap:15px; margin-bottom:30px;
    flex-wrap:wrap;
}
.controls select {
    padding:12px 15px; min-width:130px; border-radius:12px; border:1px solid #00ffff;
    background:#1e1e2f; color:#00ffff; outline:none;
    box-shadow: inset 2px 2px 6px #0a0a14, inset -2px -2px 6px #33334f;
}

/* Columns: 50/50 split */
.columns {
    display:flex; gap:25px; flex-wrap:wrap;
}
#resultTab, .image-wrapper {
    flex:1; min-width:0; background:#1e1e2f; padding:25px; border-radius:15px;
    box-shadow: 8px 8px 20px #0a0a14, -8px -8px 20px #33334f;
}
.image-wrapper { display:flex; justify-content:center; align-items:center; height:80vh; }
.image-wrapper img { width:100%; height:100%; object-fit:contain; display:block; }

/* Animations */
.animated-dropdown { opacity:0; transform:translateY(-10px); animation: dropdownShow 0.4s ease forwards; }
@keyframes dropdownShow { to { opacity:1; transform:translateY(0); } }
.animated-result { opacity:0; transform:scale(0.95); animation: resultShow 0.4s ease forwards; }
@keyframes resultShow { to { opacity:1; transform:scale(1); } }

/* Mobile */
@media(max-width:900px){
    .columns { flex-direction:column; align-items:center; }
    #imageContainer, #resultTab { width:90%; margin-top:15px; }
    .controls { flex-direction:column; align-items:center; }
}