/* OSANIME Profile UI — Stage 1 v277
 * Responsive foundation + readability pass.
 * Loaded after legacy profile styles so this layer can normalize the many
 * historical stage overrides without rewriting backend/profile behaviour.
 */

body.profile-ui-stage1-v277 {
    --profile-ui-panel: rgba(9, 19, 36, .90);
    --profile-ui-panel-soft: rgba(12, 25, 45, .78);
    --profile-ui-line: rgba(255, 255, 255, .10);
    --profile-ui-line-strong: rgba(255, 255, 255, .16);
    --profile-ui-text: #f6f8fc;
    --profile-ui-muted: #9caac0;
    --profile-ui-pink: #ff4f93;
    --profile-ui-radius: 18px;
    --profile-ui-control: 44px;
    overflow-x: hidden;
}

body.profile-ui-stage1-v277 .profile-php-wrap {
    width: 100% !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 26px clamp(16px, 2.4vw, 34px) 42px !important;
}

body.profile-ui-stage1-v277 .member-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 318px !important;
    align-items: start !important;
    gap: 22px !important;
}

body.profile-ui-stage1-v277 .profile-main-column,
body.profile-ui-stage1-v277 .member-profile-info,
body.profile-ui-stage1-v277 .member-layout > *,
body.profile-ui-stage1-v277 .member-side,
body.profile-ui-stage1-v277 .profile-member-side-sticky {
    min-width: 0 !important;
}

/* Hero / identity */
body.profile-ui-stage1-v277 .profile-identity-card {
    min-height: 286px !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 26px !important;
    padding: 32px !important;
    overflow: hidden !important;
    border: 1px solid var(--profile-ui-line-strong) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25) !important;
}

body.profile-ui-stage1-v277 .profile-identity-card::after {
    background:
        linear-gradient(90deg, rgba(3, 8, 20, .93) 0%, rgba(4, 10, 23, .86) 38%, rgba(5, 11, 25, .58) 70%, rgba(5, 11, 25, .36) 100%),
        linear-gradient(0deg, rgba(2, 7, 17, .45), rgba(2, 7, 17, .04)) !important;
}

body.profile-ui-stage1-v277 .member-profile-avatar {
    width: 124px !important;
    height: 124px !important;
    border: 4px solid rgba(255, 255, 255, .92) !important;
    border-radius: 50% !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34), 0 0 0 6px rgba(255, 79, 147, .10) !important;
}

body.profile-ui-stage1-v277 .member-profile-info {
    width: 100% !important;
    max-width: 900px !important;
}

body.profile-ui-stage1-v277 .member-profile-name {
    align-items: center !important;
    gap: 10px !important;
}

