/* Glass morphism card + form controls */
.login-form {
  background: rgba(var(--color-canvas), .12);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08) contrast(1.12);
  border: 2px solid rgba(var(--color-canvas), .3);
  border-radius: 0;
  padding: var(--space-md);
  box-shadow: 0 20px 40px rgba(var(--color-navy), .15), inset 0 1px 0 rgba(var(--color-canvas), .6), 0 8px 32px rgba(var(--color-primary), .08);
  transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s cubic-bezier(.23,1,.32,1), backdrop-filter .3s cubic-bezier(.23,1,.32,1), border-color .3s cubic-bezier(.23,1,.32,1);
  transform: translateZ(0);
  text-align:left;
}

.login-form:hover {
  backdrop-filter: blur(25px) saturate(200%) brightness(1.1) contrast(1.15);
  box-shadow: 0 25px 50px rgba(var(--color-navy), .2), inset 0 1px 0 rgba(var(--color-canvas), .8), 0 12px 40px rgba(var(--color-primary), .12);
  transform: translateY(-2px) scale(1.005);
}

.login-header { margin-bottom: var(--space-md); position: relative; }
.login-title {font-size: var(--font-size-huge);font-weight: 600;letter-spacing: -0.025em;color: rgb(var(--color-navy));margin-bottom: var(--space-md);position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;width: 100vw;text-align: center;padding: 0 var(--space-sm);box-sizing: border-box;background: linear-gradient(135deg, rgb(var(--color-navy)) 0%, rgb(var(--color-primary)) 50%, rgb(var(--color-navy)) 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;filter: drop-shadow(0 2px 4px rgba(var(--color-navy), .1));animation: titleAppear 1s ease-out .3s both;}
@keyframes titleAppear { from{opacity:0;transform:translateY(-20px) scale(.9);filter:blur(2px)} to{opacity:1;transform:none;filter:none} }
.login-subtitle { font-size: var(--font-size-medium); font-weight: 500; color: rgb(var(--color-text)); opacity:.8; background: linear-gradient(90deg, rgb(var(--color-text)) 0%, rgb(var(--color-primary)) 50%, rgb(var(--color-text)) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation: subtitleAppear 1s ease-out .5s both; }
@keyframes subtitleAppear { from{opacity:0;transform:translateY(10px)} to{opacity:.8;transform:none} }

.form-group { margin-bottom: var(--space-md); animation: formGroupAppear .8s ease-out both; }
.form-group:nth-child(1){animation-delay:.7s} .form-group:nth-child(2){animation-delay:.9s} .form-group:nth-child(3){animation-delay:1.1s}
@keyframes formGroupAppear { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:none} }

.form-label { display:block; font-size: var(--font-size-body); font-weight:600; color: rgb(var(--color-navy)); margin-bottom: var(--space-sm); background: linear-gradient(90deg, rgb(var(--color-navy)) 0%, rgb(var(--color-primary)) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color: transparent; transition: color .3s ease, opacity .3s ease, transform .3s ease; }

.form-input { width:100%; height: var(--input-height); padding:0 var(--space-md); border:2px solid rgb(var(--color-grey-300)); border-radius:0; font-size: var(--font-size-medium); font-weight:500; color:rgb(var(--color-text)); background: rgba(var(--color-canvas), .9); backdrop-filter: blur(10px); transition: border-color .4s cubic-bezier(.34,1.56,.64,1), background .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.34,1.56,.64,1), filter .4s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 4px 20px rgba(var(--color-navy), .08), inset 0 1px 0 rgba(var(--color-canvas), .8); }
.form-input:focus { border-color: rgb(var(--color-primary)); outline:none; background: rgba(var(--color-canvas), .95); backdrop-filter: blur(15px); transform: scale(1.02) translateY(-2px); box-shadow: 0 8px 30px rgba(var(--color-primary), .2), 0 4px 20px rgba(var(--color-navy), .1), inset 0 1px 0 rgba(var(--color-canvas), .9); filter: drop-shadow(0 0 20px rgba(var(--color-primary), .1)); }
.form-input::placeholder{ color:rgb(var(--color-text)); opacity:.5; transition: opacity .3s ease; }
.form-input:focus::placeholder{ opacity:.3 }

.btn-primary{ width:100%; height: var(--button-height); background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-gradient-light)) 50%, rgb(var(--color-primary)) 100%); color: rgb(var(--color-canvas)); border:none; border-radius:0; font-size: var(--font-size-medium); font-weight:700; cursor:pointer; position:relative; overflow:hidden; transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.34,1.56,.64,1), background .4s cubic-bezier(.34,1.56,.64,1); margin-bottom: var(--space-sm); box-shadow: 0 10px 30px rgba(var(--color-primary), .3), 0 4px 20px rgba(var(--color-navy), .2), inset 0 1px 0 rgba(var(--color-canvas), .2); min-width:72px; animation: buttonAppear .8s ease-out 1.3s both; }
@keyframes buttonAppear{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
.btn-primary:hover:not(:disabled){ background: linear-gradient(135deg, rgb(var(--color-primary-active)) 0%, rgb(var(--color-primary-gradient-dark)) 50%, rgb(var(--color-primary-active)) 100%); transform: translateY(-6px) scale(1.03); box-shadow: 0 20px 40px rgba(var(--color-primary), .4), 0 8px 30px rgba(var(--color-navy), .3), inset 0 1px 0 rgba(var(--color-canvas), .3); filter: drop-shadow(0 0 30px rgba(var(--color-primary), .3)); }
.btn-primary:active{ transform: translateY(-2px) scale(1.01); transition: transform .1s ease; }
.btn-primary.loading{ animation: loadingPulse 1.5s ease-in-out infinite; }
@keyframes loadingPulse{0%,100%{box-shadow:0 10px 30px rgba(var(--color-primary), .3),0 4px 20px rgba(var(--color-navy), .2)}50%{box-shadow:0 15px 40px rgba(var(--color-primary), .5),0 6px 25px rgba(var(--color-navy), .3)}}
.btn-primary::before{ content:''; position:absolute; inset:0; left:-100%; background: linear-gradient(90deg, transparent, rgba(var(--color-canvas), .15), transparent); transition:left .6s ease; z-index:1; pointer-events:none; }
.btn-primary:hover::before{ left:100% }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; background: linear-gradient(135deg, rgb(var(--grey-400)) 0%, rgb(var(--grey-400)) 100%); box-shadow:none; filter:none }
.btn-primary.awaiting-captcha{ opacity:.5; cursor:not-allowed; background: linear-gradient(135deg, rgb(var(--grey-300)) 0%, rgb(var(--grey-400)) 100%); color:rgb(var(--color-text-muted)); animation: awaitingPulse 1.5s ease-in-out infinite }
@keyframes awaitingPulse{0%,100%{opacity:.5}50%{opacity:.7}}
.btn-text{ display:inline-block; transition: opacity var(--transition-spring); position:relative; z-index:2; }
.btn-loader{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition: opacity var(--transition-spring); z-index:2; }
.btn-primary.loading .btn-text{ opacity:0 }
.btn-primary.loading .btn-loader{ opacity:1 }
.loader{ width:32px; height:32px; border:3px solid transparent; border-top:3px solid rgb(var(--color-canvas)); border-radius:50%; animation: spin 1s linear infinite }
@keyframes spin{to{transform: rotate(360deg)}}

