/* Axion Radar — styles shared by the login page (index.php) and the password reset page
   (forgot_password.php). Each page loads this first, then its own file. */

:root {
    --accent: #10b981;
    --accent-hover: #059669;
    --bg: #0f1115;
    --panel: #161b22;
    --border: #30363d;
    --text-main: #c9d1d9;
    --text-dim: #8b949e;
    --axion-red: #E60005;
}

html { height: 100%; }

body {
    background-color: var(--bg); color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; min-height: 100dvh; margin: 0; padding: 16px; box-sizing: border-box;
}

.login-container {
    background-color: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 36px; width: 100%; max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); text-align: center;
    max-height: 100%; overflow-y: auto; box-sizing: border-box;
}

.logo-main { max-width: 200px; margin-bottom: 10px; }

.logo-sub  { max-width: 110px; opacity: 0.6; margin-bottom: 22px; }

@media (max-width: 480px) {
    .login-container { padding: 28px 22px; }
    .logo-main { max-width: 160px; }
    .logo-sub { max-width: 90px; margin-bottom: 16px; }
}

.form-group { margin-bottom: 16px; text-align: left; }

.form-group label {
    display: block; font-size: 13px; color: var(--text-dim);
    margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}

.form-group input {
    width: 100%; padding: 12px; background-color: #0d1117;
    border: 1px solid var(--border); border-radius: 6px; color: #fff;
    box-sizing: border-box; font-size: 15px; transition: border-color 0.2s;
}

.form-group input:focus { outline: none; border-color: var(--accent); }

.btn-submit {
    width: 100%; background-color: var(--accent); color: #000;
    border: none; padding: 14px; border-radius: 6px; font-size: 15px;
    font-weight: bold; cursor: pointer; margin-top: 10px; transition: background-color 0.2s;
}

.btn-submit:hover { background-color: var(--accent-hover); }

.btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-back {
    background: none; border: none; color: var(--text-dim); font-size: 13px;
    cursor: pointer; margin-top: 16px; text-decoration: underline; display: block; width: 100%;
}

.btn-back:hover { color: var(--text-main); }

.btn-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,0.3); border-top-color: #000;
    border-radius: 50%; animation: spin 0.7s linear infinite;
    vertical-align: middle; margin-right: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-message {
    color: var(--axion-red); background: rgba(230,0,5,0.1);
    border: 1px solid rgba(230,0,5,0.3); padding: 10px; border-radius: 6px;
    font-size: 13px; margin-bottom: 20px; font-weight: 600;
}

.success-message {
    color: var(--accent); background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3); padding: 10px; border-radius: 6px;
    font-size: 13px; margin-bottom: 20px; font-weight: 600;
}

.shield-icon { font-size: 36px; margin-bottom: 12px; }