body.profile-ui-stage1-v277 .profile-name-copy h2 {
    max-width: 760px !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(27px, 2.3vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.55px !important;
}

body.profile-ui-stage1-v277 .profile-name-copy small {
    display: block !important;
    margin-top: 6px !important;
    color: #c0cada !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

body.profile-ui-stage1-v277 .member-badge {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
}

body.profile-ui-stage1-v277 .member-joined {
    margin: 9px 0 8px !important;
    color: #b4c0d1 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

body.profile-ui-stage1-v277 .member-bio {
    max-width: 780px !important;
    margin: 10px 0 14px !important;
    color: #e2e7ef !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
    overflow-wrap: anywhere !important;
}

body.profile-ui-stage1-v277 .profile-muted-bio {
    color: var(--profile-ui-muted) !important;
}

body.profile-ui-stage1-v277 .profile-stage9-identity-community {
    gap: 7px !important;
    margin: 10px 0 3px !important;
}

body.profile-ui-stage1-v277 .profile-stage9-presence,
body.profile-ui-stage1-v277 .profile-stage9-mini-badge,
body.profile-ui-stage1-v277 .profile-stage9-more-badges {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
}

/* Primary actions */
body.profile-ui-stage1-v277 .profile-identity-actions,
body.profile-ui-stage1-v277 .profile-social-actions {
    gap: 9px !important;
}

body.profile-ui-stage1-v277 .profile-identity-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

body.profile-ui-stage1-v277 .profile-social-btn,
body.profile-ui-stage1-v277 .member-website-link,
body.profile-ui-stage1-v277 .member-owner-link {
    min-height: var(--profile-ui-control) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 15px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body.profile-ui-stage1-v277 .profile-social-feedback {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Hero stats: visible, tap-friendly and not micro-text. */
body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social {
    width: min(100%, 820px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    border-top: 0 !important;
}

body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social > div,
body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social > .profile-stat-button {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, .095) !important;
    border-radius: 12px !important;
    background: rgba(5, 13, 28, .56) !important;
    text-align: left !important;
}

body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social > div:first-child {
    padding-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, .095) !important;
}

body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social b {
    font-size: 18px !important;
    line-height: 1.1 !important;
}

body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social small {
    margin-top: 5px !important;
    overflow: visible !important;
    color: #a7b3c4 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* Tabs */
body.profile-ui-stage1-v277 .member-tabs {
    min-width: 0 !important;
    height: auto !important;
    display: flex !important;
    gap: 6px !important;
    margin: 14px 0 0 !important;
    padding: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--profile-ui-line) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 35, .80) !important;
}

body.profile-ui-stage1-v277 .member-tabs::-webkit-scrollbar {
    display: none !important;
}

body.profile-ui-stage1-v277 .member-tabs a {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* Upload controls */
body.profile-ui-stage1-v277 .profile-upload-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto 188px 162px !important;
    gap: 10px !important;
    margin: 13px 0 10px !important;
    padding: 11px !important;
    border: 1px solid var(--profile-ui-line) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 35, .68) !important;
}

body.profile-ui-stage1-v277 .member-search-box,
body.profile-ui-stage1-v277 .member-select {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

body.profile-ui-stage1-v277 .member-search-box input,
body.profile-ui-stage1-v277 .member-select {
    font-size: 13px !important;
}

body.profile-ui-stage1-v277 .profile-upload-summary {
    min-height: 38px !important;
    gap: 10px !important;
    padding: 8px 11px !important;
    font-size: 11.5px !important;
}

body.profile-ui-stage1-v277 .profile-upload-summary a {
    min-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}

/* Table / mobile content */
body.profile-ui-stage1-v277 .member-list-panel,
body.profile-ui-stage1-v277 .member-extra-panel {
    border: 1px solid var(--profile-ui-line) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

body.profile-ui-stage1-v277 .member-table th {
    height: 46px !important;
    padding-inline: 10px !important;
    font-size: 10px !important;
    letter-spacing: .03em !important;
}

body.profile-ui-stage1-v277 .member-table td {
    min-height: 70px !important;
    height: 70px !important;
    padding-inline: 10px !important;
    font-size: 11.5px !important;
}

body.profile-ui-stage1-v277 .member-song-thumb {
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
}

body.profile-ui-stage1-v277 .member-song-info {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 9px !important;
}

body.profile-ui-stage1-v277 .member-song-title {
    font-size: 12px !important;
}

body.profile-ui-stage1-v277 .member-song-meta {
    margin-top: 4px !important;
    font-size: 10px !important;
}

body.profile-ui-stage1-v277 .member-cat {
    font-size: 10px !important;
}

body.profile-ui-stage1-v277 .member-card-mobile {
    min-height: 82px !important;
    gap: 11px !important;
    padding: 10px !important;
}

body.profile-ui-stage1-v277 .member-card-mobile > img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

body.profile-ui-stage1-v277 .member-card-mobile b {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

body.profile-ui-stage1-v277 .member-card-mobile small {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
}

/* About / posts / community readability */
body.profile-ui-stage1-v277 .member-extra-panel {
    margin-top: 13px !important;
    padding: clamp(14px, 2vw, 20px) !important;
}

body.profile-ui-stage1-v277 .member-extra-panel h2,
body.profile-ui-stage1-v277 .member-extra-panel h3 {
    line-height: 1.25 !important;
}

body.profile-ui-stage1-v277 .profile-post-card h3,
body.profile-ui-stage1-v277 .profile-stage9-card-head h3 {
    font-size: 16px !important;
}

body.profile-ui-stage1-v277 .profile-post-card > p,
body.profile-ui-stage1-v277 .profile-about-overview-copy p,
body.profile-ui-stage1-v277 .member-about-text {
    font-size: 12.5px !important;
    line-height: 1.62 !important;
}

body.profile-ui-stage1-v277 .profile-post-card time,
body.profile-ui-stage1-v277 .profile-post-metrics,
body.profile-ui-stage1-v277 .profile-post-open,
body.profile-ui-stage1-v277 .member-about-box small {
    font-size: 10.5px !important;
}

body.profile-ui-stage1-v277 .member-about-box b {
    font-size: 12.5px !important;
}

body.profile-ui-stage1-v277 .profile-stage9-score-grid small,
body.profile-ui-stage1-v277 .profile-stage9-card-head > div > span,
body.profile-ui-stage1-v277 .profile-stage9-badge small,
body.profile-ui-stage1-v277 .profile-stage9-signal-grid > span small,
body.profile-ui-stage1-v277 .profile-stage9-contribution-copy em,
body.profile-ui-stage1-v277 .profile-stage9-contribution-row time,
body.profile-ui-stage1-v277 .profile-stage9-suggestion-person small,
body.profile-ui-stage1-v277 .profile-stage9-suggestion p,
body.profile-ui-stage1-v277 .profile-stage9-discovery-feedback {
    font-size: 11px !important;
}

body.profile-ui-stage1-v277 .profile-stage9-badge b,
body.profile-ui-stage1-v277 .profile-stage9-contribution-copy b,
body.profile-ui-stage1-v277 .profile-stage9-suggestion-person b {
    font-size: 12.5px !important;
}

body.profile-ui-stage1-v277 .profile-stage9-suggestion-actions button,
body.profile-ui-stage1-v277 .profile-stage9-suggestion-actions a {
    min-height: 38px !important;
    font-size: 11.5px !important;
}

/* Sidebar */
body.profile-ui-stage1-v277 .profile-member-side {
    top: 16px !important;
}

body.profile-ui-stage1-v277 .profile-member-side-sticky {
    display: grid !important;
    gap: 12px !important;
}

body.profile-ui-stage1-v277 .member-side-card,
body.profile-ui-stage1-v277 .member-profile-share-card {
    padding: 16px !important;
    border: 1px solid var(--profile-ui-line) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(15, 29, 51, .94), rgba(8, 19, 37, .94)) !important;
}

body.profile-ui-stage1-v277 .member-side-card h3,
body.profile-ui-stage1-v277 .member-profile-share-card h2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

body.profile-ui-stage1-v277 .member-stat-row,
body.profile-ui-stage1-v277 .member-category-row {
    min-height: 48px !important;
    padding: 8px 6px !important;
}

body.profile-ui-stage1-v277 .member-stat-row small,
body.profile-ui-stage1-v277 .member-category-row,
body.profile-ui-stage1-v277 .profile-share-hint,
body.profile-ui-stage1-v277 .profile-share-status {
    font-size: 10.5px !important;
}

body.profile-ui-stage1-v277 .member-stat-row b {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body.profile-ui-stage1-v277 .profile-share-primary-btn {
    min-height: 42px !important;
    font-size: 11.5px !important;
}

/* Dialogs */
body.profile-ui-stage1-v277.profile-modal-open {
    overflow: hidden !important;
}

body.profile-ui-stage1-v277 .profile-login-dialog,
body.profile-ui-stage1-v277 .profile-social-list-dialog {
    max-width: min(92vw, 520px) !important;
    max-height: min(86dvh, 720px) !important;
    border-radius: 18px !important;
}

body.profile-ui-stage1-v277 .profile-social-list-body {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Accessible focus shared across custom controls. */
body.profile-ui-stage1-v277 :where(
    .profile-social-btn,
    .profile-stat-button,
    .profile-sidebar-social-trigger,
    .member-tabs a,
    .member-owner-link,
    .member-website-link,
    .profile-share-primary-btn,
    .member-category-row,
    .member-pagination a
):focus-visible {
    outline: 2px solid var(--profile-ui-pink) !important;
    outline-offset: 2px !important;
}

/* Tablet: content first, supporting cards below in a clean grid. */
@media (max-width: 1180px) {
    body.profile-ui-stage1-v277 .member-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body.profile-ui-stage1-v277 .profile-member-side {
        position: static !important;
        top: auto !important;
    }

    body.profile-ui-stage1-v277 .profile-member-side-sticky {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar {
        grid-template-columns: minmax(240px, 1fr) 1fr 1fr !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar .member-toolbar-spacer {
        display: none !important;
    }
}

@media (max-width: 860px) {
    body.profile-ui-stage1-v277 .profile-php-wrap {
        padding: 18px 14px 34px !important;
    }

    body.profile-ui-stage1-v277 .profile-identity-card {
        min-height: 0 !important;
        grid-template-columns: 108px minmax(0, 1fr) !important;
        gap: 20px !important;
        padding: 24px !important;
    }

    body.profile-ui-stage1-v277 .member-profile-avatar {
        width: 104px !important;
        height: 104px !important;
    }

    body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar .member-search-box {
        grid-column: 1 / -1 !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    body.profile-ui-stage1-v277 {
        --profile-ui-control: 46px;
    }

    body.profile-ui-stage1-v277 .profile-php-wrap {
        padding-inline: 12px !important;
    }

    body.profile-ui-stage1-v277 .profile-identity-card {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 15px !important;
        padding: 22px 18px !important;
        border-radius: 18px !important;
    }

    body.profile-ui-stage1-v277 .profile-identity-card::after {
        background:
            linear-gradient(180deg, rgba(4, 9, 21, .50) 0%, rgba(4, 10, 23, .87) 40%, rgba(4, 10, 23, .96) 100%) !important;
    }

    body.profile-ui-stage1-v277 .member-profile-avatar {
        width: 94px !important;
        height: 94px !important;
        border-width: 3px !important;
    }

    body.profile-ui-stage1-v277 .member-profile-name {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    body.profile-ui-stage1-v277 .profile-name-copy h2 {
        font-size: clamp(24px, 8vw, 31px) !important;
    }

    body.profile-ui-stage1-v277 .profile-name-copy small {
        font-size: 13px !important;
    }

    body.profile-ui-stage1-v277 .member-bio {
        font-size: 13.5px !important;
    }

    body.profile-ui-stage1-v277 .profile-social-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.profile-ui-stage1-v277 .profile-social-btn {
        width: 100% !important;
    }

    body.profile-ui-stage1-v277 .member-tabs {
        margin-inline: -1px !important;
        scroll-snap-type: x proximity !important;
    }

    body.profile-ui-stage1-v277 .member-tabs a {
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        scroll-snap-align: center !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.profile-ui-stage1-v277 .profile-upload-toolbar .member-search-box {
        grid-column: auto !important;
    }

    body.profile-ui-stage1-v277 .member-search-box,
    body.profile-ui-stage1-v277 .member-select,
    body.profile-ui-stage1-v277 .member-search-box input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    body.profile-ui-stage1-v277 .profile-member-side-sticky {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Hero already carries the same core statistics; avoid duplicate vertical
       weight on phones while preserving genres/latest/share cards. */
    body.profile-ui-stage1-v277 .profile-statistics-card {
        display: none !important;
    }

    body.profile-ui-stage1-v277 .member-extra-panel {
        padding: 14px !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-two-column,
    body.profile-ui-stage1-v277 .profile-stage9-suggestion-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 460px) {
    body.profile-ui-stage1-v277 .profile-php-wrap {
        padding: 12px 10px 30px !important;
    }

    body.profile-ui-stage1-v277 .profile-identity-card {
        padding: 18px 15px !important;
    }

    body.profile-ui-stage1-v277 .member-profile-avatar {
        width: 86px !important;
        height: 86px !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-identity-community {
        align-items: flex-start !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-presence,
    body.profile-ui-stage1-v277 .profile-stage9-mini-badge,
    body.profile-ui-stage1-v277 .profile-stage9-more-badges {
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social > div,
    body.profile-ui-stage1-v277 .member-stats-inline.profile-stats-social > .profile-stat-button {
        min-height: 62px !important;
    }

    body.profile-ui-stage1-v277 .profile-identity-actions {
        align-items: stretch !important;
    }

    body.profile-ui-stage1-v277 .member-website-link,
    body.profile-ui-stage1-v277 .member-owner-link {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-score-grid article {
        min-height: 92px !important;
        padding: 12px !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-contribution-row {
        grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    }

    body.profile-ui-stage1-v277 .profile-stage9-contribution-row time {
        display: none !important;
    }

    body.profile-ui-stage1-v277 .profile-social-list-dialog,
    body.profile-ui-stage1-v277 .profile-login-dialog {
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.profile-ui-stage1-v277 *,
    body.profile-ui-stage1-v277 *::before,
    body.profile-ui-stage1-v277 *::after {
        scroll-behavior: auto !important;
    }
}