.backend-panel-container {
    --panel-width: min(85vw, 960px);

    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.15s ease;

    .backend-panel {
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--panel-width);       
        position: fixed; 
        background: #fff; 
        transform: translateX(-100%);
        transition: transform 0.35s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.2);
    }

    &.open{
        transform: translateX(0);
    }
    &.open .backend-panel{
        transform: translateX(0);
    }
    /* iframe */
    .backend-panel-frame {
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* 关闭按钮 */
    .backend-panel-close {
        position: absolute;
        top: 12px;
        left: calc(var(--panel-width) + 6px);
        z-index: 2;

        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;

        font-size: 22px;
        line-height: 1;
        cursor: pointer;

        background: #f3f3f3;

        &:hover {
            background: #e0e0e0;
        }
    }

    /* 遮罩 */
    /* .backend-panel-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 9998;
    } */

}

.img-popup {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.9);
        z-index: 5555;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
  
    &.open {
        opacity: 1;
        visibility: visible;
        transition:
            opacity 0.3s ease,
            visibility 0s;
    }
    img {
        max-width: 90%;
        max-height: 90vh;
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }
    &.open img {
        transform: scale(1);
    }
}



