/* css/auth.css */
:root {
    /* Default colors, will be overridden by JS based on selected theme */
    --bg-color: #121212;
    --auth-container-bg: #1f1f1f;
    --text-color: #ffffff;
    --accent-color: #4caf50;
    --input-bg: #333;
    --border-color: #555;
    --font-main: 'Verdana', sans-serif;
}

body.auth-page {
    font-family: var(--font-main);
    background-color: var(--bg-color); 
    color: var(--text-color);
    display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;
    transition: background-color 0.3s, color 0.3s;
}
.auth-container {
    background-color: var(--auth-container-bg); 
    padding: 40px; border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5); 
    width: 100%; max-width: 400px; 
    border: 2px solid var(--accent-color);
}
h1.auth-title {
    font-family: 'Press Start 2P', cursive; 
    color: var(--accent-color); 
    text-align: center; margin-bottom: 30px; font-size: 18px; line-height: 1.5;
}
.form-group { margin-bottom: 20px; position: relative; }
label { display: block; margin-bottom: 8px; color: var(--text-color); opacity: 0.8; }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="text"], input[type="password"] {
    width: 100%; padding: 12px 40px 12px 12px; font-size: 16px; 
    border: 1px solid var(--border-color);
    background-color: var(--input-bg); 
    color: var(--text-color); 
    border-radius: 4px; box-sizing: border-box;
}
input:focus { outline: none; border-color: var(--accent-color); }
.checkbox-group { display: flex; align-items: center; margin-bottom: 20px; }
.checkbox-group label { margin-bottom: 0; margin-left: 10px; }
button.submit-btn {
    width: 100%; padding: 12px; 
    background-color: var(--accent-color); 
    color: var(--bg-color); 
    border: none; border-radius: 4px; font-size: 18px; cursor: pointer; transition: 0.3s; font-weight: bold;
}
button.submit-btn:hover { opacity: 0.8; }
.auth-links { text-align: center; margin-top: 20px; }
.auth-links a { color: var(--accent-color); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
#error-message {
    color: #f44336; background-color: rgba(244, 67, 54, 0.2);
    padding: 10px; border-radius: 4px; margin-bottom: 20px; display: none;
}

.toggle-password {
    position: absolute; 
    right: 10px; 
    top: 42px; 
    cursor: pointer; 
    color: #888;
}
.toggle-password:hover { color: var(--accent-color); }