/* auth.css: стили для экранов авторизации */

#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--color-bg) 0%, #E3F2FD 100%);
}

.auth-container {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  width: 100%;
  max-width: 525px; /* было 420px, увеличение на 25% */
  box-sizing: border-box;
}

.auth-container h1 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 2.5em; /* было 2em, увеличение на 25% */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-align: center;
}

.auth-container h2 {
  margin: 0 0 var(--space-lg) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}

.auth-field {
  margin-bottom: var(--space-md);
}

.auth-field label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.auth-field input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  height: var(--button-height-md);
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.auth-field small {
  display: block;
  margin-top: var(--space-xs);
  color: #666;
  font-size: 15px; /* было 12px, увеличение на 25% */
}

.auth-error {
  color: var(--color-danger);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  min-height: 25px; /* было 20px, увеличение на 25% */
  text-align: center;
}

.btn-block {
  width: 100%;
  margin-top: var(--space-md);
}

.auth-footer {
  margin-top: var(--space-lg);
  text-align: center;
}

.auth-footer p {
  margin: 0;
  color: #666;
  font-size: var(--font-size-base);
}

.auth-footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.auth-footer a:hover {
  text-decoration: underline;
}