← Back to Layouts
Xbox 360 Dashboard

Author: Def3ct
Category: Games
Created: May 12, 2026
The Xbox 360 dashboard! Has mobile styles as well so phones dont break!
See Layout
Comments (5)

VanillN 05/24/2026 2:03 PM
This is beautiful!!!
neenbean 07/23/2026 4:14 AM
This is sooo good!! 🙏🏻
Lordofthe_uhh 08/06/2026 3:22 PM
This is so awesome omg
DominikDonut0009 08/09/2026 8:47 AM
This is beautiful
Creeperatom9041 08/20/2026 9:57 PM
This is so rad but OHHH MY PCCCCCCCC
You must log in to comment.
CSS Code

<div class="nxe-backdrop"  aria-hidden="true"></div>
<div class="nxe-floor"     aria-hidden="true"></div>
<div class="nxe-bokeh"     aria-hidden="true"></div>
<div class="nxe-channels"  aria-hidden="true">
    <span class="nxe-chan">Inside Xbox</span>
    <span class="nxe-chan">Friends</span>
    <span class="nxe-chan">Video Marketplace</span>
    <span class="nxe-chan">Game Marketplace</span>
    <span class="nxe-chan nxe-chan-active">My Xbox</span>
</div>
<div class="nxe-pan-zone nxe-pan-far-left"  aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-left" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-right" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-far-right"  aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-left"  aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-right" aria-hidden="true"></div>
<div class="nxe-hud" aria-hidden="true">
    <div class="nxe-counter"><span class="nxe-idx">1</span> of <span class="nxe-total">6</span></div>
    <div class="nxe-select"><span class="nxe-a-btn">A</span> Select</div>
</div>
<div class="nxe-guide" aria-hidden="true"></div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');


body.profile-page,
body.profile-page.theme-dark,
body.profile-page.theme-light {
    background: #4a7818 !important;
    color: #ffffff !important;
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100vh !important;
}
html:has(body.profile-page) {
    overflow: hidden !important;
    height: 100vh !important;
}
body.profile-page main { background: transparent !important; }
body.profile-page .master-container {
    background: transparent !important;
    box-shadow: none !important;
}


body.profile-page .blurbs .nxe-backdrop,
body.profile-page .blurbs .nxe-floor,
body.profile-page .blurbs .nxe-bokeh,
body.profile-page .blurbs .nxe-channels,
body.profile-page .blurbs .nxe-pan-zone,
body.profile-page .blurbs .nxe-pan-arrow,
body.profile-page .blurbs .nxe-hud,
body.profile-page .blurbs .nxe-guide {
    display: none !important;
}


body.profile-page .fr-layout-html,
body.profile-page .fr-layout-html * {
    contain: none !important;
    content-visibility: visible !important;
}


.nxe-backdrop {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 75% -8%, rgba(255,255,255,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 130% 100% at 50% 50%, rgba(155,205,75,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(226,240,164,0.52) 0%, rgba(163,207,72,0.58) 25%, rgba(94,142,31,0.62) 60%, rgba(45,74,18,0.70) 92%, rgba(22,39,10,0.76) 100%),
        url('https://friendrewind.com/uploads/gallery/1/img_69eedc6d7a93c4.37411853.webp')
            no-repeat center center;
    background-size: auto, auto, auto, cover;
    background-blend-mode: normal, normal, multiply, normal;
}


body.profile-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 75% -8%, rgba(255,255,255,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 130% 100% at 50% 50%, rgba(155,205,75,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(226,240,164,0.52) 0%, rgba(163,207,72,0.58) 25%, rgba(94,142,31,0.62) 60%, rgba(45,74,18,0.70) 92%, rgba(22,39,10,0.76) 100%),
        url('https://friendrewind.com/uploads/gallery/1/img_69eedc6d7a93c4.37411853.webp')
            no-repeat center center;
    background-size: auto, auto, auto, cover;
    background-blend-mode: normal, normal, multiply, normal;
}


.nxe-floor {
    position: fixed; inset: auto 0 0 0; height: 38vh;
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 90% 100% at 50% 100%, rgba(200,220,180,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255,255,255,0.18) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(20,35,10,0.45) 55%, rgba(8,16,4,0.8) 100%);
}
.nxe-floor::after {
    content: ''; position: absolute; inset: 35% 0 0 0;
    background:
        repeating-radial-gradient(ellipse 60% 30% at 50% 100%,
            transparent 0px, transparent 24px,
            rgba(255,255,255,0.04) 24px, rgba(255,255,255,0.04) 25px);
    opacity: 0.7;
}


