/* Auth page styles: depends on base.css for variables, resets, header/nav, buttons, and utilities */

/* Layout */
.main{
  min-height:calc(100% - 64px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 16px;
}

/* Card */
.card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.card h1{font-size:32px; margin:14px 0 24px 0; color:#0b1222}

/* Form */
.form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.label{display:none}
.input{
  width:100%;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:var(--input-bg);
  font-size:16px;
  outline:none;
}
.input:focus{border-color:#4263EB; box-shadow:0 0 0 3px rgba(66,99,235,.15)}

/* Validation */
.error-text{
  color:var(--error);
  font-size:12px;
  text-align:left;
  margin-top:-10px;
  margin-bottom:-10px;
  margin-left:5px;
}
.error-text:empty{display:none}

/* Misc */
.checkbox-row{display:flex; align-items:center; gap:10px; text-align:left; color:#111827}
.checkbox-row input{width:18px;height:18px}
.checkbox-row a{color:var(--brand); text-decoration:none}
.checkbox-row a:hover{text-decoration:underline}

.bottom{margin-top:16px}
.bottom a{color:var(--brand); text-decoration:none}
.bottom a:hover{text-decoration:underline}

/* Mobile */
@media (max-width: 600px){
  .card h1{font-size:24px}
  .main{padding:28px 12px}
}