.profile-design-back { display:inline-flex; align-items:center; align-self:flex-start; gap:10px; margin-bottom:18px; color:#68717d; font-size:13px; text-decoration:none; }
.profile-design-back:hover { color:#202329; }
.profile-design-publish-actions { display:flex; align-items:center; gap:8px; }
.profile-design-preview-toggle { display:none; width:40px; height:40px; padding:0; border:0; border-radius:8px; background:#f0f2f5; color:#283242; cursor:pointer; }
.profile-design-preview-dialog { width:min(430px,calc(100% - 24px)); height:min(780px,calc(100dvh - 36px)); max-height:calc(100dvh - 36px); margin:auto; padding:0; overflow:hidden; border:0; border-radius:16px; background:#fff; }
.profile-design-preview-dialog::backdrop { background:#11182099; backdrop-filter:blur(5px); }
.profile-design-preview-dialog > button { display:grid; position:absolute; z-index:10; top:12px; right:12px; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#ffffffeb; color:#29313d; }
.profile-design-preview-dialog [data-design-preview-content],.profile-visitor-preview--design { height:100%; min-height:0; }
.profile-design-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:26px 0; overflow-y:auto; }
.profile-design-option { display:flex; min-width:0; flex-direction:column; gap:18px; position:relative; padding:0 0 18px; border-radius:8px; background:#f7f8fa; color:#22262e; text-decoration:none; overflow:hidden; transition:background .2s; }
.profile-design-option:hover { background:#f0f2f5; color:#22262e; }
.profile-design-option > span:not(.profile-design-option-art) { padding:0 20px; }
.profile-design-option strong { display:block; margin-bottom:7px; font-size:20px; line-height:1.3; }
.profile-design-option small { display:block; padding-right:20px; color:#737b88; font-size:14px; line-height:1.55; }
.profile-design-option > i { position:absolute; right:18px; bottom:22px; color:#737b88; }
.profile-design-option-art { display:flex; position:relative; align-items:center; justify-content:center; gap:8px; height:160px; background:#e9edf2; background-position:center; background-size:cover; }
.profile-design-option-art > i { display:grid; position:absolute; z-index:1; place-items:center; width:54px; height:54px; border-radius:8px; background:#fff; color:#273142; font-size:25px; box-shadow:0 5px 20px #20232912; }
.profile-design-option-art--themes > span { width:54px; height:96px; border-radius:6px; background:#fefefe; box-shadow:0 4px 16px #20232912; transform:rotate(-10deg); }
.profile-design-option-art--themes > span:nth-of-type(2) { height:110px; background:#293640; transform:rotate(0deg); }
.profile-design-option-art--themes > span:nth-of-type(3) { background:#d3e2df; transform:rotate(10deg); }
.profile-background-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.profile-background-card { min-width:0; padding:0; border:0; border-radius:8px; overflow:hidden; background:#f5f6f8; color:#29313d; text-align:left; cursor:pointer; }
.profile-background-card > img,.profile-background-default { display:flex; align-items:center; justify-content:center; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.profile-background-default { background:#edf0f3; color:#84909f; font-size:30px; }
.profile-background-caption { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; font-size:13px; line-height:1.4; }
.profile-background-caption i { opacity:0; color:#255c43; }
.profile-background-card.is-selected { box-shadow:inset 0 0 0 2px #2e3745; }
.profile-background-card.is-selected .profile-background-caption i { opacity:1; }
.profile-design-option:focus-visible,.profile-background-card:focus-visible { outline:2px solid #6443df; outline-offset:3px; }
.profile-visitor-preview[data-profile-background],body.public-visitor-profile-page[data-profile-background] {
    background:linear-gradient(color-mix(in srgb,var(--collection-bg,var(--profile-background-tint,#fff)) var(--selected-background-start,35%),transparent),color-mix(in srgb,var(--collection-bg,var(--profile-background-tint,#fff)) var(--selected-background-end,70%),transparent)),var(--selected-profile-background) center / cover !important;
}
[data-profile-background][data-theme-tone="dark"] { --selected-background-start:50%; --selected-background-end:50%; }
.public-visitor-device:has([data-profile-background][data-theme-tone="dark"]) { background:#0003; }
.profile-visitor-preview[data-profile-background]::before,.profile-visitor-preview[data-profile-background]::after { display:none !important; }
.profile-visitor-preview[data-profile-background] > .profile-visitor-preview-body { background:transparent !important; }
.profile-visitor-preview[data-profile-background] > .profile-visitor-preview-cover { background:transparent !important; }
.profile-visitor-preview[data-profile-background][data-theme-layout="poster"] .profile-visitor-preview-body h2 { margin-top:14px; padding:0; width:100%; background:transparent; }
:is(.profile-visitor-preview,body.public-visitor-profile-page):is([data-profile-theme="nocturne"],[data-profile-theme="solar"],[data-profile-theme="portrait"],[data-profile-theme="prism"],[data-profile-theme="ember"],[data-profile-theme="orbit"]) { --profile-background-tint:#11141c; }
body.public-visitor-profile-page[data-profile-background]::before,body.public-visitor-profile-page[data-profile-background]::after { display:none !important; }
@media(min-width:992px) {
    .public-visitor-device .profile-visitor-preview[data-profile-background] { background:transparent !important; }
    .profile-editor-workspace.is-theme-mode .profile-design-studio { height:100%; max-height:100%; }
}
@media(max-width:767px) {
    .profile-design-options { gap:12px; }
    .profile-design-option-art { height:120px; }
    .profile-design-option > span:not(.profile-design-option-art) { padding:0 13px; }
    .profile-design-option strong { font-size:18px; }
    .profile-design-option small { font-size:13px; }
    .profile-background-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media(max-width:991.98px) { .profile-design-preview-toggle { display:grid; place-items:center; } }
@media(max-width:359px) {
    .profile-design-options { grid-template-columns:1fr; }
    .profile-theme-studio .profile-theme-intro { flex-direction:column; align-items:stretch; }
    .profile-theme-studio .profile-theme-intro-actions { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .profile-design-option { transition:none; } }