.nxe-bokeh {
    position: fixed; inset: -10%; z-index: 1;
    pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(circle 90px at 10% 18%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(circle 55px at 25% 70%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 40px at 78% 28%, rgba(255,255,255,0.24), transparent 70%),
        radial-gradient(circle 110px at 88% 82%, rgba(255,255,255,0.14), transparent 70%),
        radial-gradient(circle 65px at 48% 12%, rgba(255,255,255,0.18), transparent 70%),
        radial-gradient(circle 50px at 62% 90%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 30px at 40% 45%, rgba(255,255,255,0.12), transparent 70%);
    animation: nxe-drift 26s ease-in-out infinite alternate;
}
@keyframes nxe-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(28px, -22px, 0) scale(1.04); }
    100% { transform: translate3d(-12px, 14px, 0) scale(1); }
}




body.profile-page .myspace-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}


body.profile-page .myspace-header .top-nav,
body.profile-page .myspace-header .top {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}


body.profile-page .myspace-header .nav-logo,
body.profile-page .myspace-header #logo {
    filter: brightness(0) invert(1) !important;
    opacity: 0.70 !important;
}


body.profile-page .myspace-header .search-box,
body.profile-page .myspace-header .search-form {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
body.profile-page .myspace-header .search-input {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-right: none !important;
    border-radius: 999px 0 0 999px !important;
    color: #fff !important;
    font: 300 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    outline: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.profile-page .myspace-header .search-input:focus {
    background: rgba(255,255,255,0.20) !important;
    border-color: rgba(190,255,90,0.55) !important;
}
body.profile-page .myspace-header .search-input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
body.profile-page .myspace-header .search-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 60%),
        linear-gradient(180deg, #9ed03a 0%, #4a7818 100%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-left: none !important;
    border-radius: 0 999px 999px 0 !important;
    color: #fff !important;
    font: 600 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45) !important;
    transition: filter 0.15s !important;
}
body.profile-page .myspace-header .search-button:hover {
    filter: brightness(1.12) !important;
}


body.profile-page .myspace-header .main-nav-wrapper,
body.profile-page .myspace-header .links,
body.profile-page .myspace-header .main-nav-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


body.profile-page .myspace-header .main-nav li a {
    color: rgba(255,255,255,0.68) !important;
    font: 300 12px/1 'Open Sans', 'Segoe UI', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    transition: color 0.18s, text-shadow 0.18s !important;
}
body.profile-page .myspace-header .main-nav li a:hover,
body.profile-page .myspace-header .main-nav li a.active {
    color: #fff !important;
    background: transparent !important;
    text-shadow:
        0 0 8px rgba(190,255,90,0.95),
        0 0 18px rgba(150,220,40,0.55),
        0 1px 2px rgba(0,0,0,0.6) !important;
}


body.profile-page .myspace-header .dropdown-menu,
body.profile-page .myspace-header li.dropdown > ul,
body.profile-page .myspace-header li.dropdown > div {
    background: linear-gradient(180deg,
        rgba(18,30,6,0.92) 0%,
        rgba(10,18,3,0.96) 100%) !important;
    border: 1px solid rgba(190,255,90,0.28) !important;
    border-radius: 8px !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,0.65),
        0 0 24px rgba(130,210,40,0.10),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
}
body.profile-page .myspace-header .dropdown-menu a,
body.profile-page .myspace-header li.dropdown > ul li a,
body.profile-page .myspace-header li.dropdown > div a {
    color: rgba(255,255,255,0.80) !important;
    font: 300 12px/1.4 'Open Sans', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    transition: color 0.15s, background 0.15s !important;
    display: block !important;
}
body.profile-page .myspace-header .dropdown-menu a:hover,
body.profile-page .myspace-header li.dropdown > ul li a:hover,
body.profile-page .myspace-header li.dropdown > div a:hover {
    background: linear-gradient(90deg, rgba(190,255,90,0.18) 0%, transparent 100%) !important;
    color: #fff !important;
    text-shadow:
        0 0 6px rgba(190,255,90,0.65),
        0 1px 2px rgba(0,0,0,0.5) !important;
}



