@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* --- GLOBAL DARK THEME --- */
body {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: #e0e6e3; /* Light gray text */
    /* Updated gradient for smoother look */
    background: linear-gradient(160deg, #0b0e10 0%, #11181a 50%, #0b0e10 100%); 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    text-align: center;
}

.wrapper {
    text-align: center;
    width: 100%;
    max-width: 450px;
}

/* Reusing .card for the main container */
.card {
    background-color: #111415; /* Darker card background */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(54, 203, 174, 0.18); /* Neon shadow */
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Logo Styling */
.logo {
    width: 250px; 
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 18px rgba(54, 203, 174, 0.5));
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

h1 { 
    color: #36cbae; /* Neon Green */
    font-size: 2.1em; 
    margin-bottom: 0.5em; 
}

.subtitle { 
    color: #b0b8b5; /* Light lead text */
    font-size: 1.0em;
    margin-bottom: 1.8em; 
}

/* --- FORM ELEMENTS: UNIVERSAL DARK STYLE --- */
/* This is a strong, catch-all selector to fix light inputs */
input[type="text"], input[type="password"], textarea {
    background-color: #0d1112 !important; /* Force dark background */
    border: 1px solid #1f2a29 !important; /* Force dark border */
    color: #e0e6e3 !important; /* Force light text */
    padding: 14px 15px;
    border-radius: 12px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-top: 10px;
}

/* Login specific styling uses the new universal rule above, but keeps structure */
.login-card input[type="password"] {
    /* Only apply width/spacing here, let the universal rule handle colors */
    width: 100%; 
    margin-top: 10px;
    margin-bottom: 15px;
}

/* --- UPLOAD ZONE --- */
.drop-zone {
    background: #0d1112; 
    border: 2px dashed #1f2a29; 
    border-radius: 15px;
    padding: 50px 20px;
    color: #889390; 
    cursor: pointer;
    transition: 0.3s;
}

.drop-zone.dragover {
    background: #1a2220;
    color: #36cbae; 
    border-color: #36cbae;
}

/* --- PROGRESS BAR --- */
#progressContainer { margin-top: 25px; }
#progressContainer.hidden { display: none; }
#progressBar {
    height: 10px;
    width: 0%;
    background: #36cbae; 
    border-radius: 5px;
    transition: width 0.3s;
}
#progressText {
    margin-top: 8px;
    color: #b0b8b5;
    font-size: 14px;
}

/* --- BUTTONS & LINKS (Neon Green) --- */
button, .download-btn, .back-btn {
    background: #36cbae; 
    color: #0b0e10; 
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    margin-top: 15px;
    font-weight: 600;
}

button:hover, .download-btn:hover, .back-btn:hover {
    background: #5ac7b4; 
    box-shadow: 0 0 10px rgba(54, 203, 174, 0.5);
}
.login-card button {
    width: 100%;
}

/* --- LINK BOX (Output/Download) --- */
.link-box {
    display: flex;
    align-items: stretch;
    margin-top: 25px;
    border: 1px solid #1f2a29; 
    border-radius: 12px;
    overflow: hidden;
    background: #0d1112; 
}

.link-box input {
    flex: 1;
    border: none !important; /* Remove individual input border */
    padding: 14px;
    font-size: 14px;
    text-align: center;
    height: auto; 
    margin: 0; 
    background: transparent !important; /* Ensure input shows link-box background */
    color: #e0e6e3; 
}

.link-box button {
    border-radius: 0;
    padding: 14px 20px; 
    background: #36cbae;
    margin-top: 0; 
    height: 100%;
    color: #0b0e10;
}

.error {
    color: #d90429;
    font-size: 14px;
    margin-top: 15px;
}

/* Footer Style */
footer {
    color: #6f7774;
    font-size: 0.9em;
    margin-top: 25px;
}
.card a {
    color: #36cbae;
    text-decoration: none;
    font-weight: 500;
}
.fade-in { animation: fadein 0.6s ease-in; }
@keyframes fadein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}