.proof-media-modal[hidden] {
    display: none !important;
}

.proof-media-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 18px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.proof-media-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 50% 10%, rgba(69, 126, 255, .16), transparent 34%),
        rgba(1, 5, 12, .93) !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

.proof-media-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: min(1180px, calc(100vw - 36px)) !important;
    height: min(900px, calc(100dvh - 36px)) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.proof-media-dialog::before,
.proof-media-dialog::after {
    display: none !important;
}

.proof-media-toolbar {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
    direction: ltr !important;
}

.proof-media-toolbar::after {
    content: '' !important;
    grid-column: 3 !important;
    width: 48px !important;
    height: 48px !important;
    pointer-events: none !important;
}

.proof-media-close,
.proof-media-zoom-controls {
    pointer-events: auto !important;
}

.proof-media-close {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 126, 143, .42) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(238, 55, 79, .98), rgba(189, 29, 55, .98)) !important;
    box-shadow: 0 10px 28px rgba(211, 37, 66, .34), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}

.proof-media-close:hover,
.proof-media-close:focus-visible {
    transform: translateY(-1px) scale(1.025) !important;
    filter: brightness(1.08) saturate(1.05) !important;
    box-shadow: 0 14px 34px rgba(211, 37, 66, .43), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    outline: none !important;
}

.proof-media-zoom-controls {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: auto !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    display: inline-grid !important;
    grid-template-columns: 42px 70px 42px !important;
    align-items: center !important;
    gap: 3px !important;
    border: 1px solid rgba(180, 207, 255, .16) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(15, 27, 46, .92), rgba(7, 15, 27, .9)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-sizing: border-box !important;
    direction: ltr !important;
}

.proof-media-zoom-button,
.proof-media-zoom-level {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: rgba(243, 248, 255, .98) !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.proof-media-zoom-button {
    font-size: 23px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .15s ease, opacity .15s ease !important;
}

.proof-media-zoom-button:hover,
.proof-media-zoom-button:focus-visible {
    background: rgba(92, 145, 255, .17) !important;
    transform: scale(1.04) !important;
    outline: none !important;
}

.proof-media-zoom-button:disabled {
    opacity: .38 !important;
    cursor: default !important;
    transform: none !important;
}

.proof-media-zoom-level {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .15px !important;
    border-inline: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

.proof-media-stage {
    position: relative !important;
    z-index: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(8px, 1.5vw, 16px) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(164, 197, 255, .13) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(68, 120, 218, .11), transparent 48%),
        linear-gradient(180deg, rgba(7, 15, 27, .98), rgba(2, 7, 14, .995)) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    overscroll-behavior: contain !important;
}

.proof-media-stage::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 18%, transparent 82%, rgba(255, 255, 255, .01)) !important;
}

.proof-media-stage img,
.proof-media-stage video {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    margin: auto !important;
    display: block !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, .42) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    -webkit-user-drag: none !important;
}

.proof-media-stage video {
    background: #000 !important;
}

.proof-media-stage.is-zoomable {
    cursor: zoom-in !important;
}

.proof-media-stage.is-zoomed {
    cursor: grab !important;
}

.proof-media-stage.is-dragging {
    cursor: grabbing !important;
}

.proof-media-caption,
.proof-media-actions,
.proof-media-kicker,
.proof-media-action {
    display: none !important;
}

body.proof-media-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@media (max-width: 700px) {
    .proof-media-modal:not([hidden]) {
        padding:
            max(10px, env(safe-area-inset-top))
            10px
            max(10px, env(safe-area-inset-bottom)) !important;
    }

    .proof-media-dialog {
        width: 100% !important;
        height: 100% !important;
        grid-template-rows: 48px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .proof-media-toolbar {
        height: 48px !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 8px !important;
    }

    .proof-media-toolbar::after {
        width: 44px !important;
        height: 44px !important;
    }

    .proof-media-close {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        font-size: 28px !important;
    }

    .proof-media-zoom-controls {
        height: 44px !important;
        grid-template-columns: 38px 62px 38px !important;
        border-radius: 14px !important;
    }

    .proof-media-zoom-button,
    .proof-media-zoom-level {
        height: 34px !important;
        min-height: 34px !important;
    }

    .proof-media-stage {
        padding: 7px !important;
        border-radius: 21px !important;
    }

    .proof-media-stage img,
    .proof-media-stage video {
        border-radius: 12px !important;
    }
}

@media (max-width: 370px) {
    .proof-media-toolbar {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }

    .proof-media-toolbar::after,
    .proof-media-close {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .proof-media-zoom-controls {
        height: 42px !important;
        grid-template-columns: 34px 54px 34px !important;
        padding: 3px !important;
    }

    .proof-media-zoom-button,
    .proof-media-zoom-level {
        height: 34px !important;
        min-height: 34px !important;
    }
}