/* Solo Life and Connection Map share one visual world without changing shopping or game pages. */
body.social-dark-shell {
    background:
        radial-gradient(circle at 18% 8%, rgb(49 91 255 / .13), transparent 26rem),
        radial-gradient(circle at 85% 24%, rgb(124 58 237 / .1), transparent 30rem),
        #0b0d12;
    color: #f8fafc;
    color-scheme: dark;
}

body.social-dark-shell #main-content {
    min-height: 70vh;
    background: transparent;
    color: #f8fafc;
}

body.social-dark-shell [data-public-header] {
    border-color: rgb(255 255 255 / .09) !important;
    background: rgb(11 13 18 / .92) !important;
    color: #f8fafc;
    box-shadow: 0 1px 0 rgb(0 0 0 / .24);
}

body.social-dark-shell [data-public-header] [class*="text-solo-ink"],
body.social-dark-shell [data-public-header] [class*="text-slate-"] {
    color: rgb(255 255 255 / .62) !important;
}

body.social-dark-shell [data-public-header] .font-display[class*="text-solo-ink"],
body.social-dark-shell [data-public-header] #user-menu [class*="font-black"][class*="text-solo-ink"] {
    color: #fff !important;
}

body.social-dark-shell [data-public-header] .public-primary-link {
    border: 1px solid transparent;
    background: rgb(255 255 255 / .065) !important;
    color: rgb(255 255 255 / .58) !important;
}

body.social-dark-shell [data-public-header] .public-primary-link:not([aria-current="page"]):hover {
    background: rgb(255 255 255 / .1) !important;
    color: #fff !important;
}

body.social-dark-shell [data-public-header] .public-primary-link[aria-current="page"] {
    border-color: rgb(255 255 255 / .16);
    background: linear-gradient(135deg, #315bff, #7c3aed) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgb(92 114 255 / .18), 0 8px 24px rgb(49 91 255 / .3) !important;
}

body.social-dark-shell [data-public-header] .public-primary-link[aria-current="page"]:hover {
    background: linear-gradient(135deg, #4168ff, #8b4bf0) !important;
    color: #fff !important;
}

body.social-dark-shell [data-public-header] button[class~="bg-white"],
body.social-dark-shell [data-public-header] a[class~="bg-white"] {
    border-color: rgb(255 255 255 / .1) !important;
    background: rgb(255 255 255 / .06) !important;
    color: rgb(255 255 255 / .76) !important;
}

body.social-dark-shell [data-public-header] #user-menu > button:hover {
    background: rgb(255 255 255 / .06) !important;
}

body.social-dark-shell #user-dropdown {
    border-color: rgb(255 255 255 / .1) !important;
    background: #1b1c22 !important;
    box-shadow: 0 20px 55px rgb(0 0 0 / .42) !important;
}

body.social-dark-shell #user-dropdown a,
body.social-dark-shell #user-dropdown button {
    color: rgb(255 255 255 / .72) !important;
}

body.social-dark-shell #user-dropdown a:hover,
body.social-dark-shell #user-dropdown button:hover {
    background: rgb(255 255 255 / .07) !important;
    color: #fff !important;
}

body.social-dark-shell #user-dropdown form {
    border-color: rgb(255 255 255 / .08) !important;
}

body.social-dark-shell #main-content .surface-card,
body.social-dark-shell #main-content .bg-white,
body.social-dark-shell #main-content .bg-white\/60,
body.social-dark-shell #main-content .bg-white\/75,
body.social-dark-shell #main-content .bg-white\/90,
body.social-dark-shell #main-content .bg-white\/95,
body.social-dark-shell #main-content .bg-solo-paper,
body.social-dark-shell #main-content .bg-solo-cream,
body.social-dark-shell #main-content .bg-slate-50,
body.social-dark-shell #main-content .bg-slate-100,
body.social-dark-shell #main-content .bg-slate-200 {
    border-color: rgb(255 255 255 / .09) !important;
    background-color: #191a20 !important;
    color: #f8fafc !important;
}

body.social-dark-shell #main-content .bg-solo-sky {
    background-color: rgb(49 91 255 / .16) !important;
}

body.social-dark-shell #main-content .bg-emerald-50 {
    background-color: rgb(16 185 129 / .12) !important;
}

body.social-dark-shell #main-content .bg-amber-50 {
    background-color: rgb(245 158 11 / .12) !important;
}

body.social-dark-shell #main-content .bg-rose-50 {
    background-color: rgb(244 63 94 / .12) !important;
}

body.social-dark-shell #main-content .bg-violet-50 {
    background-color: rgb(124 58 237 / .14) !important;
}

body.social-dark-shell #main-content [class*="border-solo-ink"],
body.social-dark-shell #main-content [class*="divide-solo-ink"] {
    border-color: rgb(255 255 255 / .1) !important;
}

body.social-dark-shell #main-content [class*="ring-solo-ink"] {
    --tw-ring-color: rgb(255 255 255 / .09) !important;
}