.nxe-channels {
    position: fixed; top: 130px; left: 56px;
    z-index: 50;
    display: flex; flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    font-weight: 300; line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.nxe-chan {
    color: rgba(255,255,255,0.55);
    padding: 2px 0; letter-spacing: 0.4px;
    font-size: 15px;
    font-style: normal;
    display: block;
}
.nxe-chan:nth-child(1) { color: rgba(255,255,255,0.30); font-size: 12.5px; }
.nxe-chan:nth-child(2) { color: rgba(255,255,255,0.40); font-size: 13.5px; }
.nxe-chan:nth-child(3) { color: rgba(255,255,255,0.50); font-size: 14px; }
.nxe-chan:nth-child(4) { color: rgba(255,255,255,0.62); font-size: 15px; }
.nxe-chan-active {
    color: #ffffff !important;
    font-size: 30px !important;
    margin-top: 4px; font-weight: 300 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 24px rgba(190,255,90,0.25);
}

.nxe-hud {
    position: fixed; left: 50%; bottom: 22px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex; flex-direction: row; gap: 18px;
    align-items: center;
    color: #ffffff;
    font-size: 12px; letter-spacing: 0.6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}
.nxe-counter { color: rgba(255,255,255,0.85); font-weight: 600; }
.nxe-idx, .nxe-total, .nxe-counter span { font-style: normal; }
.nxe-select  { display: inline-flex; align-items: center; gap: 8px; }
.nxe-a-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d6f48a 0%, #88c022 55%, #4a7818 100%);
    border: 1px solid rgba(255,255,255,0.65);
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff; font: 700 11px/1 'Open Sans', sans-serif;
    font-style: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    box-shadow: 0 3px 8px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.5),
                0 0 14px rgba(190,255,90,0.35);
}

.nxe-guide {
    position: fixed; right: 32px; bottom: 24px;
    width: 42px; height: 42px;
    border-radius: 50%; z-index: 50;
    background: radial-gradient(circle at 32% 32%, #f0ffb3 0%, #b6e04f 28%, #5d8e1f 70%, #2c4a10 100%);
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 32px rgba(190,255,90,0.7),
                0 0 8px rgba(255,255,255,0.5) inset,
                0 4px 10px rgba(0,0,0,0.55);
    animation: nxe-pulse 3.6s ease-in-out infinite;
}
.nxe-guide::before {
    content: ''; position: absolute; inset: 28% 28% 28% 28%;
    background:
        radial-gradient(circle, transparent 36%, rgba(255,255,255,0.9) 38%, rgba(255,255,255,0.9) 44%, transparent 46%),
        linear-gradient(45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%);
    border-radius: 50%;
}
@keyframes nxe-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(190,255,90,0.55), inset 0 0 8px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.55); }
    50%      { box-shadow: 0 0 44px rgba(220,255,120,0.85), inset 0 0 14px rgba(255,255,255,0.7), 0 4px 10px rgba(0,0,0,0.55); }
}






body.profile-page main { padding: 0 !important; min-height: 0 !important; }
body.profile-page { overflow-x: hidden; }

body.profile-page .master-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 5;
}


body.profile-page .col.w-40.left > span[itemprop="name"] {
    position: fixed !important;
    top: 210px; left: 56px;
    z-index: 51; pointer-events: none;
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font: 300 52px/1 'Open Sans', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 22px rgba(190,255,90,0.25) !important;
    padding-left: 22px;
    position: relative;
}

body.profile-page .col.w-40.left > span[itemprop="name"] h1::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 12px;
    border-color: transparent transparent transparent #ffffff;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

body.profile-page .col.w-40.left > span[itemprop="name"] h1 .fr-verified-badge svg {
    width: 26px !important; height: 26px !important;
    margin-left: 6px;
    vertical-align: -3px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 .profile-role-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    font: 700 11px/1 'Open Sans', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #b6e04f, #4a7820);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    vertical-align: middle;
}
.nxe-chan-active { display: none !important; }


body.profile-page .col.w-40.left,
body.profile-page .col.right,
body.profile-page .row.profile .col { display: contents !important; }


