@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
  --aviation-primary: #1E40AF;
  --aviation-accent: #38BDF8;
  --aviation-bg-light: #F8FAFC;
  --aviation-bg-dark: #0F172A;

  --auth-bg: var(--aviation-bg-light);
  --auth-surface: color-mix(in srgb, #ffffff 88%, var(--aviation-accent));
  --auth-surface-strong: #ffffff;
  --auth-border: color-mix(in srgb, var(--aviation-primary) 18%, transparent);
  --auth-text: color-mix(in srgb, var(--aviation-bg-dark) 92%, black);
  --auth-muted: color-mix(in srgb, var(--aviation-bg-dark) 55%, transparent);
  --auth-link: var(--aviation-primary);
  --auth-focus: color-mix(in srgb, var(--aviation-accent) 60%, transparent);

  --auth-gradient: linear-gradient(145deg, color-mix(in srgb, var(--aviation-primary) 12%, var(--aviation-bg-light)), color-mix(in srgb, var(--aviation-accent) 15%, var(--aviation-bg-light)));
  --auth-btn-gradient: linear-gradient(135deg, var(--aviation-primary), var(--aviation-accent), var(--aviation-primary));

  --auth-shadow-soft: 0 10px 30px color-mix(in srgb, var(--aviation-primary) 16%, transparent);
  --auth-shadow-card: 0 30px 60px color-mix(in srgb, var(--aviation-primary) 18%, transparent);
  --auth-input-bg: color-mix(in srgb, #ffffff 90%, var(--aviation-accent));
}

[data-bs-theme="dark"] {
  --auth-bg: var(--aviation-bg-dark);
  --auth-surface: color-mix(in srgb, var(--aviation-bg-dark) 88%, var(--aviation-accent));
  --auth-surface-strong: color-mix(in srgb, var(--aviation-bg-dark) 94%, var(--aviation-primary));
  --auth-border: color-mix(in srgb, var(--aviation-accent) 28%, transparent);
  --auth-text: #E2E8F0;
  --auth-muted: #94A3B8;
  --auth-link: color-mix(in srgb, var(--aviation-accent) 86%, white);
  --auth-focus: color-mix(in srgb, var(--aviation-accent) 42%, transparent);

  --auth-gradient: linear-gradient(150deg, color-mix(in srgb, var(--aviation-bg-dark) 90%, var(--aviation-primary)), color-mix(in srgb, var(--aviation-bg-dark) 82%, var(--aviation-accent)));
  --auth-btn-gradient: linear-gradient(135deg, color-mix(in srgb, var(--aviation-primary) 78%, white), color-mix(in srgb, var(--aviation-accent) 72%, white), color-mix(in srgb, var(--aviation-primary) 78%, white));

  --auth-shadow-soft: 0 10px 26px color-mix(in srgb, black 48%, transparent);
  --auth-shadow-card: 0 28px 55px color-mix(in srgb, black 55%, transparent);
  --auth-input-bg: color-mix(in srgb, var(--aviation-bg-dark) 90%, var(--aviation-primary));
}

html, body {
  font-family: 'Inter', sans-serif;
}

body.auth-page {
  min-height: 100vh;
  margin: 0;
  background: var(--auth-bg);
  color: var(--auth-text);
  overflow-x: hidden;
}

.auth-aviation-bg,
.auth-blur-overlay,
.auth-floating-plans {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.auth-aviation-bg {
  z-index: 0;
  background:
    radial-gradient(70% 50% at 15% 5%, color-mix(in srgb, var(--aviation-accent) 36%, transparent), transparent 70%),
    radial-gradient(60% 45% at 85% 90%, color-mix(in srgb, var(--aviation-primary) 26%, transparent), transparent 70%),
    var(--auth-gradient);
  animation: skyShift 16s ease-in-out infinite alternate;
}

.auth-aviation-bg::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 24%;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--aviation-primary) 22%, transparent), transparent 70%),
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--aviation-accent) 34%, transparent) 0 6px,
      transparent 6px 24px
    );
  opacity: .45;
}

.auth-aviation-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, white 42%, transparent), transparent 65%);
  opacity: .35;
}

.auth-blur-overlay {
  z-index: 1;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--auth-bg) 22%, transparent);
}

.auth-wrapper {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-panel {
  width: 100%;
  max-width: 1040px;
  border-radius: 20px;
  border: 1px solid var(--auth-border);
  background: color-mix(in srgb, var(--auth-surface) 90%, transparent);
  box-shadow: var(--auth-shadow-card);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: authEntrance .7s ease-out .06s forwards;
}

.auth-brand {
  height: 100%;
  padding: 30px;
  border-right: 1px solid var(--auth-border);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--aviation-accent) 18%, transparent), transparent 40%),
    color-mix(in srgb, var(--auth-surface-strong) 86%, transparent);
}

