/* Curated palettes keep profile controls legible without guessing image luminance. */
.profile-surface,
.profile-surface[data-profile-background="plain"] {
    border-radius: .65rem;
    background-color: #fff;
    color: #212529;
    overflow-wrap: anywhere;
}
.profile-surface[data-profile-background="porcelain-garden"] {
    color: #283a35;
    background-color: #faf7ee;
    background-image:
        radial-gradient(ellipse at 104% 2%, #849c7640 0 12%, transparent 12.4%),
        radial-gradient(ellipse at 98% -6%, #b4bf8f45 0 23%, transparent 23.4%),
        radial-gradient(ellipse at -9% 112%, #7c9e8b35 0 23%, transparent 23.4%),
        radial-gradient(ellipse at 1% 116%, #d1b86d33 0 28%, transparent 28.4%),
        repeating-linear-gradient(125deg, transparent 0 44px, #b8a4760b 45px 46px);
    box-shadow: inset 0 0 0 1px #b8a47635;
}
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) {
    color: #eff8fa;
    background-color: #101c2d;
    background-image:
        radial-gradient(ellipse at 95% -30%, #3cbfa148, transparent 58%),
        radial-gradient(ellipse at -20% 120%, #506cc94a, transparent 60%),
        linear-gradient(135deg, transparent 65%, #51b6ad13 66%, transparent 80%),
        repeating-linear-gradient(145deg, transparent 0 62px, #c2eeed06 63px 64px);
    box-shadow: inset 0 0 0 1px #80cfc52b;
}
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .text-muted {
    color: #b9cbd6 !important;
}
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) code { color: #a6e8da; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn-outline-primary { color: #a8d7ff; border-color: #a8d7ff; --bs-btn-color: #a8d7ff; --bs-btn-border-color: #86b4d5; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn-outline-secondary { color: #d4dfe6; border-color: #d4dfe6; --bs-btn-color: #d4dfe6; --bs-btn-border-color: #92a6b6; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn-outline-success { color: #95e2bc; border-color: #95e2bc; --bs-btn-color: #95e2bc; --bs-btn-border-color: #74b894; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn-outline-danger { color: #ffb6bd; border-color: #ffb6bd; --bs-btn-color: #ffb6bd; --bs-btn-border-color: #d4828c; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn:disabled { opacity: .65; }
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .form-control,
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .form-select {
    background-color: #192a3d;
    color: #eff8fa;
    border-color: #657b8e;
    color-scheme: dark;
}
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23eff8fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
.profile-surface:is([data-profile-background="porcelain-garden"], [data-profile-background="strawberry-cloud"], [data-profile-background="soft-linen"]) .text-muted { color: #59665f !important; }
.profile-background-preview {
    width: 100%;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .4rem;
    padding: 1.25rem;
}

.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn[class*="btn-outline-"]:hover,
.profile-surface:is([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"], [data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) .btn[class*="btn-outline-"]:focus-visible {
    background-color: #eff8fa;
    color: #101c2d;
    border-color: #eff8fa;
}
.profile-surface:is([data-profile-background="porcelain-garden"], [data-profile-background="strawberry-cloud"], [data-profile-background="soft-linen"]) .btn-outline-warning {
    color: #805700;
    border-color: #a87716;
}
.profile-surface:is([data-profile-background="porcelain-garden"], [data-profile-background="strawberry-cloud"], [data-profile-background="soft-linen"]) .btn-outline-warning:hover {
    background-color: #805700;
    color: #fff;
}

/* Soft entry tier: pink cream, cloud silhouettes and tiny sugar dots at the edges. */
.profile-surface[data-profile-background="strawberry-cloud"] {
    color: #4b3041;
    background-color: #fff3f5;
    background-image:
        radial-gradient(ellipse 48% 26% at 5% 105%, #fffcfa 65%, transparent 66%),
        radial-gradient(ellipse 40% 23% at 42% 112%, #fffcfa 65%, transparent 66%),
        radial-gradient(circle at 90% 11%, #fffaf0 0 3%, transparent 3.3%),
        radial-gradient(circle at 84% 20%, #e9a5ba75 0 .45%, transparent .65%),
        radial-gradient(circle at 94% 26%, #e9a5ba75 0 .5%, transparent .7%),
        radial-gradient(ellipse at 110% -10%, #efabc57a, transparent 52%),
        radial-gradient(ellipse at -10% 105%, #e8c6e975, transparent 55%);
    box-shadow: inset 0 0 0 1px #eac0ce80;
}
/* Mid tier: a sunset disc in the corner and overlapping hills below the content. */
.profile-surface[data-profile-background="sunset-terrace"] {
    color: #fff2e9;
    background-color: #39282e;
    background-image:
        radial-gradient(ellipse 100% 34% at -15% 110%, #7b4540 70%, transparent 70.5%),
        radial-gradient(ellipse 95% 35% at 112% 117%, #a85e4470 70%, transparent 70.5%),
        radial-gradient(circle at 96% 4%, #efba8170 0 13%, transparent 13.2%),
        repeating-linear-gradient(0deg, transparent 0 15px, #edb88906 15px 16px),
        radial-gradient(ellipse at 110% -10%, #c2774545, transparent 60%);
    box-shadow: inset 0 0 0 1px #e9ae7f40;
}
/* Premium: nested gold arches hug the edges; the middle remains near-black. */
.profile-surface[data-profile-background="gilded-obsidian"] {
    color: #f6edda;
    background-color: #18191b;
    background-image:
        repeating-radial-gradient(ellipse at 115% -25%, transparent 0 30px, #d8b66a24 31px 32px, transparent 33px 58px),
        linear-gradient(120deg, transparent 64%, #d2af5d0a 64.2%, transparent 83%),
        radial-gradient(ellipse at 100% 0%, #b58b3824, transparent 55%),
        radial-gradient(ellipse at 0% 100%, #bc934e15, transparent 45%);
    box-shadow: inset 0 0 0 1px #d9bb7955, inset 0 0 0 5px #18191b, inset 0 0 0 6px #d9bb7926;
}
.profile-surface:is([data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"]) .text-muted { color: #d4c4b7 !important; }
.profile-surface:is([data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"]) .form-control,
.profile-surface:is([data-profile-background="sunset-terrace"], [data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"]) .form-select {
    background-color: #211e20;
    border-color: #8e7a69;
    color: #fff2e9;
}
.profile-surface[data-profile-background="gilded-obsidian"] code { color: #f2d494; }
.profile-surface[data-profile-background="gilded-obsidian"] .btn-outline-primary,
.profile-surface[data-profile-background="gilded-obsidian"] .btn-outline-secondary { color: #f2d494; border-color: #bfa46a; }

/* The profile surface is the whole popup, with a floating close control. */
#userProfileModal .modal-content {
    background: transparent;
    border: 0;
    border-radius: .65rem;
}
#userProfileModalBody > .profile-surface { min-height: 120px; }
#userProfileModalBody > .profile-surface > :first-child { padding-right: 2rem; }
#userProfileModal .profile-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
#userProfileModal .modal-content:has([data-profile-background="after-hours"], [data-profile-background="midnight-aurora"]) > .btn-close,
#userProfileModal .modal-content:has([data-profile-background="sunset-terrace"]) > .btn-close,
#userProfileModal .modal-content:has([data-profile-background="gilded-obsidian"], [data-profile-background="jade-atelier"], [data-profile-background="moonlit-coast"], [data-profile-background="copper-foundry"]) > .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Retro arcade atmosphere stays at the edges, leaving the profile text quiet. */
.profile-surface[data-profile-background="after-hours"] {
    color: #f8eef6;
    background-color: #25182f;
    background-image:
        radial-gradient(circle at 97% 3%, #ed9b6940 0 12%, transparent 12.3%),
        linear-gradient(180deg, #25182f 45%, transparent 100%),
        repeating-linear-gradient(0deg, transparent 0 27px, #f08abd16 28px 29px),
        repeating-conic-gradient(from 78deg at 50% 68%, transparent 0deg 14deg, #b1a0ff12 14deg 14.3deg),
        radial-gradient(ellipse at 100% 0%, #a748652e, transparent 60%);
    box-shadow: inset 0 0 0 1px #ec99b542;
}
.profile-surface[data-profile-background="after-hours"] .text-muted { color: #d5bfd3 !important; }
.profile-surface[data-profile-background="after-hours"] .form-control,
.profile-surface[data-profile-background="after-hours"] .form-select {
    background-color: #2b2035;
    border-color: #917a9b;
}
.profile-surface[data-profile-background="after-hours"] code { color: #f5b7ce; }

.profile-surface[data-profile-background="soft-linen"] {
    color: #39362f;
    background-color: #f2eee6;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 3px, #8c7d6406 3px 4px),
        repeating-linear-gradient(90deg, transparent 0 3px, #ffffff28 3px 4px),
        linear-gradient(145deg, #fff7 0%, transparent 65%);
    box-shadow: inset 0 0 0 1px #b9ad983d;
}
.profile-surface[data-profile-background="jade-atelier"] {
    color: #eef4e9;
    background-color: #122b27;
    background-image:
        linear-gradient(153deg, transparent 0 76%, #decca54a 76.1% 76.25%, transparent 76.4%),
        linear-gradient(28deg, transparent 0 86%, #decca540 86.1% 86.25%, transparent 86.4%),
        radial-gradient(ellipse at 108% -35%, transparent 40%, #6a977332 40.5%, #88a17d20 43%, transparent 43.5%, #548a7618 46%, transparent 49%),
        radial-gradient(ellipse at -50% 110%, transparent 42%, #84aa8e18 44%, transparent 47%, #8da58120 48%, transparent 49%),
        linear-gradient(130deg, #77977b0e, transparent 50%, #030f0d35);
    box-shadow: inset 0 0 0 1px #ccb88865, inset 0 0 0 5px #122b27, inset 0 0 0 6px #ccb88828;
}
.profile-surface[data-profile-background="jade-atelier"] .text-muted { color: #c0d0c5 !important; }
.profile-surface[data-profile-background="jade-atelier"] .form-control,
.profile-surface[data-profile-background="jade-atelier"] .form-select {
    color: #eef4e9;
    background-color: #142822;
    border-color: #73877b;
}
.profile-surface[data-profile-background="jade-atelier"] code { color: #e6d2a8; }
.profile-surface[data-profile-background="jade-atelier"] .btn-outline-primary,
.profile-surface[data-profile-background="jade-atelier"] .btn-outline-secondary {
    color: #e6d2a8;
    border-color: #ac9f7f;
}

/* A pale moon and layered headlands frame a deep, glassy coastal night. */
.profile-surface[data-profile-background="moonlit-coast"] {
    color: #edf7ff;
    background-color: #0c2135;
    background-image:
        radial-gradient(circle at 88% 13%, #f5fbff 0 7%, #b9dcf266 7.3% 10%, transparent 10.4%),
        radial-gradient(ellipse 95% 35% at 110% 112%, #123c55 0 62%, transparent 62.5%),
        radial-gradient(ellipse 92% 31% at 22% 116%, #19516a 0 60%, transparent 60.5%),
        repeating-radial-gradient(ellipse at 48% 118%, transparent 0 17px, #91d5e916 18px 19px, transparent 20px 34px),
        linear-gradient(145deg, #163a57, #071725 72%);
    box-shadow: inset 0 0 0 1px #8cc8e74d, inset 0 -25px 50px #05111b66;
}
.profile-surface[data-profile-background="moonlit-coast"] .text-muted { color: #bed4e2 !important; }
.profile-surface[data-profile-background="moonlit-coast"] code { color: #aee8f6; }

/* Premium industrial tailoring: warm copper inlays over quiet charcoal steel. */
.profile-surface[data-profile-background="copper-foundry"] {
    color: #f7eee8;
    background-color: #1b1d20;
    background-image:
        linear-gradient(135deg, transparent 0 73%, #bb70462b 73.2% 73.8%, transparent 74%),
        linear-gradient(45deg, transparent 0 84%, #e09a6726 84.2% 84.7%, transparent 85%),
        repeating-linear-gradient(90deg, transparent 0 38px, #d0835510 39px 40px, transparent 41px 78px),
        radial-gradient(ellipse at 100% 0%, #b45f3538, transparent 53%),
        linear-gradient(155deg, #2a2d31, #121416 72%);
    box-shadow: inset 0 0 0 1px #d794696b, inset 0 0 0 5px #1a1c1f, inset 0 0 0 6px #a85f3c3d;
}
.profile-surface[data-profile-background="copper-foundry"] .text-muted { color: #d6c3b7 !important; }
.profile-surface[data-profile-background="copper-foundry"] code { color: #f0b58e; }
.profile-surface[data-profile-background="copper-foundry"] .btn-outline-primary,
.profile-surface[data-profile-background="copper-foundry"] .btn-outline-secondary {
    color: #efb48d;
    border-color: #b97851;
}