.login-footer{ text-align:center; padding-top: var(--space-sm); border-top: 2px solid rgb(var(--color-grey-300)); }
.security-note{ font-size: var(--font-size-body); color:rgb(var(--color-text)); opacity:.7; display:flex; align-items:center; justify-content:center; gap: var(--space-sm); background: rgba(var(--color-canvas), .5); backdrop-filter: blur(10px); border-radius:0; padding: var(--space-sm) var(--space-md); border:1px solid rgba(var(--color-canvas), .3); box-shadow: var(--shadow-subtle); animation: securityNoteAppear 1s ease-out 1.5s both }
@keyframes securityNoteAppear{from{opacity:0;transform:translateY(20px)}to{opacity:.7;transform:none}}
.security-note i{ color:rgb(var(--color-success)); font-size: var(--icon-size); animation: shieldPulse 2s ease-in-out infinite }
@keyframes shieldPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(var(--color-success), .3))}50%{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(var(--color-success), .5))}}
.back-link{ color:rgb(var(--color-text)); text-decoration:none; font-size: var(--font-size-small); font-weight:500; display:inline-flex; align-items:center; gap: var(--space-xs); transition: color .2s ease }
.back-link:hover{ color: rgb(var(--color-primary)) }

.skip-container{ margin-top: var(--space-md); animation: skipAppear 1s ease-out 1.7s both }
@keyframes skipAppear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.skip-link{ 
  display:inline-flex !important; 
  align-items:center !important; 
  gap: var(--space-xs) !important; 
  font-size: var(--font-size-small) !important; 
  font-weight:500 !important; 
  color:rgb(var(--color-text)) !important; 
  opacity:.5 !important; 
  text-decoration:none !important; 
  padding: var(--space-xs) var(--space-sm) !important; 
  border-radius:0 !important; 
  background: rgba(var(--color-canvas), .15) !important; 
  backdrop-filter: blur(5px) !important; 
  border:1px solid rgba(var(--color-canvas), .2) !important; 
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease !important;
}
.skip-link:hover{ 
  opacity:.8 !important; 
  transform: translateX(4px) !important; 
  background: rgba(var(--color-canvas), .25) !important; 
  border-color: rgba(var(--color-canvas), .35) !important;
}
.skip-link:active{ 
  transform: translateX(2px) scale(.98) !important;
}
.skip-link i{ 
  font-size: var(--font-size-body) !important; 
  transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.skip-link:hover i{ 
  transform: translateX(3px) !important;
}

/* Small hint under subtitle */
.user-email-hint{ margin:0px 0 var(--space-md); font-size: 0.5em; color: rgb(var(--color-text)); opacity:.7; }