/* Login screen: animated dusk scene (login-scene.svg) behind a frosted card. Loaded only by the login page. */
body.login-page { padding:0; min-height:100vh; min-height:100dvh; background:#140b3a; color:#fff; overflow-x:hidden; }
.login-scene { position:fixed; inset:0; z-index:0; }
.login-scene img { width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block; }
main.login {
  position:relative; z-index:1; box-sizing:border-box; max-width:400px; width:calc(100% - 32px);
  margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
}
.login-card {
  background:rgba(24,14,60,.55); border:1px solid rgba(255,255,255,.18); border-radius:22px; padding:28px 24px 24px;
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 50px rgba(8,4,30,.45); animation:card-in .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes card-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
.login-card h1 { margin:0; font-size:40px; line-height:1.1; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(90deg,#ffd166,#ff8fab 55%,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-card .tag { margin:6px 0 22px; color:rgba(255,255,255,.8); font-size:16px; }
.login-card label { font-size:14px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:14px; }
.login-card input {
  font-size:18px; padding:13px 14px; border-radius:12px; border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1); color:#fff; transition:border-color .15s, background .15s;
}
.login-card input:focus { outline:none; border-color:#ffd166; background:rgba(255,255,255,.16); }
.login-card .pw { position:relative; }
.login-card .pw input { padding-right:68px; }
.login-card .show { position:absolute; right:6px; bottom:7px; padding:8px 10px; font-size:13px; font-weight:700;
  background:transparent; color:rgba(255,255,255,.75); border-radius:8px; }
.login-card .show:focus-visible { outline:2px solid #ffd166; }
.login-card button[type=submit] {
  width:100%; margin-top:8px; padding:14px; font-size:18px; font-weight:800; border-radius:14px; color:#2a1450;
  background:linear-gradient(90deg,#ffd166,#ff9e7a); box-shadow:0 6px 0 #c9673f, 0 10px 24px rgba(255,140,90,.35);
  transition:transform .08s, box-shadow .08s;
}
.login-card button[type=submit]:hover { filter:brightness(1.05); }
.login-card button[type=submit]:active { transform:translateY(4px); box-shadow:0 2px 0 #c9673f, 0 4px 12px rgba(255,140,90,.3); }
.login-card button[type=submit]:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.login-card .err { color:#2a0d18; background:#ffb4c0; border-radius:10px; padding:10px 12px; margin:0 0 16px; font-weight:600;
  animation:shake .4s; }
@keyframes shake { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
/* Phones: sit the card in the lower part so the balloon, moon and summit stay visible above it. */
@media (max-width:600px) and (min-height:640px) { main.login { justify-content:flex-end; } }
@media (prefers-reduced-motion:reduce) { .login-card, .login-card .err { animation:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .login-card { background:rgba(24,14,60,.88); } }