/* OSANIME Profile UI — Stage 7 v283
 * Screenshot-driven layout correction.
 * Loaded last. Purposefully uses a stronger page selector than legacy
 * profile-stage8 mobile rules, so older !important declarations cannot
 * dismantle the modern profile DOM on phones/tablets.
 */

body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 {
    --profile-v283-line: rgba(255,255,255,.085);
    --profile-v283-panel: rgba(8,18,35,.80);
    --profile-v283-panel-strong: rgba(7,16,31,.94);
    --profile-v283-pink: #ff4f93;
    overflow-x: clip !important;
}

/* -------------------------------------------------------------------------
 * DESKTOP BALANCE
 * The old sidebar was a short sticky stack inside a tall two-column layout.
 * Give the whole rail a deliberate full-height surface, while keeping its
 * cards naturally sized and letting the document (not the sidebar) scroll.
 * ---------------------------------------------------------------------- */
@media (min-width: 1181px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-layout {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 21vw, 330px) !important;
        align-items: stretch !important;
        gap: clamp(16px, 1.5vw, 22px) !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-main-column {
        align-self: start !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;
        min-height: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        padding: 12px !important;
        overflow: visible !important;
        border: 1px solid rgba(255,255,255,.065) !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at 50% 0, rgba(255,79,147,.055), transparent 34%),
            linear-gradient(180deg, rgba(9,20,39,.72), rgba(5,13,27,.58)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky {
        position: sticky !important;
        top: 92px !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
    }

    /* Existing JS marks a sidebar static if it is genuinely taller than the
       usable viewport. Preserve that safety behaviour without reintroducing
       an internal scroll container. */
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky.profile-sidebar-static-v282,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky.profile-sidebar-tall-v280 {
        position: static !important;
        top: auto !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky > .member-side-card,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky > .member-profile-share-card {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-share-card {
        display: block !important;
    }
}

/* Wide desktop: avoid an oversized sidebar while still using the canvas. */
@media (min-width: 1460px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-php-wrap {
        max-width: 1540px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-layout {
        grid-template-columns: minmax(0, 1fr) 332px !important;
    }
}

/* -------------------------------------------------------------------------
 * TABLET
 * Keep supporting cards below the main profile and remove the decorative
 * desktop rail. This is deliberately stronger than the legacy 930/980 rules.
 * ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-layout {
        grid-template-columns: minmax(0,1fr) !important;
        align-items: start !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side {
        position: static !important;
        top: auto !important;
        align-self: auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side-sticky {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* -------------------------------------------------------------------------
 * MOBILE HERO REBUILD
 * Critical fix: legacy Stage 8 used display:contents for member-profile-info,
 * causing modern name/badges/bio/actions/stats to escape their intended
 * container. Restore one predictable vertical hierarchy.
 * ---------------------------------------------------------------------- */
@media (max-width: 780px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-php-wrap {
        width: 100% !important;
        padding: 10px 10px max(34px, calc(env(safe-area-inset-bottom) + 24px)) !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-card {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 20px 15px 15px !important;
        overflow: hidden !important;
        border-radius: 17px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-card::after {
        background:
            linear-gradient(180deg, rgba(3,8,19,.44) 0%, rgba(3,9,21,.80) 27%, rgba(4,10,23,.96) 54%, rgba(4,10,23,.995) 100%) !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell {
        position: relative !important;
        z-index: 4 !important;
        align-self: center !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 92px !important;
        height: 92px !important;
        margin: 0 0 11px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell .member-profile-avatar,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-avatar {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 92px !important;
        height: 92px !important;
        border-width: 3px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-info {
        position: relative !important;
        z-index: 4 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-name {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-name-copy {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        text-align: center !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-name-copy h2 {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(24px, 7.4vw, 30px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.45px !important;
        text-wrap: balance !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-name-copy small {
        display: block !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-badge {
        min-height: 24px !important;
        padding: 4px 9px !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-joined {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 9px 0 0 !important;
        color: #b8c4d5 !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-identity-community {
        grid-column: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 10px 0 0 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-presence,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-mini-badge,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-more-badges {
        min-height: 25px !important;
        max-width: 100% !important;
        padding: 5px 9px !important;
        border-radius: 999px !important;
        font-size: 9.5px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-bio {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 13px 0 12px !important;
        padding: 11px 0 !important;
        border-top: 1px solid rgba(255,255,255,.075) !important;
        border-bottom: 1px solid rgba(255,255,255,.075) !important;
        color: #dce4ef !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }

    /* Actions: social actions on row one, message/share on row two. */
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-actions {
        grid-column: auto !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        align-items: stretch !important;
        gap: 7px !important;
        margin: 0 0 12px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-social-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-social-btn,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-action,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-owner-link,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-website-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        font-size: 11.5px !important;
        border-radius: 10px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-website-link {
        grid-column: 1 / -1 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-owner-link {
        grid-column: auto !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-social-feedback,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-share-status {
        grid-column: auto !important;
    }

    /* Five stats fit cleanly as 2 + 3 instead of an awkward 2-column stack. */
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0,1fr)) !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > div,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-button {
        min-width: 0 !important;
        min-height: 62px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        padding: 9px !important;
        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 11px !important;
        background: rgba(3,10,23,.61) !important;
        text-align: left !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-uploads,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-views {
        grid-column: span 3 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-button {
        grid-column: span 2 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > :last-child:nth-child(odd),
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > :last-child {
        /* Explicitly undo Stage 6's odd-last full-width rule. */
        grid-column: span 2 !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stat-icon {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social b {
        font-size: 15px !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social small {
        width: auto !important;
        margin-top: 3px !important;
        overflow: visible !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-tabs {
        width: 100% !important;
        max-width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-tabs a {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
    }

    /* The hero already contains the same social stats and share action. Avoid
       duplicating them again below the content on phones. */
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-statistics-card,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-share-card {
        display: none !important;
    }

    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-member-side {
        margin-top: 8px !important;
    }
}

@media (max-width: 430px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-php-wrap {
        padding-inline: 7px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-card {
        padding: 17px 12px 12px !important;
        border-radius: 15px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell .member-profile-avatar,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-avatar {
        width: 84px !important;
        height: 84px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-name-copy h2 {
        font-size: clamp(22px, 7vw, 27px) !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-presence,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-mini-badge,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stage9-more-badges {
        font-size: 9px !important;
        padding-inline: 8px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > div,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-button {
        min-height: 58px !important;
        padding: 7px !important;
        gap: 5px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-stat-icon {
        flex-basis: 27px !important;
        width: 27px !important;
        height: 27px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social b {
        font-size: 14px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social small {
        font-size: 8.3px !important;
    }
}

@media (max-width: 340px) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-actions,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-social-actions {
        grid-template-columns: minmax(0,1fr) !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-social-actions {
        grid-column: 1 !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-uploads,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-views,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > .profile-stat-button,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > :last-child {
        grid-column: span 1 !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-stats-inline.profile-stats-social > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-identity-card {
        padding-top: 13px !important;
    }
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .profile-hero-avatar-shell .member-profile-avatar,
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-profile-avatar {
        width: 76px !important;
        height: 76px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.music-member-page.profile-php-page.profile-stage8-page.profile-ui-stage7-v283 .member-tabs {
        scroll-behavior: auto !important;
    }
}