:root {
    --site-content-max: 1320px;
    --site-page-gutter: clamp(16px, 2.2vw, 32px);
}

/* Keep the main page gutters and content width identical across public/user/artist pages. */
.container,
.content-container,
.artist-container,
.tracks-container,
.albums-container,
.playlists-container,
.search-page-container,
.track-container,
.track-detail-container,
.album-container,
.playlist-container,
.playlist-detail-container,
.profile-container,
.dashboard-container,
.gift-container,
.advertisements-container,
.requests-container,
.purchases-container,
.purchase-container,
.upload-container,
.detail-container,
.label-request-container {
    width: 100% !important;
    max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-page-gutter) !important;
    padding-right: var(--site-page-gutter) !important;
    box-sizing: border-box !important;
}

/* Every artwork/artist cover is rendered as a true square without stretching. */
.track-cover,
.track-cover-img,
.track-card-cover,
.track-cover-lg,
.track-cover-sm,
.track-cover-small,
.track-cover-large,
.album-cover,
.album-cover-large,
.playlist-cover,
.playlist-cover-large,
.purchase-cover,
.cover-image,
.player-track-cover,
.artist-avatar,
.profile-avatar,
.profile-photo-display,
.sidebar-avatar,
.cover-preview img,
.current-cover img,
.current-cover-preview img,
.dynamic-square-cover {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Bootstrap music cards are also artwork, so fixed inline heights cannot make them rectangular. */
.card-img-top,
.music-card .card-img-top,
.tracks-grid .card-img-top,
.playlists-grid .card-img-top,
.album-container .card-img-top,
.playlist-container .card-img-top,
.gift-container .card-img-top,
.explore-container .card-img-top,
.card-img-top.dynamic-square-cover,
img.card-img-top[src] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

.track-cover img,
.playlist-cover img,
.album-cover img,
.artist-avatar img,
.profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.track-cover,
.track-cover-img,
.album-cover,
.playlist-cover,
.track-cover-lg,
.album-cover-large,
.playlist-cover-large,
.cover-image {
    height: auto !important;
}

/* Public detail pages: consistent rating/card proportions. */
.album-container .rating-section > .row,
.playlist-container .rating-section > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
}

.album-container .rating-section > .row > [class*="col-"],
.playlist-container .rating-section > .row > [class*="col-"] {
    min-width: 0 !important;
    padding-left: clamp(8px, 1.2vw, 16px) !important;
    padding-right: clamp(8px, 1.2vw, 16px) !important;
}

.track-container .rating-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 48px) !important;
}

.track-container .rating-stats,
.album-container .rating-section .col-md-6.text-center,
.playlist-container .rating-section .col-md-6.text-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.track-container .star-rating,
.album-container .star-rating,
.playlist-container .star-rating {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(6px, 1vw, 10px) !important;
    line-height: 1 !important;
}

.track-container .star-rating .star,
.album-container .star-rating .star,
.playlist-container .star-rating .star {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.track-container .average-rating,
.album-container .rating-section .display-3,
.playlist-container .rating-section .display-3 {
    font-size: clamp(2rem, 3vw, 2.4rem) !important;
    line-height: 1 !important;
    margin: 0 0 4px !important;
    font-variant-numeric: tabular-nums;
}

.track-container #avgStarsDisplay,
.album-container .rating-section .col-md-6.text-center .mb-2,
.playlist-container .rating-section .col-md-6.text-center .mb-2 {
    min-height: 24px;
    margin-bottom: 4px !important;
    line-height: 1 !important;
}

.track-container #avgStarsDisplay i,
.album-container .rating-section .col-md-6.text-center .fa-star,
.playlist-container .rating-section .col-md-6.text-center .fa-star {
    font-size: .95rem !important;
    line-height: 1 !important;
    margin: 0 1px !important;
}

.track-container #commentsListSection,
.album-container #commentsListSection,
.playlist-container #commentsListSection {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 767.98px) {
    :root { --site-page-gutter: 14px; }

    .track-container .rating-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .album-container .rating-section > .row,
    .playlist-container .rating-section > .row {
        row-gap: 20px !important;
    }

    .track-container .star-rating,
    .album-container .star-rating,
    .playlist-container .star-rating {
        justify-content: center !important;
        gap: 5px !important;
    }

    .track-container .star-rating .star,
    .album-container .star-rating .star,
    .playlist-container .star-rating .star {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
        font-size: 1.25rem !important;
    }

    .track-container .average-rating,
    .album-container .rating-section .display-3,
    .playlist-container .rating-section .display-3 {
        font-size: 2rem !important;
    }

    .track-container #commentsListSection .d-flex,
    .album-container #commentsListSection .d-flex,
    .playlist-container #commentsListSection .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .track-container #commentsListSection small,
    .album-container #commentsListSection small,
    .playlist-container #commentsListSection small {
        font-size: .76rem !important;
    }

    .track-container #commentsListSection p,
    .album-container #commentsListSection p,
    .playlist-container #commentsListSection p {
        font-size: .9rem !important;
        line-height: 1.75 !important;
    }
}