body.profile-page .col.w-40.left > p,
body.profile-page .col.w-40.left > script,
body.profile-page .col.w-40.left > br,
body.profile-page .col.w-40.left > center,
body.profile-page .col.w-40.left > .mood,
body.profile-page .col.w-40.left > div.mood,
body.profile-page .col.right > p,
body.profile-page .col.right > script,
body.profile-page .col.right > br,
body.profile-page .col.right > center,
body.profile-page .col.right > .mood,
body.profile-page .col.right > div.mood {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

body.profile-page .col.w-40.left > :not(.general-about):not(.contact):not(.url-info):not(.table-section):not(.blurbs):not(.blog-preview):not(.photos-preview):not(.videos-preview):not(.friends):not(.profile-info):not([itemprop="name"]):not(#comments):not(#profile-playlist-container),
body.profile-page .col.right > :not(.general-about):not(.contact):not(.url-info):not(.table-section):not(.blurbs):not(.blog-preview):not(.photos-preview):not(.videos-preview):not(.friends):not(.profile-info):not([itemprop="name"]):not(#comments):not(#profile-playlist-container) {
    display: none !important;
}


body.profile-page .row.profile > meta,
body.profile-page .row.profile > script,
body.profile-page .row.profile > br,
body.profile-page .row.profile > p:not(.heading p) {
    display: none !important;
}


.nxe-pan-zone, .nxe-pan-arrow { display: none !important; }


body.profile-page .row.profile {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(100vh - 90px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: 1800px;
    perspective-origin: 32% 48%;
    transform-style: preserve-3d;
    pointer-events: none;
}
body.profile-page .row.profile > * { pointer-events: auto; }
body.profile-page .row.profile::-webkit-scrollbar { display: none !important; }


body.profile-page .row.profile > meta,
body.profile-page .row.profile > script { display: none !important; }


body.profile-page .row.profile .general-about               { --cidx: 0; }

body.profile-page .row.profile .contact                     { --cidx: 0; }
body.profile-page .row.profile #profile-playlist-container  { --cidx: 1; }
body.profile-page .row.profile .table-section               { --cidx: 2; }
body.profile-page .row.profile .blurbs                      { --cidx: 3; }
body.profile-page .row.profile .blog-preview                { --cidx: 4; }
body.profile-page .row.profile .photos-preview              { --cidx: 5; }
body.profile-page .row.profile .videos-preview              { --cidx: 6; }
body.profile-page .row.profile .friends                     { --cidx: 7; }
body.profile-page .row.profile #comments                    { --cidx: 8; }
body.profile-page .row.profile .profile-info                { --cidx: 9; }


body.profile-page .row.profile .url-info,
body.profile-page .col.w-40.left > .url-info,
body.profile-page .col.right > .url-info { display: none !important; }


body.profile-page .row.profile .general-about,
body.profile-page .row.profile .blurbs,
body.profile-page .row.profile .contact,
body.profile-page .row.profile .friends,
body.profile-page .row.profile .blog-preview,
body.profile-page .row.profile .photos-preview,
body.profile-page .row.profile .videos-preview,
body.profile-page .row.profile .table-section,
body.profile-page .row.profile #comments,
body.profile-page .row.profile .profile-info,
body.profile-page .row.profile #profile-playlist-container {
    position: absolute !important;
    left: 290px !important;
    top: 50% !important;
    width: 310px !important;
    height: min(440px, calc(100vh - 200px)) !important;
    min-height: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    background:
        linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 22px 40px rgba(0,0,0,0.55),
        inset 0 -22px 36px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.65) !important;
    overflow: hidden !important;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    
    --cstep: clamp(55px, 7vw, 115px);
    transform:
        translate(calc(var(--cidx, 0) * var(--cstep)), -50%)
        translateZ(calc(var(--cidx, 0) * -45px))
        rotateY(calc(var(--cidx, 0) * -7deg))
        scale(calc(1 - var(--cidx, 0) * 0.04));
    z-index: calc(60 - var(--cidx, 0)) !important;
    opacity: calc(1 - var(--cidx, 0) * 0.05);
    filter: brightness(calc(1 - var(--cidx, 0) * 0.025));
    transition:
        transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1.05),
        box-shadow 0.3s ease,
        filter 0.3s ease,
        opacity 0.3s ease;
    cursor: pointer;
}


body.profile-page .row.profile .general-about:hover,
body.profile-page .row.profile .contact:hover,
body.profile-page .row.profile .blurbs:hover,
body.profile-page .row.profile .friends:hover,
body.profile-page .row.profile .blog-preview:hover,
body.profile-page .row.profile .photos-preview:hover,
body.profile-page .row.profile .videos-preview:hover,
body.profile-page .row.profile .table-section:hover,
body.profile-page .row.profile #comments:hover,
body.profile-page .row.profile .profile-info:hover,
body.profile-page .row.profile #profile-playlist-container:hover,

body.profile-page .row.profile:has(.contact:hover) .general-about,
body.profile-page .row.profile:has(.general-about:hover) .contact {
    transform:
        translate(calc(var(--cidx, 0) * var(--cstep) - 12px), -50%)
        translateZ(120px)
        rotateY(0deg)
        scale(1.05) !important;
    opacity: 1 !important;
    filter: brightness(1.08) saturate(1.12) !important;
    z-index: 1000 !important;
    box-shadow:
        0 28px 52px rgba(0,0,0,0.6),
        0 0 36px rgba(190,255,90,0.75),
        inset 0 -22px 36px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
}


