/**
 * 1MZ For Artists - responsive application shell.
 * Mobile-first overrides for the authenticated artist dashboard.
 */

@media (max-width: 900px) {
    html body #rmbz-vip {
        display: block;
        min-width: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html body #rmbz-vip .main {
        width: 100%;
        height: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    html body #rmbz-vip .wrap {
        container: rmbz-mobile / inline-size;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: max(18px, env(safe-area-inset-top)) clamp(14px, 4vw, 26px) calc(92px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-x: clip;
    }

    html body #rmbz-vip .aside {
        position: fixed;
        z-index: 2147483635;
        inset: auto 0 0;
        width: 100%;
        height: calc(72px + env(safe-area-inset-bottom));
        min-height: 72px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        border: 0;
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        box-shadow: 0 -16px 40px -34px rgba(0, 0, 0, .65);
        -webkit-backdrop-filter: blur(22px) saturate(1.35);
        backdrop-filter: blur(22px) saturate(1.35);
    }

    html body #rmbz-vip .aside::-webkit-scrollbar { display: none; }
    html body #rmbz-vip .aside > :not(.navbtn) { display: none !important; }
    html body #rmbz-vip .aside > #rmbz-vip-theme { display: none !important; }

    html body #rmbz-vip .aside > .navbtn {
        position: relative;
        flex: 0 0 76px;
        width: 76px;
        min-width: 76px;
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 5px;
        border-radius: 19px;
        text-align: center;
        scroll-snap-align: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    html body #rmbz-vip .aside > .navbtn > .ms:first-child { font-size: 23px !important; }

    html body #rmbz-vip .aside > .navbtn > .lbl:not(.vip-nav-count):not(.ms) {
        display: block !important;
        flex: none !important;
        width: 100%;
        overflow: hidden;
        color: currentColor;
        font-size: 10px;
        line-height: 1.05;
        font-weight: 680;
        letter-spacing: -.01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body #rmbz-vip .aside > .navbtn > .vip-nav-count {
        position: absolute;
        top: 4px;
        right: 9px;
        display: inline-flex !important;
        min-width: 17px;
        height: 17px;
        padding: 0 5px !important;
        align-items: center;
        justify-content: center;
        font-size: 8px !important;
        line-height: 1;
    }

    html body #rmbz-vip .aside > .navbtn > .ms.lbl { display: none !important; }

    html body #rmbz-vip .aside > .rmbz-vip-oliver-launch > .rmbz-vip-oliver-state {
        position: absolute;
        top: 9px;
        left: calc(50% + 8px);
        width: 9px !important;
        height: 9px !important;
        min-width: 9px;
        display: block !important;
        flex: none !important;
        border: 2px solid var(--surface);
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 0 2px var(--success-soft);
        pointer-events: none;
    }
    html body #rmbz-vip .aside > .navbtn.on { background: var(--brand-soft); color: var(--brand-ink); }

    html body #rmbz-vip .aside > .navbtn.on::before {
        content: "";
        position: absolute;
        top: 4px;
        width: 34px;
        height: 3px;
        border-radius: 100px;
        background: var(--brand);
    }

    html body #rmbz-vip :where(
        .wrap, .wrap > *, [data-sect], .card, section, article, form, fieldset, header, footer, nav,
        .grid2, .grid3, .home-finance-grid, .home-main-grid, .home-module-grid, .finance-hero,
        .finance-panels, .vip-profile-grid, .distro-summary-grid, .release-hero,
        .artists-native-shell, .artist-dashboard
    ) { min-width: 0; max-width: 100%; }

    html body #rmbz-vip :where(img, svg, canvas, video, audio, iframe) { max-width: 100%; }
    html body #rmbz-vip :where(h1, h2, h3, h4, p, a, span, strong, small, label, td, th) { overflow-wrap: anywhere; }

    html body #rmbz-vip :where(input, select, textarea) {
        max-width: 100%;
        min-width: 0;
        font-size: max(16px, 1em);
    }

    html body #rmbz-vip :where(button, a, input, select, textarea, summary) {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    html body #rmbz-vip :where(.grid2, .grid3, .rmbz-vip-detail-grid, .rvd-catalog-filter) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #rmbz-vip .vip-page-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
        margin-bottom: clamp(17px, 4vw, 24px);
    }

    html body #rmbz-vip .vip-page-title {
        font-size: clamp(23px, 7vw, 30px);
        line-height: 1.08;
        text-wrap: balance;
    }

    html body #rmbz-vip .vip-page-sub {
        max-width: 48ch;
        font-size: clamp(12px, 3.3vw, 13px);
    }

    html body #rmbz-vip .vip-page-notif {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0 !important;
        justify-content: center;
        font-size: 0 !important;
    }

    html body #rmbz-vip .vip-page-notif-count { position: absolute; top: -5px; right: -5px; }

    html body #rmbz-vip .card {
        border-radius: clamp(19px, 5vw, 26px);
        padding: clamp(16px, 4.6vw, 24px);
    }

    html body #rmbz-vip :where(.rvd-tabs, .release-actions, .stats-toolbar-actions) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    html body #rmbz-vip :where(.rvd-tabs, .release-actions, .stats-toolbar-actions)::-webkit-scrollbar { display: none; }
    html body #rmbz-vip :where(.rvd-tabs, .release-actions, .stats-toolbar-actions) > * { flex: 0 0 auto; scroll-snap-align: start; }

    html body #rmbz-vip :where(.project-stage-track, .release-tracker-steps) {
        grid-template-columns: repeat(5, minmax(82px, 1fr));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    html body #rmbz-vip :where(.project-stage-step, .release-tracker-step) { scroll-snap-align: center; }
    html body #rmbz-vip :where(table) { width: 100%; max-width: 100%; }

    html body #rmbz-vip :where(.table-wrap, .rmbz-table-wrap, .rvd-table-wrap) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    html body #rmbz-vip .scrim {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }

    html body #rmbz-vip .scrim > .dialog {
        width: min(100%, 680px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 700px) {
    html body #rmbz-vip .wrap { padding-inline: clamp(12px, 3.5vw, 20px); }

    html body #rmbz-vip :where(
        .home-finance-grid, .home-main-grid, .home-command-bottom, .home-module-grid, .home-utility-grid,
        .finance-hero, .finance-panels, .vip-profile-grid, .vip-account-grid, .distro-summary-grid,
        .distro-dsp-grid, .distro-quick-grid, .release-info-grid, .shoot-dates, .location-options,
        .project-metrics, .project-team-grid, .stats-metric-grid, .stats-highlight-grid,
        .stats-activity-grid, .service-access-features, .wd-source-grid
    ) { grid-template-columns: minmax(0, 1fr) !important; }

    html body #rmbz-vip :where(
        .home-panel, .home-utility-card, .finance-panel, .stats-achievements, .art-track-catalog,
        .art-track-commerce-form, .vip-packages-card, .vip-security-card
    ) {
        padding: clamp(14px, 4vw, 18px);
        border-radius: clamp(19px, 5vw, 23px);
    }

    html body #rmbz-vip :where(.home-wealth-card, .finance-hero, .distro-balance-card) {
        min-height: 0;
        padding: clamp(19px, 5vw, 24px);
        border-radius: 24px;
    }

    html body #rmbz-vip :where(.home-wealth-value, .finance-hero-value) { font-size: clamp(30px, 9vw, 38px); }

    html body #rmbz-vip .fine-debt-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
        padding: 15px;
        border-radius: 22px;
    }

    html body #rmbz-vip .fine-debt-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
    html body #rmbz-vip .fine-debt-title { font-size: clamp(17px, 5vw, 20px); }
    html body #rmbz-vip .fine-debt-facts { display: grid; grid-template-columns: minmax(0, 1fr); }
    html body #rmbz-vip .fine-debt-fact { width: 100%; }

    html body #rmbz-vip .fine-debt-side {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding-top: 13px;
        border-top: 1px solid var(--border);
    }

    html body #rmbz-vip .fine-debt-action { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
    html body #rmbz-vip .art-track-song { grid-template-columns: 50px minmax(0, 1fr) !important; }

    html body #rmbz-vip .art-track-song-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    html body #rmbz-vip .art-track-song-actions > * { width: 100%; min-width: 0; }
    html body #rmbz-vip .release-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #rmbz-vip .distro-filter { grid-template-columns: minmax(0, 1fr) !important; }
    html body #rmbz-vip :where(.distro-search, .distro-filter-submit) { grid-column: auto !important; }

    html body #rmbz-vip .scrim {
        align-items: flex-end;
        padding: max(8px, env(safe-area-inset-top)) 0 0;
    }

    html body #rmbz-vip .scrim > .dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(96dvh - env(safe-area-inset-top)) !important;
        margin: auto 0 0;
        padding: 19px 16px calc(19px + env(safe-area-inset-bottom));
        border-radius: 28px 28px 0 0 !important;
    }

    html body #rmbz-vip .finance-monetization-scrim > .dialog.finance-monetization-dialog {
        width: 100% !important;
        height: min(92dvh, 780px);
        max-height: calc(96dvh - env(safe-area-inset-top)) !important;
        margin: auto 0 0;
        padding: 0 !important;
        border-radius: 28px 28px 0 0 !important;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        overflow: hidden;
    }

    html body #rmbz-vip .finance-monetization-dialog .finance-monetization-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    html body #rmbz-vip :where(.dialog form, .dialog .rvu-actions, .dialog .art-track-dialog-actions) { min-width: 0; }
}

