@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
html { box-sizing: border-box; height: 100%; }

html *, html ::before, html ::after { box-sizing: inherit; }

body { -webkit-font-smoothing: antialiased; height: 100%; margin: 0; background: linear-gradient(160deg, #0a0f0d, #030a06); font-family: "Poppins", sans-serif; }

.auth-background { position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(160deg, #0a0f0d 0%, #0a0f0d 30%, #060d14 60%, #030a06 100%); overflow: hidden; }

.auth-background-orb { position: absolute; filter: blur(100px); border-radius: 50%; }

.auth-background-orb:nth-child(1) { top: -15%; left: -5%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 191, 101, 0.18) 0%, transparent 70%); animation: auth-orb-drift-1 25s ease-in-out infinite; }

.auth-background-orb:nth-child(2) { right: -10%; bottom: -15%; width: 550px; height: 550px; background: radial-gradient(circle, rgba(45, 141, 252, 0.12) 0%, transparent 70%); animation: auth-orb-drift-2 30s ease-in-out infinite; }

.auth-background-orb:nth-child(3) { top: 40%; left: 45%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(91, 221, 170, 0.1) 0%, transparent 70%); animation: auth-orb-drift-3 20s ease-in-out infinite; }

.auth-background-curves { pointer-events: none; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; animation: auth-curves-fadeout 16s ease-in forwards; }

@keyframes auth-curves-fadeout { 0% { opacity: 0.3; }
  50% { opacity: 0.2; }
  100% { opacity: 0; } }

.auth-background-grid { pointer-events: none; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; }

.auth-background-particles { pointer-events: none; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.auth-background-particle { position: absolute; bottom: -10px; background: #5bddaa; border-radius: 50%; animation: auth-particle-rise linear infinite; }

@keyframes auth-particle-rise { 0% { opacity: 0;
    transform: translateY(0) translateX(0); }
  10% { opacity: 0.5; }
  90% { opacity: 0.1; }
  100% { opacity: 0;
    transform: translateY(-100vh) translateX(var(--drift, 0px)); } }

@keyframes auth-orb-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, 40px) scale(1.05); }
  50% { transform: translate(20px, 80px) scale(0.95); }
  75% { transform: translate(-40px, 30px) scale(1.02); } }

@keyframes auth-orb-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, -30px) scale(1.03); }
  50% { transform: translate(-80px, -60px) scale(0.97); }
  75% { transform: translate(-20px, -80px) scale(1.04); } }

@keyframes auth-orb-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-70px, -50px) scale(1.06); }
  66% { transform: translate(50px, -30px) scale(0.94); } }

.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; }

@media (max-width: 992px) { .auth-layout { grid-template-columns: 1fr; } }

.auth-branding { display: flex; position: relative; align-items: center; justify-content: flex-end; padding: 3rem 5rem 3rem 3rem; overflow: hidden; }

@media (max-width: 992px) { .auth-branding { display: none; } }

.auth-branding-content { position: relative; z-index: 1; text-align: center; }

.auth-branding-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; padding: 0.4rem 1.2rem; color: #5bddaa; text-transform: uppercase; letter-spacing: 0.15em; font-family: "Lora", serif; font-size: 0.78rem; font-weight: 500; border: 1px solid rgba(91, 221, 170, 0.2); border-radius: 100px; animation: auth-fade-in-up 0.8s ease 0.2s both; }

.auth-branding-badge-line { display: block; width: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(91, 221, 170, 0.5)); }

.auth-branding-badge-line:last-child { background: linear-gradient(90deg, rgba(91, 221, 170, 0.5), transparent); }

.auth-branding-title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 1rem; background: linear-gradient(135deg, #3bbf65 0%, #5bddaa 50%, #2d8dfc 100%); background-clip: text; font-family: "Lora", serif; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; animation: auth-fade-in-up 0.8s ease 0.4s both; }

.auth-branding-description { margin: 0; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; line-height: 1.9; font-size: 1rem; animation: auth-fade-in-up 0.8s ease 0.6s both; }

.auth-form-panel { display: flex; position: relative; z-index: 1; align-items: center; justify-content: flex-start; padding: 2rem 2rem 2rem 5rem; }

@media (max-width: 992px) { .auth-form-panel { justify-content: center; min-height: 100vh; min-height: 100svh; padding: 2rem; } }

.auth-completed-card, .auth-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 0 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: auth-card-appear 0.6s ease both; }

@media (max-width: 576px) { .auth-completed-card, .auth-card { padding: 2rem 1.5rem; border-radius: 12px; } }

.auth-completed-title, .auth-card-title { color: rgba(255, 255, 255, 0.9); font-family: "Lora", serif; font-size: 1.6rem; font-weight: 600; }

@media (max-width: 576px) { .auth-completed-title, .auth-card-title { font-size: 1.3rem; } }

.auth-card { width: 100%; max-width: 440px; padding: 2.5rem; }

.auth-card-header { margin-bottom: 2rem; text-align: center; }

.auth-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1rem; background: rgba(59, 191, 101, 0.1); border: 1px solid rgba(59, 191, 101, 0.2); border-radius: 12px; }

