.auth-page{min-height:calc(100vh - var(--header-height));padding:var(--space-2xl)var(--space-md);background-color:var(--color-offwhite);background-image:url(/images/auth-bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;display:flex}.auth-container{-webkit-backdrop-filter:blur(10px);width:100%;max-width:480px;padding:var(--space-3xl)var(--space-2xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);text-align:center;background:#fffffff2;border:1px solid #ffffff80;animation:.4s ease-out fadeInUp;position:relative;overflow:hidden}.auth-container:before{content:"";background:linear-gradient(90deg,var(--color-muga-gold),var(--color-deep-crimson),var(--color-turquoise));height:6px;position:absolute;top:0;left:0;right:0}.auth-title{margin-bottom:var(--space-sm);color:var(--color-deep-crimson);font-size:var(--text-3xl)}.auth-subtitle{color:var(--color-charcoal);margin-bottom:var(--space-2xl);opacity:.8;font-size:var(--text-lg);line-height:1.5}.auth-form{gap:var(--space-xl);text-align:left;flex-direction:column;display:flex}.form-group{gap:var(--space-xs);flex-direction:column;display:flex}.auth-error{color:var(--color-error);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);text-align:left;align-items:center;gap:var(--space-sm);background-color:#fef2f2;border:1px solid #fee2e2;display:flex}.auth-error:before{content:"⚠️"}.auth-success{color:var(--color-success);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);text-align:left;align-items:center;gap:var(--space-sm);background-color:#ecfdf5;border:1px solid #d1fae5;display:flex}.auth-success:before{content:"✅"}.auth-footer{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border-light);font-size:var(--text-base);color:var(--color-charcoal)}.auth-link{color:var(--color-deep-crimson);transition:all var(--transition-fast);border-bottom:2px solid #0000;font-weight:600;text-decoration:none}.auth-link:hover{color:var(--color-deep-crimson-hover);border-bottom-color:var(--color-deep-crimson)}.btn-full{width:100%}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@property --input-border{syntax:"<color>";inherits:false;initial-value:#e2e8f0}