/* Eddie Vault 1.9.29 — consolidated mobile workspace.
   This replaces the stacked 1.9.10–1.9.27 mobile override layers with one
   intentional layout: fixed top navigation, Library/Details drawers, a
   top-anchored crop shelf, and a media stage that fits without page scroll. */

.eddie-vault-shell__mobile-actions,
.eddie-vault-shell__mobile-overlay,
.eddie-my-vault-viewer__side-close,
.eddie-vault-shell__mobile-cropbar {
    display: none;
}

@media (max-width: 860px) {
    html.eddie-vault-mobile-layout-active,
    html.eddie-vault-mobile-layout-active body.eddie-my-vault-page,
    body.eddie-my-vault-page.eddie-vault-mobile-layout-active,
    body.eddie-my-vault-page {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.eddie-vault-mobile-drawer-open,
    html.eddie-vault-mobile-drawer-open body.eddie-my-vault-page,
    body.eddie-my-vault-page.eddie-vault-mobile-drawer-open,
    body.eddie-my-vault-page.eddie-vault-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
    }

    body.eddie-my-vault-page .eddie-my-vault-route,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-route {
        width: 100% !important;
        max-width: 100% !important;
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 15% -8%, rgba(33, 113, 181, 0.18), transparent 38%),
            linear-gradient(180deg, #05080d 0%, #06101d 100%) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault,
    body.eddie-my-vault-page .eddie-my-vault--shell,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell {
        --eddie-vault-mobile-mainbar-h: 52px;
        --eddie-vault-mobile-panelbar-h: 42px;
        --eddie-vault-mobile-nav-h: calc(var(--eddie-vault-mobile-mainbar-h) + var(--eddie-vault-mobile-panelbar-h));
        --eddie-vault-mobile-cropbar-h: 0px;
        width: 100% !important;
        max-width: none !important;
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100svh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Top navigation: simple text/icons, no stacked pill-box look. */
    body.eddie-my-vault-page .eddie-my-vault__nav,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav,
    body.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__nav,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__nav {
        position: relative !important;
        top: auto !important;
        z-index: 310 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: max(4px, env(safe-area-inset-top, 0px)) 10px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(145, 203, 255, 0.12) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(33, 113, 181, 0.14), transparent 40%),
            rgba(5, 10, 17, 0.985) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        box-sizing: border-box !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__toprow,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__toprow,
    body.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__toprow,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__toprow {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: var(--eddie-vault-mobile-mainbar-h) !important;
        height: var(--eddie-vault-mobile-mainbar-h) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__brand,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 9px !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__brand-title,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__brand-title {
        display: inline-block !important;
        min-width: 0 !important;
        max-width: 46vw !important;
        overflow: hidden !important;
        color: #f8fbff !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -0.035em !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__menu-btn,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__menu-btn {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #eef6ff !important;
        box-shadow: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }

    body.eddie-my-vault-page .eddie-my-vault__menu-btn span,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__menu-btn span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 0 auto !important;
        border-radius: 999px !important;
        background: currentColor !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__nav-actions,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-actions {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-width: 0 !important;
        max-width: 54vw !important;
        overflow: hidden !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__nav-link,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link,
    body.eddie-my-vault-page .eddie-my-vault__member-badge,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__member-badge {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        max-width: 118px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(238, 246, 255, 0.78) !important;
        box-shadow: none !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.015em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__nav-link--primary,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link--primary,
    body.eddie-my-vault-page .eddie-my-vault__nav-link--upgrade,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link--upgrade {
        color: #9fd0ff !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__nav-link:hover,
    body.eddie-my-vault-page .eddie-my-vault__nav-link:focus-visible,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link:hover,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link:focus-visible {
        color: #ffffff !important;
        outline: none !important;
    }

    /* Library / Details rail directly below the main bar. */
    body.eddie-my-vault-page .eddie-my-vault__workspace-row,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-row,
    body.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__workspace-row,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell .eddie-my-vault__workspace-row {
        display: block !important;
        width: 100% !important;
        min-height: var(--eddie-vault-mobile-panelbar-h) !important;
        height: var(--eddie-vault-mobile-panelbar-h) !important;
        margin: 0 !important;
        padding: 4px 0 6px !important;
        border-top: 1px solid rgba(145, 203, 255, 0.08) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-switch,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-switch {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-btn,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(238, 246, 255, 0.72) !important;
        box-shadow: none !important;
        font: inherit !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-btn::after,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn::after {
        content: '' !important;
        position: absolute !important;
        left: 14px !important;
        right: 14px !important;
        bottom: -6px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #4da3ff !important;
        opacity: 0 !important;
        transform: scaleX(.3) !important;
        transition: opacity 170ms ease, transform 170ms ease !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-btn.is-active,
    body.eddie-my-vault-page .eddie-my-vault__workspace-btn:focus-visible,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn.is-active,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn:focus-visible {
        color: #ffffff !important;
        outline: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-btn.is-active::after,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn.is-active::after {
        opacity: 1 !important;
        transform: scaleX(1) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__workspace-btn span,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__workspace-btn span {
        display: inline-grid !important;
        place-items: center !important;
        width: 18px !important;
        height: 18px !important;
        color: #9fd0ff !important;
        line-height: 1 !important;
        font-size: 13px !important;
    }

    /* The older bottom duplicate actions stay hidden; the top rail is the source of truth. */
    body.eddie-my-vault-page .eddie-vault-shell__mobile-actions,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-actions,
    body.eddie-my-vault-page .eddie-vault-shell__browse,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__browse {
        display: none !important;
        pointer-events: none !important;
    }

    /* Main workspace. */
    body.eddie-my-vault-page .eddie-vault-shell,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell {
        position: relative !important;
        z-index: 1 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100svh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        height: calc(100dvh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        max-height: calc(100dvh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        display: block !important;
        overflow: hidden !important;
        background: #050910 !important;
        border-radius: 0 !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline,
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-mobile-vault-layout,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-mobile-vault-layout {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #050910 !important;
        overflow: hidden !important;
        --eddie-vault-mobile-cropbar-h: 0px;
    }

    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-mobile-cropbar-open,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-mobile-cropbar-open {
        --eddie-vault-mobile-cropbar-h: var(--eddie-vault-mobile-cropbar-measured-h, 124px);
    }

    /* Top crop shelf. It is part of the layout, not a floating bubble. */
    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar,
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline > .eddie-vault-shell__mobile-cropbar,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline > .eddie-vault-shell__mobile-cropbar {
        order: 0 !important;
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) minmax(118px, auto) !important;
        grid-template-areas:
            "close copy download"
            "ratios ratios ratios" !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 0 solid rgba(145, 203, 255, 0.12) !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(33, 113, 181, 0.16), transparent 48%),
            linear-gradient(180deg, rgba(5, 10, 17, 0.995), rgba(5, 9, 16, 0.98)) !important;
        box-shadow: none !important;
        color: #f7fbff !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform: translate3d(0, -100%, 0) !important;
        transform-origin: top center !important;
        box-sizing: border-box !important;
        transition:
            max-height 300ms cubic-bezier(.22, .61, .36, 1),
            padding-top 300ms cubic-bezier(.22, .61, .36, 1),
            padding-bottom 300ms cubic-bezier(.22, .61, .36, 1),
            opacity 210ms ease,
            transform 300ms cubic-bezier(.22, .61, .36, 1),
            border-bottom-width 300ms ease,
            visibility 0ms linear 300ms !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar.is-open,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar.is-open,
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-crop-profile > .eddie-vault-shell__mobile-cropbar.is-open,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline.is-crop-profile > .eddie-vault-shell__mobile-cropbar.is-open {
        max-height: 180px !important;
        padding-top: 9px !important;
        padding-bottom: 10px !important;
        border-bottom-width: 1px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        transition:
            max-height 300ms cubic-bezier(.22, .61, .36, 1),
            padding-top 300ms cubic-bezier(.22, .61, .36, 1),
            padding-bottom 300ms cubic-bezier(.22, .61, .36, 1),
            opacity 210ms ease,
            transform 300ms cubic-bezier(.22, .61, .36, 1),
            border-bottom-width 300ms ease,
            visibility 0ms linear 0ms !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-close,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-close {
        grid-area: close !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(238, 246, 255, 0.74) !important;
        box-shadow: none !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy {
        grid-area: copy !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy span,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy span {
        display: block !important;
        color: #8cc9ff !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: .13em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy strong,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy strong {
        display: block !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-download,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-download {
        grid-area: download !important;
        justify-self: end !important;
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios {
        grid-area: ratios !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 2px !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios[hidden],
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios[hidden] {
        display: none !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 5px 4px !important;
        border: 1px solid rgba(145, 203, 255, 0.14) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.045) !important;
        color: rgba(238, 246, 255, 0.76) !important;
        font: inherit !important;
        cursor: pointer !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button strong,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button strong {
        font-size: 11px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button span,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button span {
        font-size: 8.5px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        opacity: .72 !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button.is-active,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button.is-active {
        border-color: rgba(77, 163, 255, 0.55) !important;
        background: rgba(33, 113, 181, 0.22) !important;
        color: #ffffff !important;
        box-shadow: inset 0 0 0 1px rgba(145, 203, 255, 0.08) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault--shell.is-mobile-drawer-open .eddie-vault-shell__mobile-cropbar,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell.is-mobile-drawer-open .eddie-vault-shell__mobile-cropbar {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(0, -100%, 0) !important;
    }

    /* Media stage. */
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline > .eddie-my-vault-viewer__stage,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline > .eddie-my-vault-viewer__stage {
        order: 1 !important;
        position: relative !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100% - var(--eddie-vault-mobile-cropbar-h, 0px)) !important;
        min-height: 0 !important;
        max-height: calc(100% - var(--eddie-vault-mobile-cropbar-h, 0px)) !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
            radial-gradient(circle at 50% 18%, rgba(33, 113, 181, 0.10), transparent 34%),
            #050910 !important;
        overflow: hidden !important;
        transition: height 300ms cubic-bezier(.22, .61, .36, 1), max-height 300ms cubic-bezier(.22, .61, .36, 1) !important;
        box-sizing: border-box !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__image-frame,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__stage > .eddie-my-vault-viewer__image-frame,
    body.eddie-my-vault-page .eddie-my-vault-viewer__image-frame,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__image-frame,
    body.eddie-my-vault-page .eddie-my-vault-viewer__image-frame--full,
    body.eddie-my-vault-page .eddie-my-vault-viewer__image-frame--crop,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__image-frame--full,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__image-frame--crop {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 13px !important;
        overflow: hidden !important;
        background: #02060e !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.065) !important;
        box-sizing: border-box !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame img,
    body.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame--full img,
    body.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame--crop img,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame img,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame--full img,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__stage .eddie-my-vault-viewer__image-frame--crop img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        pointer-events: none !important;
        transform-origin: center center !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__crop-layer,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__crop-layer {
        z-index: 50 !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        touch-action: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__crop-box,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__crop-box {
        z-index: 51 !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border: 2px solid rgba(255, 255, 255, 0.96) !important;
        box-shadow:
            0 0 0 9999px rgba(2, 6, 14, 0.57),
            0 0 0 1px rgba(77, 163, 255, 0.78),
            0 18px 42px rgba(0, 0, 0, 0.38) !important;
        cursor: grab !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__crop-box::before,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__crop-box::before {
        transition: opacity 700ms ease 3.5s !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer.is-crop-guides-idle .eddie-my-vault-viewer__crop-box::before,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer.is-crop-guides-idle .eddie-my-vault-viewer__crop-box::before {
        opacity: 0 !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__crop-box i,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__crop-box i {
        width: 30px !important;
        height: 30px !important;
        pointer-events: auto !important;
        touch-action: none !important;
        transition: opacity 500ms ease .2s !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer.is-nav-idle .eddie-my-vault-viewer__crop-box i,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer.is-nav-idle .eddie-my-vault-viewer__crop-box i {
        opacity: .01 !important;
        pointer-events: auto !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__crop-applied,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__crop-applied,
    body.eddie-my-vault-page .eddie-my-vault-viewer__image-label,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__image-label {
        display: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__zoom,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__zoom {
        position: absolute !important;
        z-index: 80 !important;
        top: max(10px, env(safe-area-inset-top, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px !important;
        border: 1px solid rgba(145, 203, 255, 0.15) !important;
        border-radius: 999px !important;
        background: rgba(3, 7, 14, 0.74) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__zoom[hidden],
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__zoom[hidden] {
        display: none !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__zoom button,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__zoom button {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 34px !important;
        height: 30px !important;
        padding: 0 9px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f7fbff !important;
        font-size: 12px !important;
        font-weight: 950 !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__nav,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__nav {
        z-index: 76 !important;
        width: 38px !important;
        height: 46px !important;
        border-radius: 999px !important;
        background: rgba(3, 7, 14, 0.62) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__counter,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__counter {
        z-index: 76 !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        max-width: calc(100% - 160px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Drawers slide beneath the top rail so the rail remains stable. */
    body.eddie-my-vault-page .eddie-vault-shell__mobile-overlay,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-overlay {
        position: fixed !important;
        z-index: 230 !important;
        top: var(--eddie-vault-mobile-nav-h, 94px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background: rgba(0, 0, 0, 0.58) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        transition: opacity 220ms ease, visibility 220ms ease !important;
    }

    body.eddie-my-vault-page .eddie-my-vault--shell.is-mobile-drawer-open .eddie-vault-shell__mobile-overlay,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell.is-mobile-drawer-open .eddie-vault-shell__mobile-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__library,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__library,
    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side {
        position: fixed !important;
        z-index: 240 !important;
        top: var(--eddie-vault-mobile-nav-h, 94px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: min(91vw, 390px) !important;
        max-width: min(91vw, 390px) !important;
        height: calc(100svh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        height: calc(100dvh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        max-height: calc(100svh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        max-height: calc(100dvh - var(--eddie-vault-mobile-nav-h, 94px)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid rgba(145, 203, 255, 0.14) !important;
        border-radius: 0 20px 0 0 !important;
        background: rgba(7, 13, 22, 0.992) !important;
        box-shadow: 30px 0 82px rgba(0, 0, 0, 0.52) !important;
        transform: translate3d(-106%, 0, 0) !important;
        transition: transform 270ms cubic-bezier(.22, 1, .36, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        will-change: transform !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    body.eddie-my-vault-page .eddie-my-vault--shell.is-library-open .eddie-vault-shell__library,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell.is-library-open .eddie-vault-shell__library,
    body.eddie-my-vault-page .eddie-my-vault--shell.is-details-open .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault--shell.is-details-open .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side {
        transform: translate3d(0, 0, 0) !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side {
        z-index: 242 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px max(22px, env(safe-area-inset-bottom, 0px)) !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__side-close,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__side-close,
    body.eddie-my-vault-page .eddie-vault-shell__library-close,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__library-close {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 auto !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border: 1px solid rgba(145, 203, 255, 0.16) !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.055) !important;
        color: #f7fbff !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-viewer__side-close,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-viewer__side-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 8 !important;
        margin: 0 0 6px auto !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__library-head,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__library-head {
        flex: 0 0 auto !important;
        padding-top: 14px !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__controls,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__controls,
    body.eddie-my-vault-page .eddie-vault-shell__tabs,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__tabs,
    body.eddie-my-vault-page .eddie-vault-shell__typebar,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__typebar,
    body.eddie-my-vault-page .eddie-vault-shell__stats,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__stats {
        flex: 0 0 auto !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__list,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__item,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__item {
        touch-action: manipulation !important;
    }

    /* Crop picker modal launched from the mobile crop tool. */
    body.eddie-my-vault-page .eddie-my-vault-crop-picker,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-crop-picker {
        position: fixed !important;
        z-index: 420 !important;
        top: var(--eddie-vault-mobile-nav-h, 94px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: grid !important;
        align-items: start !important;
        justify-items: center !important;
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background: rgba(0, 0, 0, 0.52) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        transition: opacity 220ms ease, visibility 220ms ease !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-crop-picker.is-open,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-crop-picker.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-crop-picker__panel,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-crop-picker__panel {
        width: min(100%, 430px) !important;
        max-height: calc(100svh - var(--eddie-vault-mobile-nav-h, 94px) - 28px) !important;
        max-height: calc(100dvh - var(--eddie-vault-mobile-nav-h, 94px) - 28px) !important;
        overflow-y: auto !important;
        border-radius: 20px !important;
    }

    body.eddie-my-vault-page .eddie-my-vault-menu,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault-menu {
        z-index: 500 !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-my-vault__nav,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__nav {
        background: rgba(255, 255, 255, 0.97) !important;
        border-bottom-color: rgba(15, 23, 42, 0.10) !important;
        color: #0f172a !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-my-vault__brand-title,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__brand-title,
    body.eddie-light.eddie-my-vault-page .eddie-my-vault__menu-btn,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__menu-btn,
    body.eddie-light.eddie-my-vault-page .eddie-my-vault__workspace-btn,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__workspace-btn {
        color: #0f172a !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-my-vault__nav-link,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__nav-link,
    body.eddie-light.eddie-my-vault-page .eddie-my-vault__member-badge,
    html.eddie-light body.eddie-my-vault-page .eddie-my-vault__member-badge {
        color: #475569 !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-vault-shell,
    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline {
        background: #eef2f7 !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__library,
    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__library,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__stage.eddie-my-vault-viewer--inline .eddie-my-vault-viewer__side {
        background: rgba(255, 255, 255, 0.992) !important;
        border-right-color: rgba(15, 23, 42, 0.10) !important;
        color: #111827 !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar {
        background: rgba(255, 255, 255, 0.97) !important;
        border-bottom-color: rgba(15, 23, 42, 0.10) !important;
        color: #0f172a !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy strong,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-copy strong,
    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-close,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-close {
        color: #0f172a !important;
    }

    body.eddie-light.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button,
    html.eddie-light body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios button {
        background: rgba(15, 23, 42, 0.045) !important;
        border-color: rgba(15, 23, 42, 0.10) !important;
        color: #334155 !important;
    }
}

@media (max-width: 390px) {
    body.eddie-my-vault-page .eddie-my-vault__nav-actions,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-actions {
        gap: 6px !important;
        max-width: 50vw !important;
    }

    body.eddie-my-vault-page .eddie-my-vault__nav-link,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__nav-link,
    body.eddie-my-vault-page .eddie-my-vault__member-badge,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-my-vault__member-badge {
        max-width: 84px !important;
        font-size: 10.5px !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        grid-template-areas:
            "close copy"
            "download download"
            "ratios ratios" !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar.is-open,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar.is-open {
        max-height: 222px !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-download,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-download {
        width: 100% !important;
        justify-self: stretch !important;
    }

    body.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios,
    body.eddie-standalone-page.eddie-my-vault-page .eddie-vault-shell__mobile-cropbar-ratios {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}