.login-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100%;
  text-align: center;
}

.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 12% 15%, color-mix(in srgb, var(--aviation-accent) 26%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--aviation-primary) 12%, transparent), transparent 52%);
  opacity: .85;
}

.login-left::after {
  content: '✈';
  position: absolute;
  right: 8%;
  bottom: 10%;
  font-size: clamp(2.2rem, 2.2vw, 3rem);
  color: color-mix(in srgb, var(--aviation-primary) 38%, var(--auth-text));
  opacity: .18;
  transform: rotate(-8deg);
}

.login-left .login-left-theme {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.login-left .login-left-content {
  position: relative;
  z-index: 2;
  max-width: 320px;
  margin-inline: auto;
}

.auth-logo {
  max-height: 78px;
  width: auto;
  margin-bottom: .35rem;
}

.auth-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.32rem, 1.06rem + .8vw, 1.7rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: .1px;
  line-height: 1.24;
}

.login-left .auth-title {
  font-size: clamp(1.16rem, 1rem + .48vw, 1.45rem);
  font-weight: 500;
  letter-spacing: .06px;
}

.auth-subtitle {
  color: var(--auth-muted);
  font-size: .94rem;
  line-height: 1.5;
}

.auth-tagline {
  font-size: .98rem;
  color: var(--auth-link);
  font-weight: 500;
  letter-spacing: .1px;
  line-height: 1.45;
}

.login-left .auth-tagline,
.login-left .auth-subtitle {
  font-size: .9rem;
  line-height: 1.48;
}

.login-feature-list {
  display: grid;
  gap: .45rem;
  padding: 0;
}

.login-feature-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--auth-muted);
  font-size: .88rem;
  line-height: 1.35;
}

.login-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45rem;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aviation-accent) 65%, var(--auth-text));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aviation-accent) 24%, transparent);
}

.auth-brand-meta {
  font-size: .875rem;
  color: var(--auth-muted);
}

.auth-form-wrap {
  padding: 30px;
}

.login-form .auth-input-group .form-floating > label {
  display: none;
}

.login-form .auth-input-group .form-floating > .form-control {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.auth-card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  margin: 0;
  letter-spacing: .1px;
  line-height: 1.28;
}

.auth-card-subtitle {
  margin-top: 5px;
  margin-bottom: 1rem;
  color: var(--auth-muted);
  font-size: .92rem;
  line-height: 1.45;
}

.auth-title-row {
  margin-bottom: .2rem;
}

.secure-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  padding: .38rem .6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--aviation-accent) 40%, var(--auth-border));
  background: color-mix(in srgb, var(--auth-surface-strong) 86%, transparent);
  color: var(--auth-link);
}

.secure-badge i {
  font-size: .8rem;
}

.secure-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--auth-muted);
  font-size: .83rem;
  line-height: 1.35;
}

.secure-note i {
  color: var(--auth-link);
  font-size: .82rem;
}

.ssl-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--auth-muted);
  border: 1px solid var(--auth-border);
  background: color-mix(in srgb, var(--auth-surface-strong) 82%, transparent);
  border-radius: 999px;
  padding: .28rem .52rem;
}

.ssl-mini-badge i {
  color: var(--auth-link);
  font-size: .8rem;
}

.auth-theme-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--auth-border);
  background: color-mix(in srgb, var(--auth-surface-strong) 88%, transparent);
  color: var(--auth-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--auth-shadow-soft);
  transition: transform .28s ease, border-color .28s ease, color .28s ease;
}

.auth-theme-btn:hover,
.auth-theme-btn:focus-visible {
  transform: rotate(14deg) scale(1.05);
  border-color: color-mix(in srgb, var(--aviation-accent) 52%, transparent);
  color: var(--auth-link);
}

.auth-input-group {
  position: relative;
}

.auth-input-group .auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  color: var(--auth-muted);
  font-size: 1rem;
  transition: color .2s ease;
}

.auth-input-group .form-floating > .form-control {
  background: var(--auth-input-bg);
  border-color: var(--auth-border);
  border-radius: 12px;
  color: var(--auth-text);
  padding-left: 42px;
  height: calc(3rem + 2px);
}

.auth-input-group .form-floating > label {
  left: 28px;
  color: var(--auth-muted);
  font-size: .9rem;
}

.auth-form-wrap .auth-input-group {
  margin-bottom: .85rem !important;
}

