/* --- THEME SETTINGS --- */
:root {
    --bg-color: #0f172a;       /* Deep Slate */
    --card-bg: #1e293b;        /* Lighter Slate */
    --accent-primary: #38bdf8; /* Cyber Blue */
    --accent-safe: #10b981;    /* Emerald Green */
    --accent-warn: #f59e0b;    /* Amber */
    --accent-danger: #ef4444;  /* Red */
    --text-light: #ffffff;     /* Pure White for better visibility */
}

body {
    background-color: var(--bg-color);
    color: var(--text-light);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- THE PROTECTOR CARD --- */
.protector-card {
    background-color: var(--card-bg);
    border: 1px solid #475569; /* Lighter border for visibility */
    border-top: 4px solid var(--accent-primary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border-radius: 12px;
    width: 100%;
    max-width: 450px;
    color: var(--text-light); /* Force text color inside card */
}

/* Ensure all text inside the card inherits white color */
.protector-card h2,
.protector-card label,
.protector-card span {
    color: var(--text-light);
}

.header-icon {
    font-size: 3rem;
    color: var(--accent-primary);
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* --- PASSWORD DISPLAY --- */
.password-display-container {
    background-color: #0f172a;
    border: 1px solid #475569;
    border-radius: 8px;
    position: relative;
}

.password-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem;
    font-weight: 600; /* Bolder text */
    letter-spacing: 1px;
    color: var(--accent-primary);
    width: 100%;
    background: transparent;
    border: none;
}

.password-text:focus {
    outline: none;
}

.btn-copy {
    color: #cbd5e1; /* Lighter grey for copy icon */
}
.btn-copy:hover {
    color: var(--text-light);
}

/* --- STRENGTH METER --- */
.strength-meter {
    height: 6px;
    background-color: #334155;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* --- CONTROLS --- */
.form-check-input {
    border-color: #64748b; /* Visible border for checkboxes */
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.form-check-label {
    font-size: 1.05rem; /* Slightly larger labels */
    cursor: pointer;
}

/* --- MAIN BUTTON --- */
.btn-generate {
    background: linear-gradient(135deg, var(--accent-primary), #0284c7);
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px;
    font-size: 1.1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    color: white; /* Ensure button text is white */
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
    color: white;
}

.btn-generate:active {
    transform: translateY(0);
}