.login-container {
   background: var(--background-card);
   padding: var(--spacing-xl);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow);
   width: 100%;
   max-width: 400px;
   transition: box-shadow 0.3s ease;
   margin: 0 auto;
}

.login-container:hover {
   box-shadow: var(--shadow-hover);
}

.login-header {
   text-align: center;
   margin-bottom: var(--spacing-lg);
}

.login-title {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--primary-color);
   margin-bottom: var(--spacing-xs);
}

.login-subtitle {
   font-size: var(--font-size-base);
   color: var(--text-secondary);
   font-weight: var(--font-weight-normal);
}

.login-form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
}

.form-label {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--text-primary);
}

.form-input {
   padding: var(--spacing-sm);
   border: 2px solid var(--border-color);
   border-radius: var(--border-radius);
   font-size: var(--font-size-base);
   font-family: var(--font-family);
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
   background: var(--background-card);
}

.form-input:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(44, 120, 115, 0.1);
}

.form-input::placeholder {
   color: var(--text-secondary);
}

.login-options {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: var(--spacing-sm) 0;
}

.checkbox-group {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
}

.checkbox-input {
   width: 16px;
   height: 16px;
   accent-color: var(--primary-color);
}

.checkbox-label {
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   cursor: pointer;
}

.forgot-link {
   font-size: var(--font-size-sm);
   color: var(--primary-color);
   text-decoration: none;
   transition: color 0.3s ease;
}

.forgot-link:hover {
   color: var(--primary-hover);
   text-decoration: underline;
}

.login-button {
   background: var(--primary-color);
   color: white;
   border: none;
   padding: var(--spacing-sm) var(--spacing-lg);
   border-radius: var(--border-radius);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family);
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-button:hover {
   background: var(--primary-hover);
   transform: translateY(-1px);
}

.login-button:active {
   transform: translateY(0);
}

.login-footer {
   text-align: center;
   margin-top: var(--spacing-lg);
   padding-top: var(--spacing-md);
   border-top: 1px solid var(--border-color);
}

.footer-text {
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
}

.admin-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   background: var(--accent-color);
   color: var(--text-primary);
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   margin-bottom: var(--spacing-md);
}

/* Адаптивность */
@media (max-width: 480px) {
   .login-container {
      padding: var(--spacing-lg);
      margin: var(--spacing-sm);
   }

   .login-title {
      font-size: var(--font-size-lg);
   }

   .login-options {
      flex-direction: column;
      gap: var(--spacing-sm);
      align-items: stretch;
   }

   .checkbox-group {
      justify-content: center;
   }
}

@media (max-width: 320px) {
   .login-container {
      padding: var(--spacing-md);
   }

   .form-input,
   .login-button {
      padding: var(--spacing-sm);
   }
}