.profile-page { isolation: isolate; }
.profile-shell { position: relative; z-index: 1; }
.background-surface { --bg-base: #060d24; --bg-first: #174582; --bg-second: #38316c; --bg-third: #0e5670; background: var(--bg-base); }
.background-surface[data-palette="ocean"] { --bg-base: #031c27; --bg-first: #075268; --bg-second: #134d60; --bg-third: #146156; }
.background-surface[data-palette="plum"] { --bg-base: #1b0b26; --bg-first: #573064; --bg-second: #482347; --bg-third: #613148; }
.homepage-background { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.homepage-background[data-effect="current"] { display: none; }
.background-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.background-art i { position: absolute; display: block; animation-duration: 48s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: paused; }
[data-effect="gradient"] .background-art i { inset: -30%; background: radial-gradient(ellipse at 25% 35%, var(--bg-first), transparent 55%); }
[data-effect="gradient"] .background-art i:nth-child(2) { background: radial-gradient(ellipse at 75% 65%, var(--bg-second), transparent 55%); animation-duration: 60s; }
[data-effect="gradient"] .background-art i:nth-child(3) { background: radial-gradient(ellipse at 50% 90%, var(--bg-third), transparent 50%); animation-duration: 72s; }
[data-effect="dots"] .background-art i:first-child { inset: -96px; opacity: 0.55; background-image: radial-gradient(circle, var(--bg-first) 7px, transparent 8px); background-size: 48px 48px; animation-duration: 40s; animation-direction: normal; animation-timing-function: linear; }
[data-effect="dots"] .background-art i:not(:first-child) { display: none; }
[data-effect="shapes"] .background-art i { width: clamp(120px, 32vw, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--bg-first); opacity: 0.4; left: 8%; top: 8%; }
[data-effect="shapes"] .background-art i:nth-child(2) { left: 65%; top: 35%; border-radius: 22%; background: var(--bg-second); animation-duration: 64s; }
[data-effect="shapes"] .background-art i:nth-child(3) { left: 20%; top: 72%; width: clamp(80px, 20vw, 260px); background: var(--bg-third); animation-duration: 56s; }
@keyframes gradient-drift { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(8%, 6%) scale(1.12); } }
@keyframes dots-drift { to { transform: translate(48px, 48px); } }
@keyframes shapes-drift { from { transform: translate(-15%, -12%) rotate(-12deg); } to { transform: translate(20%, 25%) rotate(28deg); } }
[data-effect="gradient"] .background-art i { animation-name: gradient-drift; }
[data-effect="dots"] .background-art i { animation-name: dots-drift; }
[data-effect="shapes"] .background-art i { animation-name: shapes-drift; }
@media (prefers-reduced-motion: no-preference) {
    [data-animated="true"] .background-art i { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
    .background-art i { animation: none; }
}
.background-settings [hidden] { display: none; }
.background-settings { min-width: 0; padding: 1rem 0 0; margin: 1rem 0; border: 0; border-top: 1px solid #475569; }
.background-settings legend { font-size: 1.25rem; font-weight: 700; }
.background-settings label { margin-top: 0.75rem; }
.background-preview { position: relative; isolation: isolate; overflow: hidden; border-radius: 1rem; border: 1px solid #475569; min-height: 16rem; }
.background-preview[data-effect="current"] { background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.22), transparent 42rem), #020617; }
.background-preview-content { position: relative; z-index: 1; padding: 2rem 1rem; text-align: center; }
.background-preview-content strong { font-size: 1.5rem; }
.background-preview-content p { white-space: pre-line; overflow-wrap: anywhere; margin-top: 0.75rem; color: #b8c9db; }
.background-preview-link { display: block; padding: 1rem; border-radius: 2rem; background: #e2e8f0; color: #0f172a; }