/* Auth pages (login, register, forgot-password, reset-password) */
body {
  margin:0; background: var(--bg); color: var(--text);
  font:16px/1.5 system-ui, Segoe UI, Inter, Roboto, Arial, sans-serif;
  display:grid; place-items:center; min-height:100vh;
}
.card{ background:var(--panel); border:1px solid var(--border); border-radius:12px;
       padding:2rem; width:100%; max-width:420px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
.brand{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:1.5rem; color:var(--brand); }
.brand h1{ margin:0; font-size:24px; color:var(--text); }
h1{ text-align:center; margin-top:0; }

.form-group{ margin-bottom:1rem; }
label{ display:block; font-weight:500; margin-bottom:.5rem; }
input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:16px; box-sizing:border-box; }

.btn{ width:100%; background:var(--brand); color:#fff; border:0; padding:12px; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; transition: background .2s; }
.btn:hover{ background:var(--brand-600); }
.btn:disabled{ opacity:.75; cursor:default; }

.message{ text-align:center; margin-top:1rem; padding:10px; border-radius:8px; font-size:14px; }
.message.error{ background:#fee2e2; color:#991b1b; }
.message.success{ background:#dcfce7; color:#166534; }

.links{ display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; font-size:14px; }
.links a{ color:var(--brand); text-decoration:none; font-weight:500; }

.login-link, .register-link{ text-align:center; margin-top:1.5rem; font-size:14px; }
.login-link a, .register-link a{ color:var(--brand); text-decoration:none; font-weight:500; }

.error-message{ color:var(--bad); font-size:14px; margin-top:4px; min-height:1.2em; }
#general-error{ text-align:center; margin-bottom:1rem; }

/* keep "Forgot Password?" on one line */
.nowrap { white-space: nowrap; }

.card > .brand{padding:0;border:0;}
.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.label-row a{font-size:14px;font-weight:500;text-decoration:none;color:var(--brand);}
.label-row a:hover{text-decoration:underline;}

/* Media query */
@media (min-width: 901px) {
    body {
        /* Ensure the body remains a grid container */
        display: grid;
        place-items: center; /* This should center the card vertically and horizontally */
    }

    .card {
         /* Explicitly set margins for horizontal centering if place-items isn't enough */
        margin-left: auto;
        margin-right: auto;
         /* You might adjust max-width if needed */
        max-width: 420px; /* Keep this or adjust as desired */
    }
}

/* Ensure the base rule for body doesn't conflict */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, Segoe UI, Inter, Roboto, Arial, sans-serif;
    display: grid; /* Keep display grid */
    place-items: center; /* Keep place-items */
    min-height: 100vh;
}