.login-page {
  min-height: 100vh;
  padding: 0;
  box-sizing: border-box;
  background: #c6eafa;
  color: #164f8b;
  overflow: hidden;
}

.travel-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url('/images/island-flight-background.png') left center / cover no-repeat;
  box-shadow: 0 24px 70px rgba(10,83,131,.3), inset 0 0 60px rgba(255,255,255,.55);
}
.sky-ribbon {
  display: none;
}

.brand-badge {
  position: absolute;
  z-index: 8;
  top: -2px;
  left: 50%;
  width: 300px;
  padding: 7px 16px 9px;
  transform: translateX(-50%);
  text-align: center;
  border: 1px solid rgba(50,103,147,.32);
  border-radius: 0 0 54px 54px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 10px rgba(19,83,129,.25);
  line-height: 1;
}
.brand-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.aircraft-scene { display: none; }
.plane-mark {
  position: absolute;
  top: 15%;
  right: 5%;
  color: rgba(245,253,255,.86);
  font-size: clamp(190px, 32vw, 420px);
  line-height: 1;
  transform: rotate(-8deg) scaleX(1.25);
  filter: drop-shadow(0 17px 13px rgba(21,117,166,.2));
}
.cloud { position: absolute; border-radius: 50%; background: rgba(255,255,255,.62); filter: blur(7px); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: inherit; background: inherit; }
.cloud-one { width: 220px; height: 48px; top: 48%; left: 8%; }
.cloud-one::before { width: 90px; height: 90px; left: 34px; bottom: 0; }
.cloud-one::after { width: 130px; height: 75px; right: 14px; bottom: 0; }
.cloud-two { width: 280px; height: 50px; top: 28%; right: 22%; opacity: .55; }

.login-panel {
  position: absolute;
  z-index: 7;
  left: 7%;
  top: 26%;
  width: min(480px, 40%);
  box-sizing: border-box;
  padding: 38px 42px 34px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 5px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 45px rgba(18,92,144,.28), inset 0 1px 0 #fff;
  backdrop-filter: blur(8px);
  transform: none;
}
.panel-kicker { margin: 0 0 8px; color: #409cc9; font-size: 12px; font-weight: 800; letter-spacing: .28em; }
.login-panel h1 { margin: 0; color: #1258a2; font: 800 clamp(34px, 3.4vw, 48px)/1.1 Arial, "Segoe UI", sans-serif; letter-spacing: -.035em; }
.panel-copy { margin: 14px 0 26px; color: #6287a5; font-size: 15px; line-height: 1.6; white-space: nowrap; }
.login-panel form { gap: 8px; }
.login-panel label { color: #39769e; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.login-panel input {
  padding: 16px 17px;
  border: 1px solid #93c9e2;
  border-radius: 5px;
  background: rgba(255,255,255,.9);
  color: #164f8b;
  box-shadow: inset 0 2px 5px rgba(25,105,150,.08);
}
.login-panel input::placeholder { color: #9bb8cb; }
.login-panel button {
  margin-top: 3px;
  padding: 15px;
  border-radius: 5px;
  background: linear-gradient(180deg, #36aee0, #1376bd);
  box-shadow: 0 5px 12px rgba(13,108,170,.25);
  letter-spacing: .14em;
}
.local-hint { margin: 11px 0 0; color: #7b9bb1; font-size: 9px; letter-spacing: .08em; }
.local-hint code { background: rgba(23,111,168,.09); color: #2b77a7; }
.login-panel pre { display: none; margin: 10px 0 0; min-height: 0; padding: 12px; border: 0; border-radius: 0; background: #111; color: #fff; }
.login-panel pre:not(:empty) { display: block; }

.welcome-copy {
  position: absolute;
  z-index: 5;
  top: 25%;
  right: 10%;
  width: 44%;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.welcome-copy img {
  display: block;
  width: min(68%, 620px);
  height: auto;
  margin: 0 auto;
  transform: translateY(-12%);
}

.wave { display: none; }
.wave-back { bottom: 8%; height: 22%; background: rgba(18,145,211,.74); }
.wave-front { bottom: -4%; height: 22%; background: linear-gradient(180deg, #087ecb, #075cad); transform: rotate(2deg); box-shadow: inset 0 5px 0 rgba(255,255,255,.28); }

.travel-footer {
  position: absolute;
  z-index: 12;
  inset: auto 0 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
  border-top: 1px solid #d4d4d4;
  background: linear-gradient(180deg, #fff 0%, #fafafa 72%, #e9e9e9 100%);
  box-shadow: 0 -5px 12px rgba(0,0,0,.13);
}
.footer-button {
  width: 58px;
  height: 42px;
  padding: 0;
  border: 1px solid #777;
  border-radius: 6px;
  color: #4f5355;
  background: linear-gradient(180deg, #e9e9e9 0%, #c9c9c9 52%, #999 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.18);
  text-shadow: 0 1px 0 #eee;
  font: 700 31px/1 Arial, sans-serif;
}
.power-button { font-size: 27px; }
.back-arrow {
  display: block;
  width: 45px;
  height: 32px;
  margin: auto;
  background: linear-gradient(180deg, #85898b 0%, #686c6e 48%, #55595b 100%);
  clip-path: polygon(0 50%, 29% 0, 29% 24%, 100% 24%, 100% 76%, 29% 76%, 29% 100%);
  filter: drop-shadow(1px 0 #3f4244) drop-shadow(-1px 0 #3f4244) drop-shadow(0 1px #3f4244) drop-shadow(0 -1px #3f4244);
}
.route-display {
  position: absolute;
  left: 50%;
  width: min(520px, 55vw);
  height: 46px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid #777;
  border-radius: 9px;
  color: #565656;
  background: linear-gradient(180deg, #e4e4e4 0%, #cecece 50%, #a7a7a7 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.95), 0 1px 1px rgba(0,0,0,.16);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.location-pin { position: relative; display: block; width: 16px; height: 16px; margin: 0 5px 5px 2px; transform: rotate(-45deg); border: 2px solid #5e6265; border-radius: 50% 50% 50% 0; box-sizing: border-box; background: linear-gradient(135deg, #eee, #aaa); }
.location-pin::after { content: ""; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border: 1px solid #626669; border-radius: 50%; box-sizing: border-box; background: #d8d8d8; }
.route-copy { flex: 1; display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 15px; }
.route-copy b, .route-copy strong { font-weight: 400; }
.route-copy i { color: #666; font-size: 25px; line-height: 1; transform: rotate(-4deg); }
.info-icon {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #ddd;
  background: linear-gradient(#858585, #555);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6);
  text-align: center;
  text-shadow: 0 -1px 0 #333;
  font: 700 18px/23px Georgia, serif;
}

@media (max-width: 760px) {
  .travel-shell { min-height: 650px; }
  .login-panel { left: 50%; top: 24%; width: min(340px, 82%); transform: translateX(-50%); }
  .welcome-copy { top: 8%; right: 5%; width: 90%; }
  .welcome-copy img { width: min(70%, 420px); margin: 0 auto; transform: translateY(-10%); }
  .plane-mark { right: -15%; top: 40%; opacity: .55; }
}