@media (max-width: 480px) {
    html body #rmbz-vip .wrap {
        padding-top: max(14px, env(safe-area-inset-top));
        padding-inline: 12px;
    }

    html body #rmbz-vip .aside > .navbtn { flex-basis: 72px; width: 72px; min-width: 72px; }
    html body #rmbz-vip .vip-page-head { gap: 9px; }
    html body #rmbz-vip .vip-page-title { font-size: clamp(22px, 7.2vw, 27px); }
    html body #rmbz-vip .card { padding: 15px; border-radius: 20px; }

    html body #rmbz-vip :where(.home-wealth-actions, .finance-hero-actions, .vip-account-actions) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    html body #rmbz-vip :where(.home-wealth-action, .finance-action, .vip-account-actions .pill) {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    html body #rmbz-vip :where(.art-track-metrics, .finance-hero-metrics) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body #rmbz-vip .release-data-grid { grid-template-columns: minmax(0, 1fr); }
    html body #rmbz-vip .distro-release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

    html body #rmbz-vip .fine-debt-side { grid-template-columns: minmax(0, 1fr); }
    html body #rmbz-vip .fine-debt-action { grid-column: 1; grid-row: auto; width: 100%; margin-top: 3px; }

    html body #rmbz-vip :where(
        .project-header-side, .project-badges, .stats-toolbar-actions, .home-utility-form, .vip-account-actions
    ) { width: 100%; }
}

