:root { 
  --md-sys-color-primary: #6750a4; 
  --md-sys-color-on-primary: #ffffff; 
  --md-sys-color-primary-container: #ded7ea; 
  --md-sys-color-on-primary-container: #1d192b; 
  --md-sys-color-secondary: #7c3aed; 
  --md-sys-color-on-secondary: #ffffff; 
  --md-sys-color-surface: #ece7f6; 
  --md-sys-color-surface-container: #ded7ea; 
  --md-sys-color-surface-container-high: #ded7ea; 
  --md-sys-color-on-surface: #1d192b; 
  --md-sys-color-on-surface-variant: #49454f; 
  --md-sys-color-outline: #79747e; 
  --md-sys-color-outline-variant: #ded7ea; 
  --md-sys-color-background: #f5f0fb; 
  --md-sys-color-surface-tint: rgba(103, 80, 164, 0.08); 
  --md-sys-color-error: #b3261e; 
  --font-family-display: 'Fraunces', serif; 
  --font-family-body: 'Outfit', sans-serif; 
} 

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  -webkit-tap-highlight-color: transparent; 
} 

body { 
  font-family: var(--font-family-body); 
  background: radial-gradient(circle at top left, var(--md-sys-color-surface-tint) 0%, var(--md-sys-color-background) 80%); 
  background-color: var(--md-sys-color-background); 
  color: var(--md-sys-color-on-surface); 
  min-height: 100vh; 
  min-height: 100dvh; 
  overflow-x: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 24px; 
} 

.expressive-layout { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  max-width: 1200px; 
  min-height: 700px; 
  background-color: var(--md-sys-color-surface); 
  border-radius: 48px; 
  overflow: hidden; 
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8); 
} 

.expressive-hero { 
  flex: 1.2; 
  background-color: var(--md-sys-color-primary-container); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  padding: 48px; 
  overflow: hidden; 
} 

.organic-blob-container { 
  position: relative; 
  z-index: 2; 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
} 

.organic-blob { 
  position: absolute; 
  top: -100px; 
  left: -50px; 
  width: 380px; 
  height: 380px; 
  background-color: var(--md-sys-color-primary); 
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; 
  z-index: -1; 
  filter: blur(4px); 
  animation: blob-morph 12s ease-in-out infinite alternate; 
  opacity: 0.8; 
} 

.organic-blob-secondary { 
  position: absolute; 
  bottom: -80px; 
  right: -60px; 
  width: 250px; 
  height: 250px; 
  background-color: var(--md-sys-color-secondary); 
  border-radius: 60% 40% 30% 70% / 50% 40% 60% 50%; 
  z-index: -2; 
  filter: blur(8px); 
  animation: blob-morph-reverse 15s ease-in-out infinite alternate; 
  opacity: 0.5; 
} 

@keyframes blob-morph { 
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 
  50% { border-radius: 70% 30% 40% 60% / 60% 40% 50% 60%; } 
  100% { border-radius: 30% 70% 50% 40% / 50% 60% 40% 50%; } 
} 

@keyframes blob-morph-reverse { 
  0% { border-radius: 60% 40% 30% 70% / 50% 40% 60% 50%; } 
  50% { border-radius: 30% 70% 60% 40% / 40% 60% 50% 60%; } 
  100% { border-radius: 50% 50% 30% 70% / 70% 40% 40% 50%; } 
} 

.hero-title { 
  font-family: var(--font-family-display); 
  font-size: 72px; 
  font-weight: 800; 
  color: var(--md-sys-color-on-primary-container); 
  line-height: 0.95; 
  letter-spacing: -2px; 
  text-shadow: 0 10px 30px rgba(0,0,0,0.5); 
} 

.hero-subtitle { 
  font-size: 18px; 
  color: var(--md-sys-color-on-surface); 
  line-height: 1.5; 
  font-weight: 400; 
  max-width: 80%; 
  text-shadow: 0 4px 10px rgba(0,0,0,0.8); 
} 