body.profile-page .row.profile .general-about::before,
body.profile-page .row.profile .blurbs::before,
body.profile-page .row.profile .friends::before,
body.profile-page .row.profile .blog-preview::before,
body.profile-page .row.profile .photos-preview::before,
body.profile-page .row.profile .videos-preview::before,
body.profile-page .row.profile .profile-info::before,
body.profile-page .row.profile .table-section::before,
body.profile-page .row.profile #comments::before,
body.profile-page .row.profile #profile-playlist-container::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 55%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.62) 0%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.00) 100%);
    pointer-events: none;
    border-radius: 14px 14px 0 0;
    z-index: 1;
}


body.profile-page .row.profile .general-about::after,
body.profile-page .row.profile .blurbs::after,
body.profile-page .row.profile .friends::after,
body.profile-page .row.profile .blog-preview::after,
body.profile-page .row.profile .photos-preview::after,
body.profile-page .row.profile .videos-preview::after,
body.profile-page .row.profile .profile-info::after,
body.profile-page .row.profile .table-section::after,
body.profile-page .row.profile #comments::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 36px at 85% 22%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 22px at 95% 55%, rgba(255,255,255,0.12), transparent 70%),
        radial-gradient(circle 28px at 10% 75%, rgba(255,255,255,0.14), transparent 70%);
    pointer-events: none;
    border-radius: 14px;
    z-index: 1;
}


body.profile-page .row.profile .general-about > *,
body.profile-page .row.profile .blurbs > *,
body.profile-page .row.profile .contact > *,
body.profile-page .row.profile .url-info > *,
body.profile-page .row.profile .friends > *,
body.profile-page .row.profile .blog-preview > *,
body.profile-page .row.profile .photos-preview > *,
body.profile-page .row.profile .videos-preview > *,
body.profile-page .row.profile .profile-info > *,
body.profile-page .row.profile .table-section > *,
body.profile-page .row.profile #comments > * {
    position: relative;
    z-index: 2;
}


body.profile-page .row.profile .profile-info > .inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
body.profile-page .row.profile .profile-info h3 {
    margin: 0 0 6px !important;
    font: 600 13px/1.2 'Open Sans', sans-serif !important;
    color: #fff !important;
}
body.profile-page .row.profile .profile-info a {
    color: #eaffb6 !important;
    text-decoration: none;
}


body.profile-page .row.profile .heading {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 3 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.45) !important;
    border-radius: 0 0 13px 13px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}
body.profile-page .row.profile .heading h1,
body.profile-page .row.profile .heading h2,
body.profile-page .row.profile .heading h3,
body.profile-page .row.profile .heading h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 0 12px rgba(190,255,90,0.25) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.profile-page .row.profile .heading a { color: #ffffff !important; opacity: 0.85; text-decoration: none; }

body.profile-page .row.profile .contact > .inner,
body.profile-page .row.profile .blurbs > .inner,
body.profile-page .row.profile .friends > .inner,
body.profile-page .row.profile .table-section > .inner,
body.profile-page .row.profile .photos-preview > .inner,
body.profile-page .row.profile .videos-preview > .inner,
body.profile-page .row.profile #comments > .inner {
    position: absolute !important;
    inset: 8px 8px 46px 8px !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

body.profile-page .row.profile .url-info > p { margin: 6px 12px !important; font-size: 12px; }
body.profile-page .row.profile .blog-preview > h4 {
    position: absolute !important;
    left: 0; right: 0; bottom: 0; z-index: 3;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.profile-page .row.profile .blog-preview > p {
    margin: 4px 12px !important;
    font-size: 11px !important;
}


body.profile-page .row.profile .blurbs .section,
body.profile-page .row.profile .blurbs .section h4 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
}


body.profile-page .row.profile p,
body.profile-page .row.profile b,
body.profile-page .row.profile strong,
body.profile-page .row.profile i,
body.profile-page .row.profile em,
body.profile-page .row.profile span,
body.profile-page .row.profile td,
body.profile-page .row.profile li {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.profile-page .row.profile a {
    color: #eaffb6 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s, text-shadow 0.18s;
}
body.profile-page .row.profile a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px #bfff5a, 0 0 18px #88c022;
}


body.profile-page .row.profile .general-about .profile-pic {
    text-align: center;
    padding: 14px 0 4px;
    position: relative; z-index: 2;
}
body.profile-page .row.profile .general-about .profile-pic img,
body.profile-page .row.profile .general-about img.pfp-fallback {
    width: 138px !important; height: 138px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 2px solid rgba(255,255,255,0.7) !important;
    box-shadow: 0 12px 22px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
body.profile-page .row.profile .general-about .details {
    position: relative; z-index: 2;
    padding: 4px 14px 4px;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
}


body.profile-page .row.profile .contact {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    
}
body.profile-page .row.profile .contact::before,
body.profile-page .row.profile .contact::after { display: none !important; }
body.profile-page .row.profile .contact .heading { display: none !important; }
body.profile-page .row.profile .contact > .inner {
    pointer-events: auto;
    position: absolute !important;
    top: 50% !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 8px !important;
    background: rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    overflow: visible !important;
}


body.profile-page .row.profile .contact .f-row {
    display: flex; gap: 8px; margin-bottom: 8px;
}
body.profile-page .row.profile .contact .f-col { flex: 1; min-width: 0; }
body.profile-page .row.profile .contact .f-col a {
    display: flex !important;
    align-items: center; justify-content: center; gap: 6px;
    padding: 7px 8px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.00) 100%),
        linear-gradient(180deg, #c0e85a 0%, #6a9c1e 100%) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font: 700 9.5px/1 'Open Sans', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55) !important;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -6px 12px rgba(0,0,0,0.18) !important;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}
body.profile-page .row.profile .contact .f-col a:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
}
body.profile-page .row.profile .contact .f-col a img.icon {
    width: 12px !important; height: 12px !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)) brightness(1.15);
}