@media (max-width: 360px) {
    html body #rmbz-vip .wrap { padding-inline: 10px; }
    html body #rmbz-vip .aside { gap: 2px; padding-inline: 5px; }
    html body #rmbz-vip .aside > .navbtn { flex-basis: 68px; width: 68px; min-width: 68px; }
    html body #rmbz-vip .distro-release-grid { grid-template-columns: minmax(0, 1fr); }

    html body #rmbz-vip :where(.home-wealth-actions, .finance-hero-actions, .vip-account-actions) {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #rmbz-vip .art-track-song-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
    html body #rmbz-vip .aside {
        height: calc(62px + env(safe-area-inset-bottom));
        min-height: 62px;
        padding-top: 4px;
    }

    html body #rmbz-vip .aside > .navbtn {
        min-height: 50px;
        flex-direction: row;
        gap: 7px;
        flex-basis: 104px;
        width: 104px;
        min-width: 104px;
    }

    html body #rmbz-vip .aside > .navbtn.on::before { top: 2px; }
    html body #rmbz-vip .wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    html body #rmbz-vip,
    html body #rmbz-vip *,
    html body #rmbz-vip *::before,
    html body #rmbz-vip *::after { scroll-behavior: auto !important; }
}
/* Component queries keep embedded modules responsive to the space they receive,
   including split-screen, foldable and narrow tablet windows. */
