/* --- START OF NEW styles.css --- */

/* Global Reset & Base Styles */
* {
    box-sizing: border-box; /* Better layout control */
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #242830; /* Soft dark background */
    color: #e0e0e0; /* Light text color */
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure body takes full viewport height */
    padding: 20px; /* Add some padding around the content */
    text-align: center; /* Keep text centered within the container */
}

/* Container for the main content */
.container {
    background-color: #2f343d; /* Slightly lighter container background */
    padding: 30px 40px;
    border-radius: 12px; /* Rounded corners for the main box */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    max-width: 600px; /* Limit maximum width */
    width: 100%; /* Responsive width */
}

h2 {
    color: #ffffff; /* Brighter color for heading */
    margin-bottom: 25px;
}

/* Textarea and Input Styling */
textarea,
input[type="password"] {
    width: 100%; /* Use full width of container */
    margin: 15px 0; /* Consistent margin */
    padding: 12px 15px; /* Comfortable padding */
    background-color: #3a3f4a; /* Darker input background */
    color: #e0e0e0; /* Light text */
    border: 1px solid #4a4f5a; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    font-family: inherit; /* Use body font */
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    resize: vertical; /* Allow vertical resize for textarea */
}

textarea {
    min-height: 80px; /* Minimum height */
}

/* Placeholder Styling */
textarea::placeholder,
input::placeholder {
    color: #888da8; /* Muted placeholder color */
    opacity: 1; /* Ensure visibility */
}

/* Focus State for Inputs */
textarea:focus,
input[type="password"]:focus {
    outline: none; /* Remove default outline */
    border-color: #667eea; /* Accent color border on focus */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); /* Subtle glow effect */
}

/* Button Styling */
button {
    margin: 10px 5px;
    padding: 12px 25px;
    cursor: pointer;
    background-color: #667eea; /* Primary accent color */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth transitions */
}

button:hover {
    background-color: #7f8ffc; /* Lighter on hover */
}

button:active {
    transform: scale(0.98); /* Slight shrink on click */
}

/* Password Strength Indicator */
#passwordStrength {
    transition: all 0.3s ease;
    border-radius: 5px; /* Keep rounded ends */
    height: 8px; /* Slightly thicker bar */
    background-color: #3a3f4a; /* Dark background for the track */
    width: 100%; /* Use full width of container */
    margin: 5px auto 15px; /* Adjusted margin */
    overflow: hidden; /* Ensure inner bar respects border-radius */
}

/* Inner bar (base style, will be overridden by strength classes) */
#passwordStrength::before {
    content: "";
    display: block;
    height: 100%;
    background-color: #4a4f5a; /* Default empty color */
    width: 0;
    border-radius: 5px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Adjusted Strength Colors for Dark Mode */
/* We target the ::before pseudo-element if using that method,
   or directly if modifying the JS to add a child span */

/* For simplicity, let's stick to modifying the element directly */
/* Remove the ::before style above if you keep the original JS logic */

.strength-0 { background-color: #e57373; width: 20%; } /* Softer Red */
.strength-1 { background-color: #ffb74d; width: 40%; } /* Softer Orange */
.strength-2 { background-color: #fff176; width: 60%; } /* Softer Yellow */
.strength-3 { background-color: #81c784; width: 80%; } /* Softer Green */
.strength-4 { background-color: #4db6ac; width: 100%; } /* Teal for Very Strong */

/* Strength Text */
#strengthText {
    font-size: 0.85rem; /* Slightly larger */
    color: #a0a0a0; /* Default muted color */
    margin-top: -10px; /* Pull slightly closer to the bar */
    margin-bottom: 15px;
    min-height: 1.2em; /* Reserve space to prevent layout shift */
    transition: color 0.3s ease;
}

/* Readonly Output Textarea */
#outputText {
    background-color: #3a3f4a; /* Consistent background */
    cursor: default; /* Indicate non-editable */
    min-height: 80px; /* Match input textarea */
}

/* --- END OF NEW styles.css --- */