:root{
    --accent: #0d6efd;
    --bg: linear-gradient(180deg,#0f1724 0%, #0b1220 100%);
}
html,body{height:100%;}
body{
    background: var(--bg);
    color:#e9eef8;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.container.main-card{max-width:920px;margin:18px auto;padding:18px;background:rgba(255,255,255,0.03);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.6);}
label.form-label{font-weight:600;color:#dbeafe}
.input-group-text{background:rgba(255,255,255,0.03);border-right:0}
.form-control{background:rgba(255,255,255,0.02);color:inherit;border:1px solid rgba(255,255,255,0.06)}
.btn{border-radius:8px}
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn:focus{box-shadow:0 0 0 0.2rem rgba(13,110,253,0.18)}
#preview{display:block;border-radius:8px;overflow:hidden}
.img-preview{width:100%;height:auto;border-radius:8px;display:block;box-shadow:0 4px 16px rgba(2,6,23,0.6)}
.progress{height:14px;border-radius:8px;background:rgba(255,255,255,0.04)}
.progress-bar{background:linear-gradient(90deg, rgba(13,110,253,0.9), rgba(79,70,229,0.9));}
.toast{opacity:0.98}
.table thead th{background:transparent;border-bottom:1px solid rgba(255,255,255,0.06)}
.table tbody tr td{vertical-align:middle}
.right-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.right-panel label{font-weight:600}
/* transitions and focus styles */
#preview{transition:opacity .28s ease, transform .28s ease}
.img-preview{opacity:0;transform:translateY(6px)}
.img-preview.loaded{opacity:1;transform:none}
.btn:focus{outline:3px solid rgba(13,110,253,0.15);outline-offset:2px}
.form-control:focus{box-shadow:0 0 0 0.15rem rgba(13,110,253,0.08);border-color:rgba(13,110,253,0.6)}

/* small pop animation used for generated images and toasts */
@keyframes popIn {
    0% { transform: scale(.96); opacity: 0; }
    60% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.pop{animation: popIn .24s cubic-bezier(.2,.9,.3,1) both}

/* toast subtle slide */
.toast{transition:transform .22s ease, opacity .22s ease}
.toast.pop{transform:translateY(0);opacity:1}
.toast:not(.pop){transform:translateY(-6px);opacity:0}
@media (max-width:576px){
    .btn{width:100%;margin-bottom:8px}
}

/* Small helper for subtle link emphasis */
.link-opacity-75-hover{color:#cfe8ff}
.link-opacity-75-hover:hover{color:#fff;text-decoration:underline}

/* Improve modal content readability */
.modal-content{background:rgba(4,7,13,0.7);color:inherit}

/* Make file input area more visible */
input[type="file"]{background:rgba(255,255,255,0.02)}

/* Accessibility tweaks */
label{cursor:pointer}

/* Utility spacing (used by this page) */
.my-3{margin-top:1rem!important;margin-bottom:1rem!important}