@container rmbz-mobile (max-width: 560px) {
    html body #rmbz-vip :where(.vip-services-grid, .vip-packages-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #rmbz-vip .rvu-page-head {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 11px;
        padding: 15px;
    }

    html body #rmbz-vip .rvu-page-head-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }

    html body #rmbz-vip .rvu-page-head > .pill {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    html body #rmbz-vip .rvu-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    html body #rmbz-vip .rvu-kind-filter {
        width: 100%;
        border-radius: 17px;
        scrollbar-width: none;
    }

    html body #rmbz-vip .rvu-sub-card {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
    }

    html body #rmbz-vip .rvu-sub-cover {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 15px;
    }

    html body #rmbz-vip .rvu-sub-main {
        min-width: 0;
    }

    html body #rmbz-vip .rvu-sub-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    html body #rmbz-vip .artists-native-shell :where(.artist-dashboard, .rmbz-mg-native, .rmbz-mg-panel) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    html body #rmbz-vip .artists-native-shell .rmbz-mg-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 6px;
        border-radius: 19px;
    }

    html body #rmbz-vip .artists-native-shell .rmbz-mg-tabs button {
        min-width: 0;
        min-height: 58px;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 11px;
        border-radius: 14px;
    }

    /* [2.0] O icone tem 38x38 fixos na folha base. Aqui a coluna dele foi
     * encolhida mas o icone nao: transbordava para dentro do gap e encostava
     * ao texto.
     *
     * Em vez de repetir o numero da coluna (que obriga a mudar dois sitios
     * sempre que o breakpoint muda), o icone passa a DERIVAR da coluna:
     * `width:100%` da-lhe exactamente a largura da track e o `aspect-ratio`
     * mantem-no quadrado. Uma so fonte de verdade. Seguro porque a caixa e
     * um flex centrado — o glifo fica ao meio seja qual for o tamanho. */
    html body #rmbz-vip .artists-native-shell .rmbz-mg-tabs button > .ms {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 12px;
        font-size: 19px;
    }

    html body #rmbz-vip .artists-native-shell :where(.rmbz-mg-sales-summary, .rmbz-mg-protection-summary) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #rmbz-vip .artists-native-shell .rmbz-mg-sale-data {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #rmbz-vip .artists-native-shell .rmbz-mg-sale-data > div:last-child {
        grid-column: auto;
    }

    /* [2.0] BUGFIX do centro de notificacoes em telemovel.
     *
     * Esta regra punha o CARTAO em duas colunas (42px | 1fr), a contar que os
     * filhos directos fossem o icone e o texto. Nao sao: sao
     * `.rmbz-vip-notif-row` e `.rmbz-vip-notif-expanded`. A linha inteira caia
     * na coluna de 42px e, la dentro, a grelha propria dela
     * (40px | 1fr | 30px) ficava sem espaco — o titulo saia uma letra por
     * linha e o botao de accao virava uma barra vertical.
     *
     * O icone de 42px vive DENTRO do `.rmbz-vip-notif-toggle`, que ja tem a
     * sua grelha. O cartao so precisa de empilhar os filhos. O padding fica a
     * zero porque a `.rmbz-vip-notif-row` traz o seu, e a barra de cor da
     * esquerda (::before) tem de encostar ao bordo.
     *
     * A correcao fica nesta folha porque o conflito nasce dentro desta
     * container query; o componente base continua independente do mobile.
     */
    html body #rmbz-vip .rmbz-vip-notif {
        display: block !important;
        padding: 0 !important;
    }
}

@container rmbz-mobile (max-width: 380px) {
    html body #rmbz-vip .artists-native-shell :where(.rmbz-mg-sales-summary, .rmbz-mg-protection-summary) {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #rmbz-vip .artists-native-shell .rmbz-mg-tabs button {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        padding: 9px 10px;
    }

    /* O tamanho ja vem da coluna (regra do bloco de 560px); aqui so o
     * arredondamento e o glifo e que acompanham a escala. */
    html body #rmbz-vip .artists-native-shell .rmbz-mg-tabs button > .ms {
        border-radius: 11px;
        font-size: 18px;
    }

    html body #rmbz-vip .vip-package-head {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    html body #rmbz-vip .vip-package-badge {
        grid-column: 2;
        justify-self: start;
    }
}
/* Mobile modal action rail: dialogs always sit above navigation and keep their
   confirmation controls visible while their descriptive content scrolls. */
