.background-effect-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.public-background-effect { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.background-motion-toggle { color: var(--text,#eee); background: var(--surface,#171727); border: 1px solid var(--line,#ffffff30); border-radius: 20px; padding: 8px 12px; font: 500 11px/1.5 var(--font-body,sans-serif); cursor: pointer; white-space: normal; }
.background-motion-toggle:disabled { cursor: default; opacity: .8; }
.donate-topbar:has(.background-motion-toggle) { flex-wrap: wrap; }
.donate-topbar:has(.background-motion-toggle) .topbar-caption { margin-left: auto; }
.background-effect-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(115px,1fr)); gap: 10px; margin: 16px 0; }
.background-effect-option { display: flex; align-items: center; justify-content: center; gap: 8px; color: #e1d5ee; background: #171c2c; border: 1px solid #ffffff26; border-radius: 12px; padding: 14px 10px; cursor: pointer; font: 600 15px 'Rajdhani',sans-serif; }
.background-effect-option span { font-size: 20px; }
.background-effect-option[aria-pressed="true"] { border-color: #b496fc; background: #38274d; box-shadow: 0 0 0 1px #b496fc; }
.background-effect-option:focus-visible { outline: 3px solid #00d1ef; outline-offset: 3px; }
.background-animation-controls { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; gap: 16px; }
.background-animation-controls input[type="range"] { width: 100%; accent-color: #b496fc; }
.background-animation-preview { position: relative; height: 260px; border-radius: 16px; border: 1px solid #ffffff26; overflow: hidden; background: radial-gradient(ellipse at 75% 10%,#3b235c,#0c1424); background-size: cover; background-position: center; }
.background-animation-preview.light { background: #f9f1f6; background-size: cover; background-position: center; }
.background-preview-caption { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 8px; background: #151523df; color: #eadff8; font-size: 13px; pointer-events: none; }
@media(max-width:600px) { .background-animation-controls { grid-template-columns: 1fr; gap: 2px; }.background-animation-preview { height: 230px; }.background-motion-toggle { margin-left: auto; } }