/* Sign-in scene (29 Sep 2026): anime tortoise in a cliff hut right above Bangkok,
   rainy night. Still generated on OpenArt (Seedream 5 Pro); looping animation
   rendered from that still with Kling 3.0 (same first and last frame, so it loops
   without a seam). The still is the poster and the reduced-motion fallback.
   Binary assets are uploaded with Fileman/upload_files (byte-exact), not
   save_file_content. Loaded only by login.php. */
body{
  background:#05070d url("login-scene.jpg?v=4") 32% center/cover no-repeat;
}
.scene{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:32% center;
  z-index:0;pointer-events:none;background:#05070d;
}
.scene-shade{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.18) 0%,rgba(5,7,13,.06) 45%,rgba(5,7,13,.5) 100%);
}
/* Floating sign-in (29 Sep 2026): no box, just the two fields and the button,
   each lifted off the scene with its own shadow. */
.card{
  position:relative;z-index:2;width:100%;max-width:280px;
  background:none;border:0;box-shadow:none;padding:0;
}
.card .field{margin-bottom:12px}
.card input{
  background:rgba(10,12,18,.62);border:1px solid rgba(255,255,255,.14);
  color:#fff;border-radius:12px;padding:12px 14px;font-size:14.5px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.55);
}
.card input::placeholder{color:rgba(238,241,247,.62)}
.card input:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(109,140,255,.35),0 2px 6px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.55)}
.card button{
  margin-top:6px;border-radius:12px;padding:12px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.6);
}
.card .err{box-shadow:0 10px 26px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.scene{display:none}}
@media (max-width:700px){body,.scene{background-position:24% center;object-position:24% center}}