/* Lofi night: dusk sky, city windows, rain, vinyl, film grain. */
.lofi-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #24183f 0%, #4a3568 34%, #c56b62 70%, #e7a15c 100%);
  pointer-events: none;
}
.lofi-bg .moon {
  position: absolute;
  width: 92px;
  height: 92px;
  left: 12%;
  top: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffaf0, #f3d7a4 62%, #e7b56a);
  box-shadow: 0 0 80px 24px rgba(243, 215, 164, .45);
}
.lofi-bg .skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 3vw;
}
.lofi-bg .skyline i {
  display: block;
  width: 100%;
  border-radius: 6px 6px 0 0;
  background-color: #140e22;
  background-image:
    linear-gradient(rgba(255, 206, 130, .55) 3px, transparent 3px),
    linear-gradient(90deg, rgba(255, 206, 130, .55) 3px, transparent 3px);
  background-size: 16px 20px;
  background-position: 6px 8px;
  box-shadow: inset 0 0 0 9px #140e22;
}
.lofi-bg .vinyl {
  position: absolute;
  width: 168px;
  height: 168px;
  right: 7%;
  bottom: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f4efe6 0 7px, #e8420e 8px 16px, transparent 17px),
    repeating-radial-gradient(circle at 50% 50%, #2a2438 0 2px, #171320 3px 5px);
  box-shadow: 0 18px 40px rgba(20, 10, 30, .4);
  animation: lofi-spin 22s linear infinite;
}
.lofi-bg .rain {
  position: absolute;
  inset: -30% 0;
  background: repeating-linear-gradient(
    112deg,
    transparent 0 18px,
    rgba(255, 255, 255, .22) 18px 19px
  );
  opacity: .35;
  animation: lofi-rain 7s linear infinite;
}
.lofi-bg .grain {
  position: absolute;
  inset: -20%;
  opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: lofi-grain .45s steps(2) infinite;
}
@keyframes lofi-spin { to { transform: rotate(360deg); } }
@keyframes lofi-rain { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes lofi-grain { 50% { transform: translate(2%, -1%); } }

.shell { position: relative; z-index: 1; }
.panel { background: linear-gradient(90deg, rgba(18, 10, 28, .42), rgba(18, 10, 28, .08)) !important; }
.form-side { background: transparent; }
form, .card {
  background: rgba(255, 248, 241, .9);
  border-radius: 24px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 60px rgba(28, 14, 40, .28);
  backdrop-filter: blur(8px);
}
@media (max-width: 860px) {
  .lofi-bg .vinyl { width: 110px; height: 110px; right: 6%; bottom: 8%; }
  .lofi-bg .moon { width: 64px; height: 64px; }
  .panel { background: linear-gradient(180deg, rgba(18, 10, 28, .5), rgba(18, 10, 28, .15)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lofi-bg .vinyl, .lofi-bg .rain, .lofi-bg .grain { animation: none; }
}