/* Keep rating/comment actions compact instead of stretching across the review card. */
.track-container .review-action-btn,
.album-container .review-action-btn,
.playlist-container .review-action-btn {
    width: auto !important;
    min-width: 150px;
    max-width: 220px;
    min-height: 40px;
    padding: 0.6rem 1.25rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.2;
    border-radius: 10px;
}

@media (max-width: 480px) {
    .track-container .review-action-btn,
    .album-container .review-action-btn,
    .playlist-container .review-action-btn {
        min-width: 140px;
        max-width: min(200px, 100%);
        padding: 0.55rem 1rem !important;
        font-size: 0.86rem;
    }
}


/* V8: RTL ratings, compact buttons, and unified dashboard/profile shell */
:root {
    --site-dashboard-sidebar: 280px;
    --site-dashboard-gap: clamp(18px, 2vw, 26px);
    --site-dashboard-y: 40px;
    --site-btn-height: 40px;
    --site-btn-radius: 10px;
    --site-btn-py: 0.58rem;
    --site-btn-px: 1.05rem;
}

/* Language list: fa/en are plain labels; align them to the logical start. */
.language-switcher .dropdown-item {
    justify-content: flex-start !important;
    gap: 0 !important;
}
html[dir="rtl"] .language-switcher .dropdown-item {
    text-align: right !important;
}
html[dir="ltr"] .language-switcher .dropdown-item {
    text-align: left !important;
}
.mobile-language-option {
    gap: 0 !important;
}

/* Ratings: align every control to the page's logical start.
   Stars stay internally LTR so rating 1..5 behavior does not change. */
.track-container .rating-form,
.album-container .rating-form,
.playlist-container .rating-form,
.track-container .rating-stats,
.album-container .rating-stats,
.playlist-container .rating-stats {
    text-align: start !important;
    min-width: 0 !important;
}

.track-container .rating-form,
.album-container .rating-form,
.playlist-container .rating-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.track-container .rating-stats,
.album-container .rating-stats,
.playlist-container .rating-stats,
.album-container .rating-stats > .text-light,
.playlist-container .rating-stats > .text-light {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: start !important;
}

.track-container .star-rating,
.album-container .star-rating,
.playlist-container .star-rating {
    width: max-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

html[dir="rtl"] .track-container .rating-form,
html[dir="rtl"] .album-container .rating-form,
html[dir="rtl"] .playlist-container .rating-form,
html[dir="rtl"] .track-container .rating-stats,
html[dir="rtl"] .album-container .rating-stats,
html[dir="rtl"] .playlist-container .rating-stats,
html[dir="rtl"] .album-container .rating-stats > .text-light,
html[dir="rtl"] .playlist-container .rating-stats > .text-light {
    align-items: flex-start !important;
    text-align: right !important;
}

/* Because star-rating keeps direction:ltr for rating semantics, explicitly pin
   the compact star row to the right edge in RTL and to the left in LTR. */
html[dir="rtl"] .track-container .star-rating,
html[dir="rtl"] .album-container .star-rating,
html[dir="rtl"] .playlist-container .star-rating {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}
html[dir="ltr"] .track-container .star-rating,
html[dir="ltr"] .album-container .star-rating,
html[dir="ltr"] .playlist-container .star-rating {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .track-container .rating-form,
html[dir="rtl"] .album-container .rating-form,
html[dir="rtl"] .playlist-container .rating-form,
html[dir="rtl"] .track-container .rating-stats,
html[dir="rtl"] .album-container .rating-stats,
html[dir="rtl"] .playlist-container .rating-stats {
    /* physical right alignment is intentional for Persian UI */
    align-items: flex-end !important;
}
html[dir="ltr"] .track-container .rating-form,
html[dir="ltr"] .album-container .rating-form,
html[dir="ltr"] .playlist-container .rating-form,
html[dir="ltr"] .track-container .rating-stats,
html[dir="ltr"] .album-container .rating-stats,
html[dir="ltr"] .playlist-container .rating-stats {
    align-items: flex-start !important;
}

/* Compact button system. This intentionally overrides old mobile .btn{width:100%}
   rules, while explicit .w-100 / .btn-block actions stay full-width. */
.btn:not(.w-100):not(.btn-block),
.btn-submit:not(.w-100):not(.btn-block),
.submit-btn:not(.w-100):not(.btn-block),
.default-btn:not(.w-100):not(.btn-block),
.review-action-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--site-btn-height) !important;
    height: auto !important;
    padding: var(--site-btn-py) var(--site-btn-px) !important;
    border-radius: var(--site-btn-radius) !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
}

.btn.btn-sm:not(.w-100),
.btn-sm.review-action-btn {
    min-height: 34px !important;
    padding: 0.42rem 0.8rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
}

.btn.btn-lg:not(.w-100) {
    min-height: 44px !important;
    padding: 0.68rem 1.25rem !important;
    font-size: 0.94rem !important;
}

