:root {
  --auth-dark:        #00023f;
  --auth-darker-blue: #0156bb;
  --auth-mid-blue:    #0281d8;
  --auth-lighter-blue:#02aeec;
  --auth-white:       #f8f9fa;
  --auth-gray:        #6c757d;
  --auth-green:       #28a745;
  --auth-red:         #d9534f;
  --auth-orange:      #ff7600;
  --auth-border:      #c7d7e8;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', Arial, sans-serif; }

body, html {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--auth-white);
  padding-top: 20px;
  padding-bottom: 20px;
}

.auth-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-box {
  width: 100%;
  max-width: 440px;
  padding: 36px 40px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
  text-align: center;
}

.auth-logo { width: 120px; height: auto; margin-bottom: 12px; }

.auth-title {
  color: var(--auth-darker-blue);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.auth-switch-text { font-size: 0.85rem; color: var(--auth-gray); margin-top: 12px; }

.auth-message-area { padding: 20px 0; }
.auth-message-area h3 { color: var(--auth-darker-blue); }

.auth-footer { margin-top: 16px; font-size: 0.75rem; color: var(--auth-gray); }

.auth-legal { font-size: 0.7rem; color: var(--auth-gray); margin-top: 16px; }

/* Inputs */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid var(--auth-border);
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
form input:focus { border-color: var(--auth-mid-blue); }

/* Primary button */
.primary-btn {
  width: 100%;
  padding: 11px;
  margin-top: 14px;
  background-color: var(--auth-mid-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.primary-btn:hover { background-color: var(--auth-orange); }

/* Social buttons */
.social-login { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--auth-mid-blue);
  border-radius: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--auth-darker-blue);
  transition: background-color 0.2s;
}
.social-btn:hover { background-color: var(--auth-lighter-blue); color: #fff; }

/* Links */
.link-highlight {
  color: var(--auth-mid-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.link-highlight:hover { color: var(--auth-orange); text-decoration: underline; }

/* Spinner */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--auth-mid-blue);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.font-7 { font-size: 0.7rem; }
.font-9 { font-size: 0.9rem; }