@media (max-width: 900px) {
    html body #rmbz-vip .scrim {
        z-index: 2147483640;
    }

    html body #rmbz-vip:has(.scrim.open) .aside {
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 700px) {
    html body #rmbz-vip #rmbz-vip-fine-scrim .fine-pay-dialog {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: 100% !important;
        max-height: min(94dvh, 760px) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body #rmbz-vip .fine-pay-head {
        padding: 18px 16px 13px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
    }

    html body #rmbz-vip .fine-pay-scroll {
        min-width: 0;
        min-height: 0;
        padding: 0 16px 15px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    html body #rmbz-vip .fine-pay-summary {
        margin-top: 15px;
    }

    html body #rmbz-vip .fine-pay-form {
        position: relative;
        z-index: 2;
        min-width: 0;
        margin: 0;
        padding: 13px 16px calc(15px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        box-shadow: 0 -18px 34px -32px rgba(0, 0, 0, .72);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    html body #rmbz-vip .fine-pay-form .inp {
        min-height: 52px;
    }

    html body #rmbz-vip .fine-pay-submit {
        display: flex;
        min-height: 50px;
        margin-top: 10px;
    }

    html body #rmbz-vip .fine-pay-deposit {
        background: var(--brand);
        color: var(--on-brand);
        box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--brand) 75%, #000);
    }
}

@media (max-width: 380px), (max-height: 620px) {
    html body #rmbz-vip .fine-pay-head {
        padding-block: 13px 10px;
    }

    html body #rmbz-vip .fine-pay-head-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }

    html body #rmbz-vip .fine-pay-title {
        font-size: 17px;
    }

    html body #rmbz-vip .fine-pay-scroll {
        padding-inline: 13px;
        padding-bottom: 11px;
    }

    html body #rmbz-vip .fine-pay-summary {
        margin-top: 11px;
        padding: 14px;
    }

    html body #rmbz-vip .fine-pay-summary-value {
        font-size: 25px;
    }

    html body #rmbz-vip .fine-pay-note {
        margin-block: 10px;
    }

    html body #rmbz-vip .fine-pay-balance-warning {
        margin-block: 9px;
    }

    html body #rmbz-vip .fine-pay-form {
        padding: 10px 13px calc(11px + env(safe-area-inset-bottom));
    }
}
/* Filming days mobile reflow: reserve real space for the date and metadata
   instead of letting status pills compress the content to one character. */
@media (max-width: 700px) {
    html body #rmbz-vip .project-filming-history .project-section-head {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 10px 11px;
    }

    html body #rmbz-vip .project-filming-history .project-section-head > div {
        min-width: 0;
    }

    html body #rmbz-vip .project-filming-history .project-filming-summary {
        grid-column: 1 / -1;
        justify-self: start;
        width: auto;
        max-width: 100%;
        margin: 0;
        white-space: normal;
    }

    html body #rmbz-vip .project-filming-day > summary {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        grid-template-areas:
            "number copy expand"
            "number result expand";
        align-items: center;
        gap: 5px 10px;
        min-width: 0;
        padding: 12px;
    }

    html body #rmbz-vip .project-filming-day-number {
        grid-area: number;
    }

    html body #rmbz-vip .project-filming-day-copy {
        grid-area: copy;
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    html body #rmbz-vip .project-filming-day-title {
        display: block;
        min-width: 0;
        font-size: 13px;
        line-height: 1.3;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body #rmbz-vip .project-filming-day-meta {
        min-width: 0;
        margin-top: 0;
        line-height: 1.35;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body #rmbz-vip .project-filming-result {
        grid-area: result;
        justify-self: start;
        width: fit-content;
        max-width: 100%;
        margin: 0 !important;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body #rmbz-vip .project-filming-expand {
        grid-area: expand;
        align-self: center;
        justify-self: end;
    }

    html body #rmbz-vip .project-filming-day-body {
        min-width: 0;
        padding: 2px 12px 13px 62px;
    }

    html body #rmbz-vip :where(
        .project-filming-empty,
        .project-filming-group-head,
        .project-filming-person-name,
        .project-filming-person-role
    ) {
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 430px) {
    html body #rmbz-vip .project-filming-history {
        padding: 14px;
    }

    html body #rmbz-vip .project-filming-history .project-section-head {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    html body #rmbz-vip .project-filming-day > summary {
        grid-template-columns: 40px minmax(0, 1fr) 18px;
        gap: 5px 9px;
        padding: 11px;
    }

    html body #rmbz-vip .project-filming-day-number {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }

    html body #rmbz-vip .project-filming-day-body {
        padding: 3px 11px 12px;
    }

    html body #rmbz-vip .project-filming-people {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    html body #rmbz-vip .project-filming-person {
        width: 100%;
        border-radius: 15px;
    }

    html body #rmbz-vip :where(.project-filming-person-name, .project-filming-person-role) {
        max-width: none;
    }
}
/* Envios mobile card reflow: platform links have their own layout area. */
html body #rmbz-vip .rvu-sub-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

