:root {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #f9fff8;
  background: #087f83;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: linear-gradient(145deg, #0b8d8d 0%, #116f7d 52%, #173c58 100%); }
button, input { font: inherit; }

.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 15%, #aef5db2e 0 5%, transparent 22%), radial-gradient(circle at 80% 65%, #ffc94a2b 0 7%, transparent 27%); }
.sun { position: absolute; width: 165px; height: 165px; right: 7vw; top: 7vh; border-radius: 50%; background: #ffd465; box-shadow: 0 0 0 22px #ffd46513, 0 0 0 48px #ffd4650b; opacity: .86; }
.mountain { position: absolute; bottom: 16vh; width: 68vw; height: 44vh; clip-path: polygon(0 100%, 42% 7%, 55% 28%, 67% 13%, 100% 100%); opacity: .48; }
.mountain-one { left: -12vw; background: #d36958; }
.mountain-two { right: -30vw; bottom: 13vh; background: #f0a16e; transform: scale(.78); opacity: .3; }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; background: linear-gradient(180deg, #40c7c65c, #07576dba); clip-path: polygon(0 18%, 12% 8%, 27% 20%, 42% 5%, 58% 17%, 76% 3%, 100% 15%, 100% 100%, 0 100%); }

.login-shell { position: relative; z-index: 1; min-height: 100vh; max-width: 980px; margin: 0 auto; padding: max(36px, 7vh, env(safe-area-inset-top)) 24px max(34px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-heading { transition: .3s ease; }
.trip-mark { width: 44px; height: 44px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #193a4b; background: #ffd25e; font-size: 23px; box-shadow: inset 0 0 0 6px #fff4bc6c, 0 12px 30px #0b344738; }
.login-heading p { margin: 0; color: #d2f6ed; font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.login-heading h1 { margin: 17px 0 10px; font-size: clamp(37px, 6vw, 58px); line-height: .98; letter-spacing: -.055em; text-shadow: 0 10px 35px #07394544; }
.login-heading > span:last-child { color: #c6e7e5; font-size: 14px; }

.profiles { width: min(100%, 700px); margin: clamp(34px, 6vh, 62px) auto 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 34px); }
.profile { border: 0; padding: 0; color: white; background: transparent; cursor: pointer; transition: transform .22s ease; }
.profile:hover, .profile:focus-visible { transform: translateY(-7px); outline: none; }
.profile img { width: clamp(96px, 17vw, 148px); aspect-ratio: 1; display: block; margin: 0 auto 15px; object-fit: cover; border: 4px solid #fff8e8; border-radius: 50%; box-shadow: 0 18px 45px #062f485c, 0 0 0 7px #ffffff18; }
.profile b { display: block; font-size: 18px; }
.profile small { min-height: 18px; display: block; margin-top: 5px; color: #bee2df; font-size: 11px; }
.profile.setup small { color: #ffe093; }

.pin-panel { position: relative; width: min(100%, 390px); margin-top: 32px; padding: 28px 28px 25px; border: 1px solid #ffffff29; border-radius: 32px; background: #ffffff14; box-shadow: 0 28px 70px #062e4447; backdrop-filter: blur(20px); }
.pin-panel[hidden] { display: none; }
.back { position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; border: 1px solid #ffffff2b; border-radius: 50%; color: white; background: #ffffff13; cursor: pointer; }
.selected-avatar { width: 104px; height: 104px; margin: -72px auto 9px; display: block; object-fit: cover; border: 4px solid #fff8e8; border-radius: 50%; box-shadow: 0 14px 34px #082f415c; }
.pin-panel h2 { margin: 7px 0 2px; font-size: 24px; }
.pin-panel > p { margin: 0 0 13px; color: #c9e9e6; font-size: 13px; }
#pin-form { display: flex; justify-content: center; align-items: center; gap: 10px; }
.pin-field { position: relative; width: 168px; height: 50px; display: block; }
.pin-field input { position: absolute; inset: 0; z-index: 2; width: 100%; border: 1px solid #ffffff36; border-radius: 999px; color: transparent; caret-color: transparent; background: #082f4142; text-align: center; outline: none; }
.pin-field input:focus { border-color: #ffe178; box-shadow: 0 0 0 4px #ffe17817; }
.pin-dots { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.pin-dots i { width: 10px; height: 10px; border: 1.5px solid #dff5f1; border-radius: 50%; transition: .15s ease; }
.pin-dots i.filled { border-color: #ffe079; background: #ffe079; transform: scale(1.08); }
.enter { width: 50px; height: 50px; border: 0; border-radius: 50%; color: #17394b; background: #ffd15d; font-size: 24px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px #0a354542; }
.enter:disabled { opacity: .45; cursor: default; }
.message { min-height: 20px; margin: 13px 0 0 !important; color: #ffe3a3 !important; font-size: 12px !important; }
.message.error { color: #ffb7a7 !important; }
footer { margin-top: auto; padding-top: 32px; color: #9ed1d0; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .login-shell { padding-top: max(30px, 5vh); }
  .sun { width: 110px; height: 110px; right: -25px; }
  .profiles { gap: 10px; margin-top: 34px; }
  .profile img { width: min(26vw, 108px); border-width: 3px; }
  .profile b { font-size: 15px; }
  .pin-panel { margin-top: 58px; padding-inline: 18px; }
}