body.social-dark-shell #main-content [class*="text-solo-ink"],
body.social-dark-shell #main-content [class*="text-[#111218]"] {
    color: rgb(255 255 255 / .9) !important;
}

body.social-dark-shell #main-content [class*="text-slate-700"],
body.social-dark-shell #main-content [class*="text-slate-600"],
body.social-dark-shell #main-content [class*="text-slate-500"] {
    color: rgb(255 255 255 / .62) !important;
}

body.social-dark-shell #main-content [class*="text-slate-400"],
body.social-dark-shell #main-content [class*="text-slate-300"] {
    color: rgb(255 255 255 / .42) !important;
}

body.social-dark-shell #main-content [class*="text-solo-blue"] {
    color: #91a4ff !important;
}

body.social-dark-shell #main-content [class*="text-emerald-"] {
    color: #6ee7b7 !important;
}

body.social-dark-shell #main-content [class*="text-amber-"] {
    color: #fcd34d !important;
}

body.social-dark-shell #main-content [class*="text-violet-"] {
    color: #c4b5fd !important;
}

body.social-dark-shell #main-content [class*="text-rose-"] {
    color: #fb7185 !important;
}

body.social-dark-shell #main-content .bg-solo-lime[class*="text-solo-ink"],
body.social-dark-shell #main-content .bg-solo-blue[class*="text-white"],
body.social-dark-shell #main-content .bg-rose-600[class*="text-white"] {
    color: #fff !important;
}

body.social-dark-shell #main-content .bg-solo-lime[class*="text-solo-ink"] {
    color: #172033 !important;
}

body.social-dark-shell #main-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.social-dark-shell #main-content textarea,
body.social-dark-shell #main-content select {
    border-color: rgb(255 255 255 / .11) !important;
    background-color: #22232a !important;
    color: #f8fafc !important;
}

body.social-dark-shell #main-content input::placeholder,
body.social-dark-shell #main-content textarea::placeholder {
    color: rgb(255 255 255 / .32) !important;
}

body.social-dark-shell #main-content option {
    background: #22232a;
    color: #f8fafc;
}

body.social-dark-shell #main-content [class*="hover:bg-white"]:hover,
body.social-dark-shell #main-content [class*="hover:bg-slate-50"]:hover,
body.social-dark-shell #main-content [class*="hover:bg-slate-100"]:hover {
    background-color: rgb(255 255 255 / .08) !important;
}

/* The self-insight dialogs live inside the dark social profile header. Keep every
   panel in one dark palette so inherited light text never lands on a light card. */
body.social-dark-shell #main-content .self-insight-dialog {
    border: 1px solid rgb(255 255 255 / .1) !important;
    background: #17181d !important;
    color: #f8fafc !important;
}

body.social-dark-shell #main-content .self-insight-result-hero {
    border: 1px solid rgb(251 191 36 / .28) !important;
    background: linear-gradient(135deg, #302718 0%, #202126 48%, #142923 100%) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
    color: #f8fafc !important;
}

body.social-dark-shell #main-content .self-insight-result-summary {
    border: 1px solid rgb(255 255 255 / .09) !important;
    background: rgb(255 255 255 / .065) !important;
    color: rgb(255 255 255 / .8) !important;
}

body.social-dark-shell #main-content .self-insight-reset-note {
    border: 1px solid rgb(251 113 133 / .18) !important;
    background: rgb(244 63 94 / .08) !important;
    color: #fda4af !important;
}

body.social-dark-shell #main-content .community-review-card--no-image {
    background: linear-gradient(145deg, #191a20 0%, #20222a 58%, #151b29 100%) !important;
}

body.social-dark-shell [data-public-footer] {
    border-color: rgb(255 255 255 / .09) !important;
    background: #0d0f14 !important;
    color: #f8fafc !important;
}

body.social-dark-shell [data-public-footer] [class*="border-solo-ink"] {
    border-color: rgb(255 255 255 / .09) !important;
}

body.social-dark-shell [data-public-footer] [class*="text-solo-ink"] {
    color: rgb(255 255 255 / .58) !important;
}

body.social-dark-shell [data-public-footer] .font-display,
body.social-dark-shell [data-public-footer] strong {
    color: #fff !important;
}

body.social-dark-shell .mobile-bottom-navigation {
    border-color: rgb(255 255 255 / .09) !important;
    background: rgb(14 16 21 / .96) !important;
    box-shadow: 0 -1px 0 rgb(255 255 255 / .06), 0 -12px 28px rgb(0 0 0 / .3) !important;
}

body.social-dark-shell .mobile-bottom-navigation a {
    color: rgb(255 255 255 / .42) !important;
}

body.social-dark-shell .mobile-bottom-navigation a[class*="bg-solo-sky"],
body.social-dark-shell .mobile-bottom-navigation a[class*="bg-violet-50"] {
    background: rgb(82 104 255 / .18) !important;
    color: #aab7ff !important;
}

@media (prefers-reduced-motion: reduce) {
    body.social-dark-shell *,
    body.social-dark-shell *::before,
    body.social-dark-shell *::after {
        scroll-behavior: auto !important;
    }
}