:root {
  --auth-maxw: 420px;
}

.auth-wrap {
  max-width: var(--auth-maxw);
  margin: 8vh auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.auth-title { margin: 0 0 12px; text-align:center }
.auth-sub { margin: 0 0 16px; color: #6b7280; font-size: 14px; text-align:center }

.auth-form { display: grid; gap: 12px; }
.auth-form label { display:block; font-size:13px; color:#374151; margin-bottom:6px; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="date"],
.auth-form input[type="hidden"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  font: inherit;
  box-sizing: border-box;
}
.auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.btn { width: 100%; padding: 10px 12px; border-radius: 8px; }
.btn.ghost { width: auto; }

/* Google button container takes full width of form */
.gsi-container { display:flex; justify-content:center; width: 100%; }
.divider { margin: 10px 0; }

.error { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; padding: 8px 10px; border-radius: 8px; font-size: 14px; display:none }
.success { color: #065f46; background: #d1fae5; border: 1px solid #a7f3d0; padding: 8px 10px; border-radius: 8px; font-size: 14px; display:none }

.divider { display:flex; align-items:center; gap:10px; color:#6b7280; font-size:12px; margin: 10px 0 }
.divider:before, .divider:after { content:""; flex:1; height:1px; background: var(--border); }

.links { display:flex; justify-content:space-between; font-size:12px; color:#2563eb }
.links a { color:#2563eb; text-decoration:none; }
.links a:hover { text-decoration:underline; }


/* File input button styling (Register and Profile pages) */
.auth-form input[type="file"] {
  width: 100%;
}
.auth-form input[type="file"]::file-selector-button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
}
/* Safari/older Chrome */
.auth-form input[type="file"]::-webkit-file-upload-button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
}
.auth-form input[type="file"]:hover::file-selector-button,
.auth-form input[type="file"]:hover::-webkit-file-upload-button {
  background: #1d4ed8;
}