.auth-card-icon svg { width: 24px; height: 24px; color: #5bddaa; }

.auth-card-title { margin: 0 0 0.4rem; }

.auth-card-subtitle { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }

.auth-form { display: flex; flex-direction: column; }

.auth-field-group { margin-bottom: 1.25rem; }

.auth-field-label { display: block; margin-bottom: 0.4rem; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; font-weight: 500; transition: color 0.2s ease; }

.auth-field-help { margin-top: 0.35rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em; font-size: 0.75rem; font-weight: 400; }

.auth-field-input-wrapper { position: relative; }

.auth-field-input-wrapper input { display: block; width: 100%; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); font-family: "Poppins", sans-serif; font-size: 0.95rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; outline: none; transition: all 0.25s ease; }

.auth-field-input-wrapper input::placeholder { color: rgba(255, 255, 255, 0.5); }

.auth-field-input-wrapper input:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); }

.auth-field-input-wrapper input:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(91, 221, 170, 0.5); box-shadow: 0 0 0 3px rgba(91, 221, 170, 0.1); }

.auth-field-group-error .auth-field-label { color: #e74c3c; }

.auth-field-group-error .auth-field-input-wrapper input { border-color: rgba(231, 76, 60, 0.5); }

.auth-field-group-error .auth-field-input-wrapper input:focus { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15); }

.auth-field-error { margin-top: 0.4rem; }

.auth-field-error span { display: block; color: #e74c3c; font-size: 0.8rem; animation: auth-error-appear 0.3s ease both; }

.auth-field-group:focus-within .auth-field-label { color: #5bddaa; }

.auth-field-shake { animation: auth-shake 0.4s ease; }

.auth-submit-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 1.5rem; padding: 0.85rem 2rem; color: white; background: linear-gradient(135deg, rgba(59, 191, 101, 0.9) 0%, rgba(59, 191, 101, 0.7) 100%); letter-spacing: 0.06em; font-family: "Lora", serif; font-size: 1rem; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: all 0.35s ease; }

.auth-submit-button svg { width: 18px; height: 18px; transition: transform 0.3s ease; }

.auth-submit-button:hover { background: linear-gradient(135deg, #3bbf65 0%, rgba(91, 221, 170, 0.9) 100%); box-shadow: 0 8px 32px rgba(59, 191, 101, 0.35), 0 0 60px rgba(59, 191, 101, 0.15); transform: translateY(-2px); }

.auth-submit-button:hover svg { transform: translateX(4px); }

.auth-submit-button:active { box-shadow: 0 4px 16px rgba(59, 191, 101, 0.3); transform: translateY(0); }

@media (max-width: 576px) { .auth-submit-button { padding: 0.75rem 1.5rem; } }

.auth-card-footer { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.auth-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.85rem; transition: all 0.2s ease; }

.auth-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }

.auth-link:hover { color: #5bddaa; }

.auth-link:hover svg { transform: translateX(3px); }

.auth-link-muted { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }

@keyframes auth-fade-in-up { from { opacity: 0;
    transform: translateY(20px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes auth-card-appear { from { opacity: 0;
    transform: translateY(30px) scale(0.98); }
  to { opacity: 1;
    transform: translateY(0) scale(1); } }

@keyframes auth-error-appear { from { opacity: 0;
    transform: translateY(-4px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes auth-shake { 0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); } }

.auth-completed-layout { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 2rem; }

.auth-completed-card { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 3rem 2.5rem; text-align: center; }

@media (max-width: 576px) { .auth-completed-card { padding: 2.5rem 1.5rem; } }

.auth-completed-icon-wrapper { display: inline-flex; position: relative; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 1.5rem; }

.auth-completed-icon { display: flex; position: relative; z-index: 1; align-items: center; justify-content: center; width: 64px; height: 64px; background: rgba(59, 191, 101, 0.15); border-radius: 50%; animation: auth-completed-check-appear 0.5s ease 0.3s both; }

.auth-completed-icon svg { fill: none; stroke: #5bddaa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 32px; height: 32px; }

.auth-completed-icon-ring { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; border: 2px solid rgba(91, 221, 170, 0.4); border-radius: 50%; animation: auth-completed-ring-expand 0.8s ease 0.5s both; transform: translate(-50%, -50%); }

.auth-completed-title { margin: 0 0 1rem; animation: auth-fade-in-up 0.6s ease 0.4s both; }

.auth-completed-message { margin: 0 0 0.5rem; color: rgba(255, 255, 255, 0.9); font-size: 1rem; animation: auth-fade-in-up 0.6s ease 0.5s both; }

.auth-completed-message strong { color: #5bddaa; }

.auth-completed-description { margin: 0 0 2rem; color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; animation: auth-fade-in-up 0.6s ease 0.6s both; }

.auth-completed-button { animation: auth-fade-in-up 0.6s ease 0.7s both; }

@keyframes auth-completed-check-appear { from { opacity: 0;
    transform: scale(0.5); }
  to { opacity: 1;
    transform: scale(1); } }

@keyframes auth-completed-ring-expand { from { opacity: 0.8;
    transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0;
    transform: translate(-50%, -50%) scale(2.5); } }