/* Login/auth card */
 .auth-card {
   max-width: 420px;
   margin: 50px auto;
   padding: 24px 24px 16px;
   background-color: #0b0f10;          /* subtle contrast with page bg */
   border: 1px solid #292929;          /* faint outline */
   border-radius: 12px;                /* soft corners */
   box-shadow: 0 10px 24px rgba(0,0,0,0.35);
 }

 .auth-card h1 {
   margin: 0 0 12px 0;
   text-align: center;
 }

 /* Make every control get its own line */
 #login-form input,
 #login-form button {
   display: block;                     /* one per line */
   width: 100%;                        /* full width in the card */
   box-sizing: border-box;             /* include padding in width */
   margin: 10px 0;                     /* vertical spacing */
   font-size: 16px;
 }

 /* Inputs */
 #login-form input {
   padding: 12px 14px;
   background: #0e0e0e;
   color: #EEEEEEDD;
   border: 1px solid #333;
   border-radius: 8px;
 }

 /* Primary (Login) button */
 #login-form button {
   padding: 12px 14px;
   font-weight: bold;
   border-radius: 8px;
   cursor: pointer;
   background: #2a7ef0;
   color: #fff;
   border: none;
 }
 #login-form button:hover {
   background: #1b6fe6;
 }

 /* Secondary (Reset password) button */
 #reset-password {
   padding: 12px 14px;
   border-radius: 8px;
   cursor: pointer;
   background: transparent;
   color: #2a7ef0;
   border: 1px solid #2a7ef0;
 }
 #reset-password:hover {
   background: rgba(42, 126, 240, 0.12);
 }

 /* Keep space for messages inside the card */
 #message {
   min-height: 1.2em;
   margin-top: 8px;
   text-align: center;
 }