@container rmbz-mobile (max-width: 560px) {
    html body #rmbz-vip .rvu-page-head > div:last-child {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
        min-width: 0;
    }

    html body #rmbz-vip .rvu-page-head > div:last-child .status {
        justify-self: start;
        white-space: nowrap;
    }

    html body #rmbz-vip .rvu-page-head > div:last-child .pill {
        width: 100%;
        min-width: 0;
        margin: 0;
        justify-content: center;
        white-space: normal;
    }

    html body #rmbz-vip .rvu-list-toolbar {
        gap: 10px;
        margin-bottom: 13px;
    }

    html body #rmbz-vip .rvu-kind-filter {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        overflow: visible;
    }

    html body #rmbz-vip .rvu-kind-filter .rvu-kind {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 7px 6px;
        justify-content: center;
        gap: 4px;
        border-radius: 13px;
        font-size: 10.5px;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body #rmbz-vip .rvu-kind-filter .rvu-kind .mono {
        min-width: 18px;
        height: 18px;
        padding-inline: 4px;
        flex: 0 0 auto;
    }

    html body #rmbz-vip .rvu-sub-actions {
        gap: 7px;
    }

    html body #rmbz-vip .rvu-sub-links {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
        gap: 8px;
        width: 100%;
        padding-top: 2px;
    }

    html body #rmbz-vip .rvu-sub-links .chip {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        margin: 0;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface);
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@container rmbz-mobile (max-width: 340px) {
    html body #rmbz-vip .rvu-page-head > div:last-child {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #rmbz-vip .rvu-page-head > div:last-child :where(.status, .pill) {
        width: 100%;
        justify-content: center;
    }

    html body #rmbz-vip .rvu-kind-filter .rvu-kind {
        padding-inline: 4px;
        font-size: 9.5px;
    }

    html body #rmbz-vip .rvu-kind-filter .rvu-kind > .ms {
        display: none;
    }

    html body #rmbz-vip .rvu-sub-links {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Legacy Envios markup fallback: direct platform links must never use the cover column. */
@media (max-width: 600px) {
    html body #rmbz-vip .rvu-sub-card > a.chip {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex: 1 0 100% !important;
        box-sizing: border-box;
        min-height: 40px;
        margin: 0;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface);
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}
/* Finance statement mobile layout follows the dashboard navigation breakpoint. */
@media (max-width: 900px) {
    html body #rmbz-vip .finance-statement-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 16px;
    }

    html body #rmbz-vip .finance-statement-heading { min-width: 0; }

    html body #rmbz-vip .finance-statement-open {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: auto !important;
        min-width: 168px;
        min-height: 40px;
        padding: 8px 13px;
        box-sizing: border-box;
        flex: 0 0 auto;
        font-size: 11px !important;
        line-height: 1.2;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-decoration: none;
    }

    html body #rmbz-vip .finance-statement-open > .ms {
        flex: 0 0 auto;
        font-size: 17px !important;
    }
}

@media (max-width: 600px) {
    html body #rmbz-vip .finance-statement-head {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    html body #rmbz-vip .finance-statement-open {
        width: 100% !important;
        min-width: 0;
    }

    html body #rmbz-vip .finance-transactions { padding: 4px 15px 8px; }

    html body #rmbz-vip .finance-transaction {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas: "icon copy" "icon value";
        column-gap: 10px;
        row-gap: 6px;
        align-items: start;
    }

    html body #rmbz-vip .finance-transaction-icon {
        grid-area: icon;
        width: 38px;
        height: 38px;
    }

    html body #rmbz-vip .finance-transaction-copy { grid-area: copy; }

    html body #rmbz-vip .finance-transaction-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        line-height: 1.35;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        word-break: normal;
    }

    html body #rmbz-vip .finance-transaction-meta {
        line-height: 1.4;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body #rmbz-vip .finance-transaction-value {
        grid-area: value;
        justify-self: start;
    }
}