body.profile-page .row.profile .details-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 11px;
}
body.profile-page .row.profile .details-table td {
    padding: 3px 5px !important;
    border-bottom: 1px dashed rgba(255,255,255,0.18) !important;
    vertical-align: top;
    background: transparent !important;
    color: #fff !important;
}
body.profile-page .row.profile .details-table tr:last-child td { border-bottom: 0 !important; }


body.profile-page .row.profile #top8-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
body.profile-page .row.profile #top8-grid .person {
    padding: 3px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
body.profile-page .row.profile #top8-grid .person img:not(.icon) {
    max-width: 100% !important; height: 48px !important;
    border-radius: 6px !important;
}
body.profile-page .row.profile #top8-grid .person p {
    font-size: 9.5px !important; color: #fff !important;
}


body.profile-page .row.profile .pf-photo-grid,
body.profile-page .row.profile .pf-video-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px;
}
body.profile-page .row.profile .pf-photo-thumb,
body.profile-page .row.profile .pf-video-thumb {
    width: 100% !important;
    aspect-ratio: 1/1; object-fit: cover;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
}


body.profile-page .row.profile .comments-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}
body.profile-page .row.profile .comments-table tr { background: transparent !important; }
body.profile-page .row.profile .comments-table td {
    padding: 6px !important;
    font-size: 10.5px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04)) !important;
    border-top: 1px solid rgba(255,255,255,0.30) !important;
}
body.profile-page .row.profile .comments-table img {
    border-radius: 5px !important;
    max-width: 36px !important; height: 36px !important;
    object-fit: cover !important;
}


body.profile-page .row.profile .mutual-friend-chip {
    background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    font-size: 10px !important;
}


#profile-playlist-container > .profile-playlist-widget {
    position: absolute !important;
    inset: 8px 10px 46px 10px !important;
    width: auto !important;
    max-width: none !important;
    background: rgba(0,0,0,0.18) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    z-index: 2 !important;
}
#profile-playlist-container .profile-playlist-widget h3 {
    color: #fff !important;
    font: 600 12px/1 'Open Sans', sans-serif !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 2px 0 8px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#profile-playlist-container .profile-playlist-widget ul {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    max-height: calc(100% - 32px);
    overflow-y: auto;
}
#profile-playlist-container .profile-playlist-widget li {
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)) !important;
    margin: 3px 0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

#profile-playlist-container::after {
    content: 'Profile Tunes';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 100%);
    border-top: 1px solid rgba(255,255,255,0.45);
    border-radius: 0 0 13px 13px;
    color: #fff;
    font: 300 14px/1.15 'Open Sans', 'Segoe UI', sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 0 12px rgba(190,255,90,0.25);
    z-index: 3;
    pointer-events: none;
}


body.profile-page .row.profile .inner::-webkit-scrollbar { width: 8px; }
body.profile-page .row.profile .inner::-webkit-scrollbar-track { background: rgba(0,0,0,0.30); }
body.profile-page .row.profile .inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cfeb74, #4a7820);
    border-radius: 4px;
}


body.profile-page .row.profile .general-about *,
body.profile-page .row.profile .table-section *,
body.profile-page .row.profile .blurbs *,
body.profile-page .row.profile .blog-preview *,
body.profile-page .row.profile .photos-preview *,
body.profile-page .row.profile .videos-preview *,
body.profile-page .row.profile .friends *,
body.profile-page .row.profile #comments *,
body.profile-page .row.profile #profile-playlist-container * {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85),
         0 0 8px rgba(0,0,0,0.7) !important;
}

