body.site-bg {
  background-color: #f8fafc;
  background-image: url('/static/bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.site-bg header,
body.site-bg main,
body.site-bg .w-full.max-w-md {
  position: relative;
  z-index: 1;
}

/* Make most panels and cards translucent */
body.site-bg [class*="bg-white"],
body.site-bg [class*="bg-slate-50"],
body.site-bg [class*="bg-indigo-50"],
body.site-bg [class*="bg-emerald-50"],
body.site-bg [class*="bg-rose-50"],
body.site-bg [class*="bg-amber-50"],
body.site-bg [class*="bg-sky-50"] {
  background-color: rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Keep dark primary buttons readable while still slightly translucent */
body.site-bg [class*="bg-slate-900"] {
  background-color: rgba(15, 23, 42, 0.78) !important;
}

/* Softer borders and shadows for transparent style */
body.site-bg [class*="border-slate-200"],
body.site-bg [class*="border-slate-100"],
body.site-bg [class*="border-white"] {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

body.site-bg [class*="shadow"] {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

/* Inputs should remain clear and legible */
body.site-bg input,
body.site-bg select,
body.site-bg textarea {
  background-color: rgba(255, 255, 255, 0.46) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}