.auth-input-group .form-control:focus {
  border-color: color-mix(in srgb, var(--aviation-accent) 62%, transparent);
  box-shadow: 0 0 0 .2rem var(--auth-focus);
}

.auth-input-group .form-control:focus ~ .auth-input-icon,
.auth-input-group .form-control:not(:placeholder-shown) ~ .auth-input-icon {
  color: var(--auth-link);
}

.auth-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  border: 0;
  background: transparent;
  color: var(--auth-muted);
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  color: var(--auth-link);
  background: color-mix(in srgb, var(--aviation-accent) 18%, transparent);
}

.auth-form-link {
  color: var(--auth-link);
  text-decoration: none;
}

.auth-form-link:hover,
.auth-form-link:focus-visible {
  text-decoration: underline;
}

.auth-login-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--auth-btn-gradient);
  background-size: 200% 200%;
  padding: 10px 14px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--auth-shadow-soft);
}

.auth-login-btn:hover,
.auth-login-btn:focus-visible {
  animation: btnGradientShift 2.1s linear infinite;
  transform: translateY(-1px);
}

.auth-login-btn .spinner-border {
  width: 1rem;
  height: 1rem;
}

.auth-login-btn.is-loading {
  pointer-events: none;
  opacity: .95;
}

.auth-login-btn.is-loading .btn-text {
  opacity: .72;
}

.form-error {
  display: block;
  font-size: .86rem;
  color: #ef4444;
  margin-top: .35rem;
}

.form-control.is-invalid {
  animation: inputShake .33s ease;
}

.auth-floating-plans {
  z-index: 1;
  overflow: hidden;
}

.auth-plane {
  position: absolute;
  color: color-mix(in srgb, var(--aviation-accent) 70%, var(--auth-text));
  opacity: .28;
  font-size: 28px;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--aviation-primary) 24%, transparent));
  animation: flyAcross 28s linear infinite;
}

.auth-plane.plane-1 { top: 18%; left: -10%; animation-delay: -2s; }
.auth-plane.plane-2 { top: 40%; left: -14%; animation-delay: -10s; animation-duration: 30s; transform: scale(.9); }
.auth-plane.plane-3 { top: 68%; left: -12%; animation-delay: -18s; animation-duration: 34s; transform: scale(.8); }

.auth-silhouette {
  position: absolute;
  right: 6%;
  bottom: 8%;
  font-size: clamp(3rem, 3vw, 4rem);
  opacity: .16;
  color: color-mix(in srgb, var(--aviation-primary) 66%, var(--auth-text));
}

@keyframes authEntrance {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes btnGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes skyShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(8deg); }
}

@keyframes flyAcross {
  0% { transform: translateX(0) translateY(0) rotate(8deg); opacity: 0; }
  10% { opacity: .3; }
  60% { transform: translateX(65vw) translateY(-18px) rotate(8deg); opacity: .38; }
  100% { transform: translateX(120vw) translateY(-28px) rotate(8deg); opacity: 0; }
}

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

@media (max-width: 991px) {
  .auth-wrapper {
    padding: 16px;
  }

  .auth-panel {
    max-width: 640px;
  }

  .auth-brand {
    border-right: 0;
    border-bottom: 1px solid var(--auth-border);
    padding: 22px;
  }

  .login-left {
    min-height: 280px;
  }

  .login-left .login-left-content {
    max-width: 360px;
  }

  .auth-form-wrap {
    padding: 22px;
  }

  .auth-title {
    font-size: 1.35rem;
  }

  .auth-card-title {
    font-size: 1.18rem;
  }

  .secure-badge {
    font-size: .72rem;
    padding: .34rem .54rem;
  }

  .secure-note {
    font-size: .8rem;
  }

  .auth-input-group .form-floating > .form-control {
    height: calc(2.9rem + 2px);
  }

  .auth-silhouette {
    right: 10%;
    bottom: 6%;
    font-size: 2.2rem;
  }
}

@media (max-width: 576px) {
  .auth-wrapper {
    padding: 12px;
  }

  .auth-brand,
  .auth-form-wrap {
    padding: 18px;
  }

  .auth-logo {
    max-height: 70px;
  }

  .auth-subtitle,
  .auth-tagline,
  .auth-card-subtitle {
    font-size: .88rem;
  }

  .auth-title-row {
    align-items: flex-start !important;
    gap: .5rem !important;
  }

  .secure-note {
    font-size: .78rem;
  }

  .ssl-mini-badge {
    font-size: .69rem;
  }

  .login-left {
    min-height: 240px;
  }

  .login-left .auth-logo {
    max-height: 64px;
  }

  .login-feature-list li {
    font-size: .84rem;
  }
}