/* CT Resource Page -- shared auth gate styles
 *
 * Drop this in via <link rel="stylesheet" href="/auth-gate.css"> before
 * your page-specific styles. The page can override any of these (they're
 * scoped to .auth-gate-* classes and a few specific IDs).
 *
 * Variables fall through to the page's --bg / --surface / --border / --text
 * / --muted / --green / --shadow if defined. Sensible defaults otherwise.
 */

:root {
  --ag-bg:      var(--bg, #EFF1EC);
  --ag-surface: var(--surface, #ffffff);
  --ag-border:  var(--border, #DFE2DA);
  --ag-text:    var(--text, #1A2332);
  --ag-muted:   var(--muted, #6b7a8d);
  --ag-green:   var(--green, #78C832);
  --ag-shadow:  var(--shadow, 0 1px 3px rgba(0,0,0,0.08));
}

#loginScreen,
#changePasswordScreen {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--ag-bg);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

.auth-card {
  background: var(--ag-surface);
  border: 1px solid var(--ag-border);
  border-radius: 10px;
  padding: 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--ag-shadow);
}

.auth-card h2 {
  font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
  font-size: 22px;
  color: var(--ag-text);
  margin: 0 0 8px;
}

.auth-card p {
  color: var(--ag-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.auth-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ag-muted);
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ag-border);
  border-radius: 6px;
  background: var(--ag-surface);
  color: var(--ag-text);
  font-family: inherit;
  font-size: 14px;
}

.auth-card input:focus {
  outline: 2px solid var(--ag-green);
  outline-offset: -1px;
}

.auth-card .btn-auth {
  width: 100%;
  margin-top: 20px;
  padding: 10px 16px;
  background: var(--ag-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.auth-card .btn-auth:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-card .auth-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.auth-card .auth-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ag-muted);
  line-height: 1.5;
}