.login-surface { 
  flex: 1; 
  background-color: var(--md-sys-color-surface-container-high); 
  padding: 64px 48px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

.form-container-inner { 
  width: 100%; 
  max-width: 400px; 
  display: flex; 
  flex-direction: column; 
  gap: 32px; 
} 

.m3-segmented-control { 
  display: flex; 
  background-color: var(--md-sys-color-surface-container); 
  border-radius: 9999px; 
  padding: 6px; 
  gap: 4px; 
} 

.segmented-btn { 
  flex: 1; 
  height: 52px; 
  border: none; 
  background: transparent; 
  color: var(--md-sys-color-on-surface-variant); 
  border-radius: 9999px; 
  font-family: inherit; 
  font-size: 16px; 
  font-weight: 700; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
  user-select: none; 
} 

.segmented-btn .tab-icon { 
  font-size: 22px; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.segmented-btn.active { 
  background-color: var(--md-sys-color-primary); 
  color: var(--md-sys-color-on-primary); 
  box-shadow: none; 
} 

.segmented-btn.active .tab-icon { 
  font-variation-settings: 'FILL' 1; 
} 

.segmented-btn:not(.active):hover { 
  background-color: var(--md-sys-color-surface-container-high); 
  color: var(--md-sys-color-on-surface); 
} 

.m3-google-btn { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 16px; 
  width: 100%; 
  height: 60px; 
  background-color: var(--md-sys-color-surface-container); 
  color: var(--md-sys-color-on-surface); 
  border: none; 
  border-radius: 9999px; 
  font-family: inherit; 
  font-size: 16px; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-google-btn:hover { 
  background-color: var(--md-sys-color-surface-container-high); 
} 

.m3-google-btn:active { 
  transform: scale(0.97); 
} 

.google-logo { 
  width: 24px; 
  height: 24px; 
  flex-shrink: 0; 
} 

.m3-divider-row { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
} 

.divider-line { 
  flex: 1; 
  height: 1px; 
  background-color: var(--md-sys-color-outline-variant); 
} 

.divider-text { 
  font-size: 14px; 
  color: var(--md-sys-color-outline); 
  font-weight: 600; 
  white-space: nowrap; 
} 

.login-form-area { 
  display: flex; 
  flex-direction: column; 
  gap: 24px; 
} 

.m3-field-group { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
} 

.m3-label-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
} 

.m3-field-label { 
  font-size: 15px; 
  font-weight: 600; 
  color: var(--md-sys-color-on-surface-variant); 
  padding-left: 12px; 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-field-group:focus-within .m3-field-label { 
  color: var(--md-sys-color-primary); 
} 

.m3-text-link { 
  background: none; 
  border: none; 
  color: var(--md-sys-color-primary); 
  font-family: inherit; 
  font-size: 14px; 
  font-weight: 700; 
  cursor: pointer; 
  padding: 6px 12px; 
  border-radius: 100px; 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-text-link:hover { 
  background-color: var(--md-sys-color-surface-tint); 
} 

.m3-field-wrapper { 
  position: relative; 
  display: flex; 
  align-items: center; 
} 

.m3-field-icon { 
  position: absolute; 
  left: 20px; 
  color: var(--md-sys-color-outline); 
  font-size: 24px; 
  pointer-events: none; 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-field-wrapper:focus-within .m3-field-icon { 
  color: var(--md-sys-color-primary); 
} 

.m3-input { 
  width: 100%; 
  height: 64px; 
  background-color: var(--md-sys-color-surface-container); 
  border: none; 
  border-radius: 20px; 
  padding: 0 56px 0 56px; 
  font-family: inherit; 
  font-size: 16px; 
  color: var(--md-sys-color-on-surface); 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-input:hover { 
  background-color: var(--md-sys-color-surface-container-high); 
} 

.m3-input:focus { 
  outline: none; 
  background-color: var(--md-sys-color-surface-container-high); 
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); 
} 

.m3-input::placeholder { 
  color: var(--md-sys-color-outline); 
  opacity: 0.8; 
} 

.m3-icon-btn { 
  position: absolute; 
  right: 12px; 
  background: none; 
  border: none; 
  color: var(--md-sys-color-outline); 
  width: 40px; 
  height: 40px; 
  border-radius: 100px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-icon-btn:hover { 
  background-color: var(--md-sys-color-surface-tint); 
  color: var(--md-sys-color-on-surface); 
} 

.m3-icon-btn span { 
  font-size: 24px; 
} 

.password-strength-container { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  padding: 0 12px; 
  margin-top: -6px; 
} 

.strength-bars { 
  display: flex; 
  gap: 8px; 
  height: 6px; 
} 

.strength-bar { 
  flex: 1; 
  height: 100%; 
  background-color: var(--md-sys-color-surface-container); 
  border-radius: 100px; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.strength-bar.active-weak { 
  background-color: var(--md-sys-color-error); 
} 

.strength-bar.active-medium { 
  background-color: var(--md-sys-color-primary-container); 
} 

.strength-bar.active-strong { 
  background-color: var(--md-sys-color-primary); 
} 

.strength-text { 
  font-size: 13px; 
  color: var(--md-sys-color-on-surface-variant); 
  font-weight: 600; 
} 

.m3-actions-row { 
  margin-top: 16px; 
} 

.m3-btn-cta { 
  width: 100%; 
  height: 64px; 
  border: none; 
  background-color: var(--md-sys-color-primary); 
  color: var(--md-sys-color-on-primary); 
  border-radius: 9999px; 
  font-family: inherit; 
  font-size: 18px; 
  font-weight: 800; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  cursor: pointer; 
  box-shadow: 0 8px 24px -8px rgba(212, 255, 0, 0.4); 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-btn-cta:hover { 
  filter: brightness(1.15); 
  box-shadow: 0 12px 32px -8px rgba(212, 255, 0, 0.6); 
  transform: translateY(-2px); 
} 

.m3-btn-cta:active { 
  transform: scale(0.96) translateY(0); 
  box-shadow: 0 4px 12px -4px rgba(212, 255, 0, 0.4); 
} 

.m3-btn-cta:disabled { 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none; 
  box-shadow: none; 
} 

.m3-btn-icon { 
  font-size: 26px; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-btn-cta:hover .m3-btn-icon { 
  transform: translateX(6px); 
} 

.m3-btn-spinner { 
  width: 26px; 
  height: 26px; 
  border: 3px solid rgba(0, 0, 0, 0.1); 
  border-top-color: var(--md-sys-color-on-primary); 
  border-radius: 50%; 
  animation: m3-spin 0.8s linear infinite; 
} 

@keyframes m3-spin { 
  to { transform: rotate(360deg); } 
} 

.login-footer { 
  text-align: center; 
  padding-top: 16px; 
} 

.footer-hint { 
  font-size: 14px; 
  color: var(--md-sys-color-on-surface-variant); 
  line-height: 1.5; 
  font-weight: 500; 
} 

.m3-modal-backdrop { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.7); 
  backdrop-filter: blur(12px); 
  z-index: 1000; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 24px; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.m3-dialog-card { 
  background-color: var(--md-sys-color-surface-container-high); 
  border-radius: 36px; 
  padding: 40px; 
  width: 100%; 
  max-width: 440px; 
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6); 
  display: flex; 
  flex-direction: column; 
  gap: 32px; 
  animation: dialog-pop 0.4s cubic-bezier(0.2, 0, 0, 1); 
} 

@keyframes dialog-pop { 
  0% { opacity: 0; transform: scale(0.85) translateY(40px); } 
  100% { opacity: 1; transform: scale(1) translateY(0); } 
} 

.dialog-header { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  gap: 16px; 
} 

.dialog-icon-badge { 
  width: 72px; 
  height: 72px; 
  border-radius: 100px; 
  background-color: var(--md-sys-color-primary-container); 
  color: var(--md-sys-color-primary); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 8px; 
} 

.dialog-icon-badge span { 
  font-size: 36px; 
} 

.dialog-title { 
  font-family: var(--font-family-display); 
  font-size: 28px; 
  font-weight: 800; 
  color: var(--md-sys-color-on-surface); 
  letter-spacing: -1px; 
} 

.dialog-subtitle { 
  font-size: 15px; 
  color: var(--md-sys-color-on-surface-variant); 
  line-height: 1.5; 
  font-weight: 400; 
} 

.dialog-actions-row { 
  display: flex; 
  gap: 16px; 
  margin-top: 8px; 
} 

.dialog-btn-secondary { 
  flex: 1; 
  height: 56px; 
  border: none; 
  background-color: var(--md-sys-color-surface-container); 
  color: var(--md-sys-color-on-surface); 
  border-radius: 9999px; 
  font-family: inherit; 
  font-size: 16px; 
  font-weight: 700; 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
} 

.dialog-btn-secondary:hover { 
  background-color: var(--md-sys-color-surface-tint); 
} 

.dialog-btn-primary { 
  flex: 1.2; 
  height: 56px; 
  border: none; 
  background-color: var(--md-sys-color-primary); 
  color: var(--md-sys-color-on-primary); 
  border-radius: 9999px; 
  font-family: inherit; 
  font-size: 16px; 
  font-weight: 800; 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); 
  box-shadow: 0 4px 16px -4px rgba(212, 255, 0, 0.3); 
} 

.dialog-btn-primary:hover { 
  filter: brightness(1.15); 
  transform: translateY(-2px); 
} 

.m3-toast-container { 
  position: fixed; 
  bottom: 32px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 2000; 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  pointer-events: none; 
  max-width: 90vw; 
} 

.m3-snackbar { 
  pointer-events: auto; 
  background-color: var(--md-sys-color-surface-container-high); 
  color: var(--md-sys-color-on-surface); 
  border: none; 
  padding: 18px 24px; 
  border-radius: 24px; 
  font-family: inherit; 
  font-size: 15px; 
  font-weight: 600; 
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8); 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  opacity: 0; 
  transform: translateY(30px) scale(0.95); 
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1); 
  cursor: pointer; 
} 

.m3-snackbar.show { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
} 

.m3-snackbar-icon { 
  font-size: 26px; 
  color: var(--md-sys-color-primary); 
} 

.hidden { 
  display: none !important; 
} 

::selection { 
  background-color: var(--md-sys-color-primary); 
  color: var(--md-sys-color-on-primary); 
} 

@media (max-width: 900px) { 
  .expressive-layout { 
    flex-direction: column; 
    background-color: transparent; 
    border-radius: 0; 
    box-shadow: none; 
  } 
  .expressive-hero { 
    flex: none; 
    padding: 40px 24px; 
    background-color: transparent; 
  } 
  .hero-title { 
    font-size: 48px; 
  } 
  .organic-blob { 
    top: -50px; left: -20px; width: 280px; height: 280px; 
  } 
  .organic-blob-secondary { 
    display: none; 
  } 
  .login-surface { 
    border-radius: 40px 40px 0 0; 
    padding: 48px 24px 80px 24px; 
    background-color: var(--md-sys-color-surface-container-high); 
  } 
}