* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f5f5f5, #d9e4ec); }
body.noscroll { overflow: hidden; }

.login-container { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 100%; max-width: 380px; text-align: center; }

.login-container h1 { font-size: 1.8rem; margin-bottom: 1rem; color: #333; }
.login-container p { font-size: 1rem; margin-bottom: 1.5rem; color: #666; }

.form-group { margin-bottom: 1rem; text-align: left; }
.form-group label { font-size: 1.2rem; color: #333; display: block; margin-bottom: 0.3rem; }
.form-group input { width: 100%; padding: 0.7rem; border: 1px solid #ccc; border-radius: 0.5rem; font-size: 1rem; }
.form-group input:focus { border-color: #007bff; outline: none; }

.btn-login { width: 100%; padding: 0.8rem; background: #007bff; color: #fff; border: none; border-radius: 0.5rem; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
.btn-login:hover { background: #0056b3; }

.extra-links { margin-top: 1rem; font-size: 0.85rem; }
.extra-links a { color: #007bff; text-decoration: none; }
.extra-links a:hover { text-decoration: underline; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); padding: 1rem; z-index: 50; }
.modal[aria-hidden="false"] { display: flex; }

.modal-dialog { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 1.25rem; transform: translateY(10px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.modal[aria-hidden="false"] .modal-dialog { transform: translateY(0); opacity: 1; }

.modal-close { position: absolute; right: 1rem; top: 1rem; border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; }

.modal h2 { font-size: 1.25rem; margin: .25rem 0 .5rem; color: #222; text-align: left; }
.modal p { font-size: .95rem; color: #555; margin-bottom: 1rem; text-align: left; }

.modal-actions { display: flex; justify-content: flex-end; }
.btn-primary { padding: .7rem 1rem; border: none; border-radius: .5rem; background: #007bff; color: #fff; cursor: pointer; font-size: .95rem; }
.btn-primary:hover { background: #0056b3; }

/* Responsive tweaks */
@media (max-width: 480px) {
  .login-container { padding: 1.5rem; }
  .login-container h1 { font-size: 1.5rem; }
  .modal-dialog { padding: 1rem; border-radius: .75rem; }
}