/* Explicit full-width buttons remain intentional but lose oversized height. */
.btn.w-100,
.btn-submit.w-100,
.submit-btn.w-100 {
    min-height: 42px !important;
    padding-top: 0.62rem !important;
    padding-bottom: 0.62rem !important;
    font-size: 0.9rem !important;
}

/* Review actions are intentionally narrower than normal page actions. */
.track-container .review-action-btn,
.album-container .review-action-btn,
.playlist-container .review-action-btn {
    min-width: 0 !important;
    max-width: 190px !important;
    padding-inline: 1rem !important;
}

/* Unified user + artist dashboard shell. It covers both legacy Bootstrap-row
   pages and newer direct-sidebar pages so profiles never change width/sidebar position. */
.dashboard-container {
    width: 100% !important;
    max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
    margin-inline: auto !important;
    padding-top: var(--site-dashboard-y) !important;
    padding-bottom: var(--site-dashboard-y) !important;
    padding-inline: var(--site-page-gutter) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--site-dashboard-gap) !important;
    box-sizing: border-box !important;
}

/* Legacy pages wrap the dashboard in another Bootstrap container: remove the
   second gutter so they match direct-layout pages exactly. */
.dashboard-container > .container,
.dashboard-container > .container-fluid {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    .dashboard-container > .container > .row,
    .dashboard-container > .container-fluid > .row {
        display: grid !important;
        grid-template-columns: var(--site-dashboard-sidebar) minmax(0, 1fr) !important;
        gap: var(--site-dashboard-gap) !important;
        align-items: start !important;
        margin: 0 !important;
    }

    html[dir="rtl"] .dashboard-container > .container > .row,
    html[dir="rtl"] .dashboard-container > .container-fluid > .row {
        direction: rtl;
    }

    .dashboard-container > .container > .row > .col-lg-3,
    .dashboard-container > .container-fluid > .row > .col-lg-3,
    .dashboard-container > .container > .row > .col-lg-9,
    .dashboard-container > .container-fluid > .row > .col-lg-9 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .dashboard-container > .container > .row > .col-lg-3,
    .dashboard-container > .container-fluid > .row > .col-lg-3 {
        grid-column: 1 !important;
    }
    .dashboard-container > .container > .row > .col-lg-9,
    .dashboard-container > .container-fluid > .row > .col-lg-9 {
        grid-column: 2 !important;
    }

    /* Under RTL, CSS grid line 1 starts on the right; under LTR it starts left. */
    .dashboard-container .sidebar {
        width: var(--site-dashboard-sidebar) !important;
        min-width: var(--site-dashboard-sidebar) !important;
        max-width: var(--site-dashboard-sidebar) !important;
        flex: 0 0 var(--site-dashboard-sidebar) !important;
        margin: 0 !important;
        position: sticky !important;
        top: 100px !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }

    /* Direct-layout dashboards: every content pane gets the exact remaining width. */
    .dashboard-container > div:not(.sidebar):not(.sidebar-overlay):not(.container):not(.container-fluid) {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Make all common dashboard cards fill the same content column. */
.dashboard-container .profile-card,
.dashboard-container .password-card,
.dashboard-container .notifications-card,
.dashboard-container .content-card,
.dashboard-container .favorites-content,
.dashboard-container .wallet-content,
.dashboard-container .main-content,
.dashboard-container .ads-content,
.dashboard-container .ad-detail-content,
.dashboard-container .tracks-container,
.dashboard-container .albums-container,
.dashboard-container .playlists-container,
.dashboard-container .upload-container,
.dashboard-container .detail-container,
.dashboard-container .form-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
    :root {
        --site-dashboard-y: 20px;
    }

    .dashboard-container {
        display: block !important;
        padding-top: var(--site-dashboard-y) !important;
        padding-bottom: var(--site-dashboard-y) !important;
    }

    .dashboard-container > .container > .row,
    .dashboard-container > .container-fluid > .row {
        display: block !important;
        margin: 0 !important;
    }

    .dashboard-container > .container > .row > [class*="col-"],
    .dashboard-container > .container-fluid > .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Sidebar itself becomes the existing mobile drawer; content keeps one gutter. */
    .dashboard-container .sidebar {
        max-width: 300px !important;
    }

    .btn:not(.w-100):not(.btn-block),
    .btn-submit:not(.w-100):not(.btn-block),
    .submit-btn:not(.w-100):not(.btn-block),
    .default-btn:not(.w-100):not(.btn-block) {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .track-container .star-rating,
    .album-container .star-rating,
    .playlist-container .star-rating {
        justify-content: flex-start !important;
        width: max-content !important;
    }
}

@media (max-width: 480px) {
    :root {
        --site-btn-height: 38px;
    }

    .btn:not(.w-100):not(.btn-block),
    .btn-submit:not(.w-100):not(.btn-block),
    .submit-btn:not(.w-100):not(.btn-block),
    .default-btn:not(.w-100):not(.btn-block) {
        padding: 0.5rem 0.88rem !important;
        font-size: 0.82rem !important;
    }
}


/* V8.1: plain compact language dropdown. */
.language-switcher .dropdown-menu {
    min-width: 86px !important;
    width: auto !important;
    padding: 5px !important;
}
.language-switcher .dropdown-item {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
}
.language-switcher .nav-link {
    gap: 0 !important;
}

/* Extend compact sizing to common page/form actions that do not use Bootstrap .btn. */
.btn-action:not(.w-100),
.btn-upload:not(.w-100),
.filter-btn:not(.w-100),
.btn-create:not(.w-100),
.btn-edit:not(.w-100),
.btn-view:not(.w-100),
.btn-back:not(.w-100),
.btn-cancel:not(.w-100),
.btn-delete:not(.w-100),
.btn-clear:not(.w-100),
.btn-download:not(.w-100),
.btn-reprocess:not(.w-100),
.mark-all-read-btn:not(.w-100) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--site-btn-height) !important;
    height: auto !important;
    padding: var(--site-btn-py) var(--site-btn-px) !important;
    border-radius: var(--site-btn-radius) !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
}