body.profile-page .row.profile .general-about img,
body.profile-page .row.profile .table-section img,
body.profile-page .row.profile .blurbs img,
body.profile-page .row.profile .blog-preview img,
body.profile-page .row.profile .photos-preview img,
body.profile-page .row.profile .videos-preview img,
body.profile-page .row.profile .friends img,
body.profile-page .row.profile #comments img,
body.profile-page .row.profile #profile-playlist-container img {
    text-shadow: none !important;
}

body.profile-page .row.profile .general-about a:hover,
body.profile-page .row.profile .table-section a:hover,
body.profile-page .row.profile .blurbs a:hover,
body.profile-page .row.profile .blog-preview a:hover,
body.profile-page .row.profile .photos-preview a:hover,
body.profile-page .row.profile .videos-preview a:hover,
body.profile-page .row.profile .friends a:hover,
body.profile-page .row.profile #comments a:hover,
body.profile-page .row.profile #profile-playlist-container a:hover {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85),
         0 0 12px rgba(190,255,90,0.9),
         0 0 6px rgba(0,0,0,0.7) !important;
}

body.profile-page .row.profile .table-section table,
body.profile-page .row.profile .table-section td,
body.profile-page .row.profile .table-section th {
    border-color: rgba(255,255,255,0.18) !important;
    background: transparent !important;
}


@media (max-width: 1100px) {

    
    html:has(body.profile-page),
    body.profile-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    
    .nxe-channels, .nxe-hud, .nxe-guide,
    .nxe-pan-zone, .nxe-pan-arrow { display: none !important; }

    
    .nxe-floor { opacity: 0.4 !important; }

    
    body.profile-page .row.profile {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 12px 60px !important;
        overflow: visible !important;
        perspective: none !important;
        transform: none !important;
    }

    
    body.profile-page .col.w-40.left > span[itemprop="name"] {
        position: relative !important;
        top: auto !important; left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 10px !important;
        padding: 0 4px !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] h1 {
        font-size: 26px !important;
        text-align: left !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] h1::before {
        display: none !important;
    }

    
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        position: relative !important;
        left: auto !important; top: auto !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        margin: 0 auto 12px !important;
        z-index: auto !important;
        cursor: default !important;
        
    }

    
    body.profile-page .row.profile .heading {
        position: relative !important;
        border-radius: 13px 13px 0 0 !important;
        top: auto !important;
    }

    
    body.profile-page .row.profile .general-about > .inner,
    body.profile-page .row.profile .contact > .inner,
    body.profile-page .row.profile .table-section > .inner,
    body.profile-page .row.profile .blurbs > .inner,
    body.profile-page .row.profile .blog-preview > .inner,
    body.profile-page .row.profile .photos-preview > .inner,
    body.profile-page .row.profile .videos-preview > .inner,
    body.profile-page .row.profile .friends > .inner,
    body.profile-page .row.profile #comments > .inner {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 12px 14px !important;
    }

    
    body.profile-page .row.profile .general-about::before,
    body.profile-page .row.profile .blurbs::before,
    body.profile-page .row.profile .table-section::before,
    body.profile-page .row.profile .blog-preview::before,
    body.profile-page .row.profile .friends::before,
    body.profile-page .row.profile #comments::before,
    body.profile-page .row.profile #profile-playlist-container::before {
        height: 40% !important;
    }

    
    body.profile-page .row.profile .contact {
        background:
            linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
        border: 1px solid rgba(255,255,255,0.45) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.65) !important;
        pointer-events: auto !important;
    }
    body.profile-page .row.profile .contact .heading { display: block !important; }
    body.profile-page .row.profile .contact > .inner {
        background: rgba(0,0,0,0.10) !important;
        border: 0 !important;
    }
    
    body.profile-page .row.profile .contact .f-row {
        flex-wrap: wrap !important;
    }

    
    body.profile-page .row.profile .general-about .details {
        max-height: none !important;
        overflow: visible !important;
    }

    
    body.profile-page .row.profile .general-about > .inner {
        padding-bottom: 50px !important; 
    }

    
    #profile-playlist-container > .profile-playlist-widget {
        position: static !important;
        inset: auto !important;
        padding: 10px 12px !important;
        max-height: none !important;
    }

    
    body.profile-page .row.profile .general-about:hover,
    body.profile-page .row.profile .contact:hover,
    body.profile-page .row.profile .table-section:hover,
    body.profile-page .row.profile .blurbs:hover,
    body.profile-page .row.profile .blog-preview:hover,
    body.profile-page .row.profile .photos-preview:hover,
    body.profile-page .row.profile .videos-preview:hover,
    body.profile-page .row.profile .friends:hover,
    body.profile-page .row.profile #comments:hover,
    body.profile-page .row.profile #profile-playlist-container:hover,
    body.profile-page .row.profile:has(.contact:hover) .general-about,
    body.profile-page .row.profile:has(.general-about:hover) .contact {
        transform: none !important;
        filter: none !important;
        box-shadow:
            0 8px 20px rgba(0,0,0,0.35),
            inset 0 -22px 36px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.65) !important;
        z-index: auto !important;
    }
}


