/* One material: 65% transparent, 35% fill. Text and images keep full opacity. */
:root {
  --glass-fill: .35;
  --glass-rgb: 249, 248, 242;
  --glass-material: rgba(var(--glass-rgb), var(--glass-fill));
  --glass-blur: blur(24px);
  --panel: var(--glass-material);
  --card: var(--glass-material);
  --glass: var(--glass-material);
  --dialog-glass: var(--glass-material);
  --auth-glass: var(--glass-material);
  --membership-panel: var(--glass-material);
}
html[data-theme=dark] {
  --glass-rgb: 26, 43, 52;
  --panel: var(--glass-material);
  --card: var(--glass-material);
  --glass: var(--glass-material);
  --dialog-glass: var(--glass-material);
}
body.public-mode { --glass-rgb: 249, 248, 242; --glass-material: rgba(var(--glass-rgb), var(--glass-fill)); }

body .login-photo .login-card,
body dialog.registration-dialog,
body.public-mode dialog.registration-dialog,
body dialog,
body nav,
body #stage,
body .assistant,
body .choice,
body .feed-card,
body .feed-card:first-child,
body .preview,
body #productionRoot .production-option,
body .production-option,
html[data-theme] body #productionRoot .production-option,
html[data-theme] body .production-option,
body .membership-checkout,
body .membership-qr {
  background: var(--glass-material);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-theme] body .membership { --membership-panel: var(--glass-material); }
body dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* The SDK loads its stylesheet later; only the outer material is overridden. */
body .captcha4_captcha .captcha4_box {
  background: var(--glass-material) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--dialog-edge) !important;
  border-radius: 18px !important;
}
body .captcha4_captcha .captcha4_header,
body .captcha4_captcha .captcha4_container,
body .captcha4_captcha .captcha4_footer { background: transparent !important; }
/* These negative-z background decorations were concealed by the SDK's opaque
   default panel. Keep them visually concealed with a translucent panel too.
   Challenge images, instructions, interaction and server verification are untouched. */
body .captcha4_captcha .captcha4_ai_detect,
body .captcha4_captcha .captcha4_ai_grid { visibility: hidden; }

/* Entire photograph: right edge 15% transparent -> left edge fully transparent. */
body .login-photo::before {
  opacity: 1;
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .85));
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .85));
}