/* User playlist detail is a legacy panel page that has a sidebar but no dashboard-container. */
@media (min-width: 992px) {
    .playlist-detail-container > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .playlist-detail-container > .container > .row {
        display: grid !important;
        grid-template-columns: var(--site-dashboard-sidebar) minmax(0, 1fr) !important;
        gap: var(--site-dashboard-gap) !important;
        align-items: start !important;
        margin: 0 !important;
    }
    .playlist-detail-container > .container > .row > .col-lg-3,
    .playlist-detail-container > .container > .row > .col-lg-9 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .playlist-detail-container > .container > .row > .col-lg-3 { grid-column: 1 !important; }
    .playlist-detail-container > .container > .row > .col-lg-9 { grid-column: 2 !important; }
    .playlist-detail-container .sidebar {
        width: var(--site-dashboard-sidebar) !important;
        min-width: var(--site-dashboard-sidebar) !important;
        max-width: var(--site-dashboard-sidebar) !important;
        margin: 0 !important;
        position: sticky !important;
        top: 100px !important;
    }

    /* Artist advertisement creation pages use another legacy shell. */
    .advertisements-container {
        width: 100% !important;
        max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
        padding: var(--site-dashboard-y) var(--site-page-gutter) !important;
        margin-inline: auto !important;
        gap: var(--site-dashboard-gap) !important;
        align-items: flex-start !important;
    }
    .advertisements-container > .sidebar {
        width: var(--site-dashboard-sidebar) !important;
        min-width: var(--site-dashboard-sidebar) !important;
        max-width: var(--site-dashboard-sidebar) !important;
        flex: 0 0 var(--site-dashboard-sidebar) !important;
        margin: 0 !important;
        position: sticky !important;
        top: 100px !important;
    }
    .advertisements-container > .main-content {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 991.98px) {
    .playlist-detail-container > .container {
        padding: 0 !important;
        max-width: none !important;
    }
    .playlist-detail-container > .container > .row {
        margin: 0 !important;
    }
    .playlist-detail-container > .container > .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Match album/playlist rating proportions to the track detail page. */
.album-container .rating-section > .rating-row,
.playlist-container .rating-section > .rating-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: clamp(24px, 4vw, 48px) !important;
    align-items: center !important;
}
.album-container .rating-section > .rating-row > .col-md-6,
.playlist-container .rating-section > .rating-row > .col-md-6 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
@media (max-width: 767.98px) {
    .album-container .rating-section > .rating-row,
    .playlist-container .rating-section > .rating-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* V9: RTL rating layout must be physically right-aligned, not logical flex-end. */
html[dir="rtl"] .track-container .rating-form,
html[dir="rtl"] .album-container .rating-form,
html[dir="rtl"] .playlist-container .rating-form,
html[dir="rtl"] .track-container .rating-stats,
html[dir="rtl"] .album-container .rating-stats,
html[dir="rtl"] .playlist-container .rating-stats,
html[dir="rtl"] .album-container .rating-stats > .text-light,
html[dir="rtl"] .playlist-container .rating-stats > .text-light {
    align-items: flex-start !important;
    text-align: right !important;
}

html[dir="rtl"] .track-container .star-rating,
html[dir="rtl"] .album-container .star-rating,
html[dir="rtl"] .playlist-container .star-rating {
    align-self: flex-start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Put the score summary on the physical right side in Persian. */
html[dir="rtl"] .track-container .rating-container {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
}
html[dir="rtl"] .track-container .rating-stats {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
html[dir="rtl"] .track-container .rating-form {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
html[dir="rtl"] .album-container .rating-section .rating-stats,
html[dir="rtl"] .playlist-container .rating-section .rating-stats {
    order: -1 !important;
}

/* Mobile header direction: in RTL the hamburger is on the right and logo on the left. */
@media (max-width: 991.98px) {
    html[dir="rtl"] #navbar > .container,
    html[dir="rtl"] #navbar > .container.mw-1720 {
        direction: ltr !important;
    }
    html[dir="rtl"] #navbar .navbar-brand {
        order: 1 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    html[dir="rtl"] #navbar .navbar-toggler {
        order: 2 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep rating layout stacked and right-aligned on phones. */
    html[dir="rtl"] .track-container .rating-container {
        grid-template-columns: 1fr !important;
    }
    html[dir="rtl"] .track-container .rating-stats,
    html[dir="rtl"] .track-container .rating-form {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    html[dir="rtl"] .track-container .rating-stats {
        order: -1 !important;
    }
}

/* ========================================================================
   V10 - Compact typography across the public site and dashboards
   The project contains many page-local font-size declarations. These rules
   are intentionally loaded last so text stays visually consistent without
   shrinking decorative icons, logos or artwork.
   ======================================================================== */
:root {
    --site-font-body: 14px;
    --site-font-control: 13px;
    --site-font-small: 12px;
    --site-font-nav: 13px;
    --site-heading-1: clamp(24px, 2.2vw, 30px);
    --site-heading-2: clamp(20px, 1.8vw, 24px);
    --site-heading-3: clamp(17px, 1.45vw, 20px);
    --site-heading-4: 17px;
}

html { font-size: 14px !important; }
body {
    font-size: var(--site-font-body) !important;
    line-height: 1.65 !important;
}

h1, .h1, .display-1, .display-2 { font-size: var(--site-heading-1) !important; }
h2, .h2, .display-3 { font-size: var(--site-heading-2) !important; }
h3, .h3, .display-4 { font-size: var(--site-heading-3) !important; }
h4, .h4, .display-5 { font-size: var(--site-heading-4) !important; }
h5, .h5 { font-size: 15px !important; }
h6, .h6 { font-size: 14px !important; }

p,
label,
input,
textarea,
select,
option,
table,
.list-group-item,
.dropdown-item,
.alert,
.badge,
.form-control,
.form-select,
.input-group-text,
.nav-link,
.sidebar-menu a,
.mobile-bottom-nav a,
.mobile-bottom-nav span {
    font-size: var(--site-font-control) !important;
}

small, .small, .form-text, .help-text, .text-muted, .hint, .subtitle-small {
    font-size: var(--site-font-small) !important;
}

/* Common custom headings used throughout Sedamix templates. */
.page-title,
.section-heading,
.section-title,
.content-title,
.dashboard-title,
.profile-title,
.greeting-text,
.hero-title,
.track-page-title,
.album-page-title,
.playlist-page-title {
    font-size: var(--site-heading-1) !important;
}

.card-title,
.info-card .card-title,
.sidebar-name,
.track-title,
.album-title,
.playlist-title,
.artist-name,
.item-title,
.modal-title {
    font-size: 14px !important;
}

/* Bootstrap/utilities appear in many templates; keep their hierarchy, just smaller. */
.fs-1 { font-size: var(--site-heading-1) !important; }
.fs-2 { font-size: var(--site-heading-2) !important; }
.fs-3 { font-size: var(--site-heading-3) !important; }
.fs-4 { font-size: 17px !important; }
.fs-5 { font-size: 15px !important; }
.fs-6 { font-size: 13px !important; }
.fs-14 { font-size: 12px !important; }
.fs-15 { font-size: 12.5px !important; }
.fs-16 { font-size: 13px !important; }
.fs-17 { font-size: 13.5px !important; }
.fs-18 { font-size: 14px !important; }
.fs-19 { font-size: 14.5px !important; }
.fs-20 { font-size: 15px !important; }
.fs-21 { font-size: 16px !important; }
.fs-22 { font-size: 17px !important; }
.fs-23 { font-size: 18px !important; }
.fs-24 { font-size: 19px !important; }
.fs-30 { font-size: 23px !important; }

/* Rating text was particularly oversized on detail pages. */
.track-container .rating-average,
.album-container .rating-average,
.playlist-container .rating-average,
.track-container .average-rating,
.album-container .average-rating,
.playlist-container .average-rating {
    font-size: 29px !important;
}
.track-container .star-rating label,
.album-container .star-rating label,
.playlist-container .star-rating label,
.track-container .star-rating i,
.album-container .star-rating i,
.playlist-container .star-rating i {
    font-size: 18px !important;
}

/* Buttons: readable but not visually dominant. */
.btn,
.btn-action,
.btn-submit,
.submit-btn,
.default-btn,
.btn-upload,
.filter-btn,
.btn-create,
.btn-edit,
.btn-view,
.btn-back,
.btn-cancel,
.btn-delete,
.btn-clear,
.btn-download,
.btn-reprocess {
    font-size: 12.5px !important;
}

/* Purchased Set Mix: local Text-to-Speech voice tag creator. */
.tts-voice-card {
    margin-bottom: 20px;
    padding: 18px !important;
    border: 1px solid rgba(212, 17, 132, .28) !important;
    background: linear-gradient(135deg, rgba(212, 17, 132, .08), rgba(63, 32, 113, .12)) !important;
}
.tts-voice-card .tts-help {
    color: var(--text-paragraph-color-100);
    font-size: 12.5px !important;
    margin: 0 0 14px;
    line-height: 1.75;
}
.tts-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: end;
}
.tts-form-grid textarea,
.tts-form-grid select {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-white);
    padding: 9px 11px;
    outline: none;
}
.tts-form-grid textarea { min-height: 78px; resize: vertical; }
.tts-form-grid select option { color: #111; }
.tts-field-label {
    display: block;
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 12.5px !important;
}
.tts-counter {
    display: block;
    margin-top: 5px;
    color: var(--text-paragraph-color-100);
    font-size: 11px !important;
}
.tts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.tts-action-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px !important;
    font-weight: 600;
    cursor: pointer;
}
.tts-action-btn--preview { background: rgba(255,255,255,.09); color: #fff; }
.tts-action-btn--apply { background: linear-gradient(135deg, #d41184, #3f2071); color: #fff; }
.tts-action-btn:disabled { opacity: .55; cursor: not-allowed; }
.tts-preview-box { display: none; margin-top: 12px; }
.tts-preview-box.is-visible { display: block; }
.tts-preview-box audio { width: min(100%, 520px); height: 38px; }
.tts-status { min-height: 18px; margin-top: 9px; font-size: 12px !important; color: var(--text-paragraph-color-100); }
.tts-status.is-error { color: #ff8c8c; }
.tts-status.is-success { color: #78dc95; }

@media (max-width: 768px) {
    html { font-size: 13px !important; }
    body { font-size: 13px !important; }
    :root {
        --site-heading-1: 23px;
        --site-heading-2: 19px;
        --site-heading-3: 16px;
    }
    p, label, input, textarea, select, option, table, .nav-link, .sidebar-menu a {
        font-size: 12.5px !important;
    }
    .tts-form-grid { grid-template-columns: 1fr; }
    .tts-action-btn { font-size: 12px !important; min-height: 36px; }
}


/* ========================================================================
   V12 - public layout consistency, compact Explore, mobile track detail
   ======================================================================== */
.artists-page-container,
.explore-container,
.container-lg,
.container-xl,
.container-fluid.container-lg,
.container-fluid.container-xl {
    width: 100% !important;
    max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-page-gutter) !important;
    padding-right: var(--site-page-gutter) !important;
    box-sizing: border-box !important;
}

/* Artist public profile uses one outer shell; nested tabs/content must not invent another width. */
.profile-container > .profile-nav .nav-container,
.profile-container > .content-container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* Paid-purchase TTS: compact and direction-safe. */
.tts-voice-card { max-width: 100% !important; overflow: hidden; }
.tts-form-grid > div { min-width: 0; }
html[dir="rtl"] .tts-voice-card { text-align: right; }
html[dir="rtl"] .tts-actions { justify-content: flex-start; }
.tts-preview-box audio { max-width: 100% !important; }

/* Track detail: prevent horizontal overflow and make controls/cards usable on phones. */
.track-container .track-header-section,
.track-container .track-info-wrapper,
.track-container .track-stats,
.track-container .track-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}
.track-container { min-width: 0 !important; overflow-x: clip; }
.track-container .track-cover-wrapper { max-width: min(100%, 420px); }
.track-container .track-actions > form { min-width: 0 !important; margin: 0 !important; }

@media (max-width: 576px) {
    .track-container .track-header-section { gap: 14px !important; margin-bottom: 22px !important; }
    .track-container .track-cover-wrapper { width: min(100%, 320px); margin-inline: auto; }
    .track-container .track-info-wrapper { width: 100%; }
    .track-container .track-title { text-align: start; }
    .track-container .track-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .track-container .stat-item { min-width:0; padding:10px !important; }
    .track-container .stat-item > span { min-width:0; }
    .track-container .stat-value { overflow-wrap:anywhere; }
    .track-container .track-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }
    .track-container .track-actions > form { display:block !important; width:100% !important; }
    .track-container .track-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 38px !important;
        padding: 8px !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .track-container .track-actions .btn span { overflow-wrap:anywhere; }
}

@media (max-width: 360px) {
    .track-container .track-stats { grid-template-columns: 1fr 1fr !important; }
    .track-container .track-actions { grid-template-columns: 1fr 1fr !important; }
}

/* ========================================================================
   V13 - purchase TTS polish, physical audio progress, compact track shell
   ======================================================================== */
:root { --track-detail-content-max: 1320px; }

/* Track details should feel like a focused detail page, not a full-width dashboard. */
.track-container {
    max-width: calc(var(--track-detail-content-max) + (var(--site-page-gutter) * 2)) !important;
    margin-inline: auto !important;
}

/* The custom artist voice-tag player always progresses left-to-right, even in RTL UI. */
.custom-audio-player .progress-container,
.custom-audio-player .progress-bar-wrapper,
.custom-audio-player .progress-bar-bg,
.custom-audio-player audio,
.tts-preview-box audio {
    direction: ltr !important;
}
.custom-audio-player .progress-bar-fill {
    left: 0 !important;
    right: auto !important;
    transform-origin: left center !important;
}
.custom-audio-player .progress-bar-handle {
    right: auto !important;
}

/* TTS card: compact header, predictable RTL/LTR layout and clearer hierarchy. */
.tts-voice-card {
    padding: clamp(15px, 2vw, 20px) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(212,17,132,.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(63,32,113,.10)) !important;
}
.tts-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}
.tts-head-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(212,17,132,.22), rgba(63,32,113,.34));
    color: #fff;
    font-size: 13px;
}
.tts-head-copy { min-width: 0; flex: 1; }
.tts-card-title {
    margin: 0 0 3px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.tts-voice-card .tts-help {
    margin: 0 !important;
    font-size: 11.8px !important;
    line-height: 1.65 !important;
    opacity: .85;
}
.tts-form-grid {
    grid-template-columns: minmax(0, 1fr) 165px !important;
    gap: 10px !important;
    align-items: start !important;
}
.tts-text-field,
.tts-voice-field { min-width: 0; }
.tts-form-grid textarea {
    min-height: 86px !important;
    line-height: 1.7 !important;
}
.tts-form-grid textarea,
.tts-form-grid select {
    border-radius: 9px !important;
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.13) !important;
    font-size: 12px !important;
}
.tts-field-label { font-size: 11.8px !important; margin-bottom: 5px !important; }
.tts-voice-note {
    display: block;
    margin-top: 6px;
    color: var(--text-paragraph-color-100);
    font-size: 10.5px !important;
    opacity: .78;
}
.tts-counter { text-align: end; }
.tts-actions {
    margin-top: 11px !important;
    gap: 7px !important;
}
.tts-action-btn {
    min-height: 35px !important;
    padding: 7px 11px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
}
.tts-action-btn i { font-size: 11px !important; }
.tts-processing-progress {
    display: none;
    margin-top: 13px;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}
.tts-processing-progress.is-visible { display: block; }
.tts-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--text-paragraph-color-100);
    font-size: 11px !important;
}
.tts-progress-meta strong {
    color: #fff;
    font-size: 11.5px !important;
    font-variant-numeric: tabular-nums;
}
.tts-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    direction: ltr !important;
}
.tts-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #d41184, #8d31d5, #5b8cff);
    box-shadow: 0 0 12px rgba(212,17,132,.28);
    transition: width .35s ease;
}
.tts-preview-box.is-visible {
    margin-top: 10px !important;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.tts-preview-box audio { width: min(100%, 460px) !important; height: 34px !important; }
.tts-unavailable { margin: 0 !important; }

@media (max-width: 640px) {
    .tts-form-grid { grid-template-columns: 1fr !important; }
    .tts-card-head { gap: 8px; }
    .tts-head-icon { width: 31px; height: 31px; flex-basis: 31px; }
    .tts-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
    .tts-action-btn { width: 100% !important; min-width: 0 !important; }
}


/* ========================================================================
   V14 - phone overflow hardening for track / purchases / custom voice tag
   ======================================================================== */

/* The custom voice request is a focused form, not a full site-width page. */
.label-request-container {
    max-width: 900px !important;
}

/* All media/control descendants must be allowed to shrink inside narrow cards. */
.purchase-detail-page *,
.label-request-container *,
.track-container * {
    box-sizing: border-box;
}
.purchase-detail-page .content-card,
.purchase-detail-page .detail-grid,
.purchase-detail-page .detail-header,
.purchase-detail-page .info-card,
.purchase-detail-page .audio-player-card,
.purchase-detail-page .custom-audio-player,
.purchase-detail-page .player-controls,
.purchase-detail-page .progress-container,
.purchase-detail-page .track-info-compact,
.label-request-container form,
.label-request-container .info-card,
.label-request-container .form-group,
.label-request-container .file-upload,
.label-request-container .file-upload-label {
    min-width: 0 !important;
    max-width: 100% !important;
}
.purchase-detail-page audio,
.label-request-container audio,
.purchase-detail-page img,
.label-request-container img {
    max-width: 100% !important;
}

@media (max-width: 767.98px) {
    /* One real gutter only.  The old page had Bootstrap + dashboard + card
       paddings competing with each other, which is why cards escaped the viewport. */
    .purchase-detail-page {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 58px 0 24px !important;
        overflow-x: clip !important;
    }
    .purchase-detail-page > .purchase-detail-shell,
    .purchase-detail-page > .purchase-detail-shell > .row,
    .purchase-detail-page > .purchase-detail-shell > .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .purchase-detail-page .content-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 13px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .purchase-detail-page .detail-header {
        width: 100% !important;
        padding: 13px !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }
    .purchase-detail-page .track-cover-lg {
        width: 96px !important;
        max-width: 96px !important;
        flex: 0 0 96px !important;
    }
    .purchase-detail-page .header-info {
        width: 100% !important;
        min-width: 0 !important;
    }
    .purchase-detail-page .header-info h1,
    .purchase-detail-page .header-info p,
    .purchase-detail-page .info-value,
    .purchase-detail-page .info-label,
    .purchase-detail-page .card-title,
    .purchase-detail-page .track-title {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
    .purchase-detail-page .detail-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .purchase-detail-page .info-card,
    .purchase-detail-page .audio-player-card,
    .purchase-detail-page .custom-audio-player {
        width: 100% !important;
        padding: 12px !important;
        margin-inline: 0 !important;
    }
    .purchase-detail-page .custom-audio-player .player-controls {
        width: 100% !important;
    }
    .purchase-detail-page .progress-container {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: center !important;
        direction: ltr !important;
    }
    .purchase-detail-page .progress-bar-wrapper,
    .purchase-detail-page .progress-bar-bg {
        width: 100% !important;
        min-width: 0 !important;
    }
    .purchase-detail-page .time-display {
        min-width: 0 !important;
        width: 34px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .label-request-container {
        width: calc(100% - 20px) !important;
        max-width: 900px !important;
        margin: 14px auto 24px !important;
        padding: 0 !important;
        overflow-x: clip !important;
    }
    .label-request-container .step-header,
    .label-request-container .info-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding: 13px !important;
        border-radius: 13px !important;
    }
    .label-request-container .form-group {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .label-request-container textarea.form-control,
    .label-request-container .form-control,
    .label-request-container .file-upload,
    .label-request-container .file-upload-label,
    .label-request-container .file-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .label-request-container textarea.form-control {
        min-height: 110px !important;
        resize: vertical !important;
    }
    .label-request-container .help-text {
        margin-inline: 0 !important;
        overflow-wrap: anywhere !important;
    }
    .label-request-container .step-indicator {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 576px) {
    /* Track page: balanced mobile grid.  With an odd number of stats/actions,
       the final card spans the full row instead of hanging on one side in RTL. */
    .track-container {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 12px auto 24px !important;
        padding: 0 !important;
        overflow-x: clip !important;
    }
    .track-container .track-header-section,
    .track-container .track-info-wrapper,
    .track-container .section-card,
    .track-container .related-tracks-grid,
    .track-container .rating-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .track-container .track-cover-wrapper {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
    }
    .track-container .track-title,
    .track-container .track-artist-link,
    .track-container .stat-value,
    .track-container .stat-label {
        overflow-wrap: anywhere !important;
    }
    .track-container .track-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .track-container .track-stats > .stat-item:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
    .track-container .stat-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px !important;
        justify-content: flex-start !important;
    }
    .track-container .track-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .track-container .track-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
    .track-container .track-actions > *,
    .track-container .track-actions form,
    .track-container .track-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .track-container .track-actions .btn {
        white-space: normal !important;
        padding: 8px 7px !important;
        min-height: 38px !important;
        overflow-wrap: anywhere !important;
    }
    .track-container .section-card {
        padding: 13px !important;
        margin-bottom: 12px !important;
    }
    .track-container .related-tracks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    .track-container .track-card {
        min-width: 0 !important;
    }
}

@media (max-width: 340px) {
    .track-container .track-stats,
    .track-container .track-actions,
    .track-container .related-tracks-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .track-container .track-stats > .stat-item,
    .track-container .track-actions > * {
        grid-column: 1 !important;
    }
}

/* V14.1: compact purchase voice players on phones and reserve room for the drawer trigger. */
@media (max-width: 767.98px) {
    .dashboard-container:has(.sidebar-toggle) {
        padding-top: 58px !important;
    }
    .purchase-detail-page .custom-audio-player .player-controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 9px !important;
        margin-bottom: 10px !important;
    }
    .purchase-detail-page .custom-audio-player .play-pause-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    .purchase-detail-page .custom-audio-player .track-info-compact {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: start !important;
    }
    .purchase-detail-page .custom-audio-player .track-title {
        display: block !important;
        white-space: normal !important;
        line-height: 1.5 !important;
    }
}


/* ========================================================================
   V15 - exact track shell + genuinely compact mobile stats
   ======================================================================== */
.track-container {
    max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
}

@media (max-width: 576px) {
    .track-container .track-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }
    .track-container .track-stats.track-stats--four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .track-container .track-stats > .stat-item:last-child:nth-child(odd) {
        grid-column: auto !important;
    }
    .track-container .stat-item {
        min-height: 82px !important;
        padding: 8px 4px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        border-radius: 11px !important;
    }
    .track-container .stat-item > span {
        width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        text-align: center !important;
    }
    .track-container .stat-item i {
        font-size: 15px !important;
        line-height: 1 !important;
    }
    .track-container .stat-value {
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .track-container .stat-label {
        font-size: 9px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-transform: none !important;
    }
}

@media (max-width: 340px) {
    .track-container .track-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .track-container .track-stats.track-stats--four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .track-container .track-stats > .stat-item {
        grid-column: auto !important;
    }
}

/* ========================================================================
   V16 - authentication pages use the exact same site shell/gutters
   ======================================================================== */
.auth-container {
    width: 100% !important;
    max-width: calc(var(--site-content-max) + (var(--site-page-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-page-gutter) !important;
    padding-right: var(--site-page-gutter) !important;
    box-sizing: border-box !important;
}

.auth-container > .auth-wrapper,
.auth-container .auth-wrapper {
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
    .auth-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}