body.profile-page .row.profile .profile-info,
body.profile-page .row.profile .profile-info::before,
body.profile-page .row.profile .profile-info::after {
    display: none !important;
}





body.profile-page .row.profile:not(:has(#profile-playlist-container)) .table-section  { --cidx: 1; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .blurbs         { --cidx: 2; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .blog-preview   { --cidx: 3; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .photos-preview { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .videos-preview { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) .friends        { --cidx: 6; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)) #comments       { --cidx: 7; }

body.profile-page .row.profile:not(:has(.photos-preview)) .videos-preview { --cidx: 5; }
body.profile-page .row.profile:not(:has(.photos-preview)) .friends        { --cidx: 6; }
body.profile-page .row.profile:not(:has(.photos-preview)) #comments       { --cidx: 7; }

body.profile-page .row.profile:not(:has(.videos-preview)) .friends  { --cidx: 6; }
body.profile-page .row.profile:not(:has(.videos-preview)) #comments { --cidx: 7; }



body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) .videos-preview { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) .friends        { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)) #comments       { --cidx: 6; }

body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.videos-preview)) .friends  { --cidx: 5; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.videos-preview)) #comments { --cidx: 6; }

body.profile-page .row.profile:not(:has(.photos-preview)):not(:has(.videos-preview)) .friends  { --cidx: 5; }
body.profile-page .row.profile:not(:has(.photos-preview)):not(:has(.videos-preview)) #comments { --cidx: 6; }



body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)):not(:has(.videos-preview)) .friends  { --cidx: 4; }
body.profile-page .row.profile:not(:has(#profile-playlist-container)):not(:has(.photos-preview)):not(:has(.videos-preview)) #comments { --cidx: 5; }


@media (hover: none) {
    html:has(body.profile-page),
    body.profile-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    .nxe-channels, .nxe-hud, .nxe-guide,
    .nxe-pan-zone, .nxe-pan-arrow { display: none !important; }
    body.profile-page .row.profile {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 12px 60px !important;
        perspective: none !important;
        transform: none !important;
        overflow: visible !important;
    }
    body.profile-page .col.w-40.left > span[itemprop="name"] {
        position: relative !important;
        top: auto !important; left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 10px !important;
        padding: 0 4px !important;
    }
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        position: relative !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        margin: 0 auto 12px !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: 0 !important;
        z-index: auto !important;
    }
    body.profile-page .row.profile .general-about > .inner,
    body.profile-page .row.profile .contact > .inner,
    body.profile-page .row.profile .table-section > .inner,
    body.profile-page .row.profile .blurbs > .inner,
    body.profile-page .row.profile .blog-preview > .inner,
    body.profile-page .row.profile .photos-preview > .inner,
    body.profile-page .row.profile .videos-preview > .inner,
    body.profile-page .row.profile .friends > .inner,
    body.profile-page .row.profile #comments > .inner {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 12px 14px !important;
    }
    body.profile-page .row.profile .heading {
        position: relative !important;
        top: auto !important;
    }
    body.profile-page .row.profile .contact {
        background:
            linear-gradient(180deg, #c4ec56 0%, #9ed03a 38%, #6ba01e 75%, #3e6711 100%) !important;
        pointer-events: auto !important;
    }
    body.profile-page .row.profile .contact .heading { display: block !important; }
    body.profile-page .row.profile .contact > .inner {
        background: rgba(0,0,0,0.10) !important;
        border: 0 !important;
    }
    
    body.profile-page .row.profile .general-about,
    body.profile-page .row.profile .contact,
    body.profile-page .row.profile .table-section,
    body.profile-page .row.profile .blurbs,
    body.profile-page .row.profile .blog-preview,
    body.profile-page .row.profile .photos-preview,
    body.profile-page .row.profile .videos-preview,
    body.profile-page .row.profile .friends,
    body.profile-page .row.profile #comments,
    body.profile-page .row.profile #profile-playlist-container {
        transition: none !important;
    }
    body.profile-page .row.profile .general-about .details {
        max-height: none !important;
        overflow: visible !important;
    }
}
</style>