.auth-shell { min-height: 100vh; background: linear-gradient(135deg, #f5f1e8 0%, #e8e0d5 100%); display: flex; align-items: center; justify-content: center; padding: 2rem; } .auth-container { width: 100%; max-width: 480px; } .auth-header { text-align: center; margin-bottom: 2rem; } .auth-logo { display: inline-flex; flex-direction: column; text-decoration: none; color: #2d3e2f; } .logo-main { font-family: 'DM Serif Display', serif; font-size: 2rem; font-weight: 400; letter-spacing: 0.02em; } .logo-sub { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; letter-spacing: 0.15em; opacity: 0.7; margin-top: -0.25rem; } .auth-card { background: rgba(255, 255, 255, 0.95); border-radius: 24px; padding: 3rem 2.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); } .auth-title { font-family: 'DM Serif Display', serif; font-size: 2rem; font-weight: 400; color: #2d3e2f; margin: 0 0 0.5rem 0; text-align: center; } .auth-subtitle { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; color: #6b7b6d; margin: 0 0 2rem 0; text-align: center; line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-label { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500; color: #2d3e2f; letter-spacing: 0.01em; } .form-input { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; padding: 0.875rem 1rem; border: 1.5px solid #d8d0c4; border-radius: 12px; background: #ffffff; color: #2d3e2f; transition: all 0.3s ease; outline: none; } .form-input:focus { border-color: #7ba88a; box-shadow: 0 0 0 3px rgba(123, 168, 138, 0.1); } .form-input::placeholder { color: #a8b5aa; } .form-error { font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #d64545; margin-top: -0.5rem; padding-left: 0.25rem; } .auth-button { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; font-weight: 500; padding: 1rem 2rem; background: linear-gradient(135deg, #7ba88a 0%, #5d8a6f 100%); color: white; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; margin-top: 0.5rem; letter-spacing: 0.02em; } .auth-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(123, 168, 138, 0.3); } .auth-button:active:not(:disabled) { transform: translateY(0); } .auth-button:disabled { opacity: 0.6; cursor: not-allowed; } .auth-footer { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e8e0d5; text-align: center; } .auth-footer p { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; color: #6b7b6d; margin: 0; } .auth-link { color: #7ba88a; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .auth-link:hover { color: #5d8a6f; text-decoration: underline; } @media (max-width: 640px) { .auth-shell { padding: 1rem; } .auth-card { padding: 2rem 1.5rem; } .auth-title { font-size: 1.75rem; } }