:root{
    --tagz-accent: #4da3ff;

    --tagz-text: #333;
    --tagz-bg: #fdfeff;
    --tagz-border: #eaeaea;
    --tagz-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

}

#tagz-backendPanel {
    --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;
    
    /* 优化1：外层遮罩改为渐隐渐现，而不是滑动 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;

    &.open {
        opacity: 1;
        visibility: visible;
    }

    /* --- PC端默认样式：面板主体 (从左滑入) --- */
    .backend-panel {
        position: absolute; /* 改为 absolute 相对于遮罩层定位 */
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--panel-width);
        background: #fff;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
        overflow: hidden;

        /* 滑动动画 */
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    &.open .backend-panel {
        transform: translateX(0);
    }

    /* --- Iframe 和 Loading 保持你的原样 --- */
    .iframe-slot {
        width: 100%;
        height: 100%;
        position: relative;
        background: #fff;
        z-index: 1;
    }

    .backend-panel-frame {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .panel-loading-overlay {
        position: absolute;
        inset: 0;
        background: #ffffff;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: #666;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .loading-text .dots {
        display: inline-block;
        width: 24px;
        text-align: left;
    }

    .loading-text .dots::after {
        content: '.';
        animation: dot-flush 1.5s infinite steps(4, end);
    }

    /* PC 端关闭按钮 */
    .backend-panel-close {
        position: absolute;
        top: 12px;
        left: calc(var(--panel-width) + 6px); /* PC端放在右侧外边 */
        z-index: 20;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        background: #f3f3f3;
        color: #333;
        transition: background 0.2s;

        &:hover {
            background: #e0e0e0;
        }
    }

    /* ==========================================
       优化2 & 3：移动端适配 (屏幕宽度 <= 768px)
       改为底部滑入 (Bottom Sheet)，符合手机操作习惯
       ========================================== */
    @media (max-width: 768px) {
        .backend-panel {
            /* 改变定位和尺寸 */
            top: auto;
            bottom: 0;
            width: 100%;
            height: 85vh; /* 留出顶部 15vh 点击遮罩关闭 */
            border-radius: 16px 16px 0 0; /* 增加顶部圆角，更有 App 的感觉 */
            
            /* 改变滑入方向为从下往上 */
            transform: translateY(100%);
        }

        &.open .backend-panel {
            transform: translateY(0);
        }

        /* 重置关闭按钮位置，防止移出屏幕 */
        .backend-panel-close {
            left: auto;
            right: 16px; /* 靠右对齐 */
            top: -48px;  /* 悬浮在面板正上方 */
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        .backend-panel-close {
            left: auto;
            right: 16px;       /* 靠右侧 */
            top: auto;         /* 清除 PC 端的 top 属性 */
            
            /* 关键修复：面板高 85vh，所以按钮放在距离屏幕底部 85vh 再加 12px 的位置 */
            bottom: calc(85vh + 12px); 
            
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
    }
}

@keyframes dot-flush {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}


/* 遮罩层基础样式 */
.tagz-overlay-confirm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; /* 利用 flex 实现基类 container 的居中 */
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99999; /* 配合你之前的工具栏层级 */


    /* 内部容器样式 */
    & .tagz-confirm-container {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        min-width: 300px;
        text-align: center;
        /* 可以加点进入动画 */
        transform: scale(0.9);
        transition: transform 0.2s ease;
    }


    &.open{
        opacity: 1;
        visibility: visible;

        & .tagz-confirm-container {
            transform: scale(1);
        }

    }

    & .btns{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        margin-top:1.6rem;

        & button{
            width: 80px;
            padding: 8px 20px;
            border-radius: 8px;
            border:1px solid var(--tagz-border);
            background-color: var(--tagz-bg);
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--pager-text);

            &:hover{
                background-color: color-mix(in srgb, var(--tagz-bg), black 5%);
            }
        }

    }



}

.masonry {
    --masonry-item-width: 260px;
    --base-row-height: 20px;  
    
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--masonry-item-width), 1fr));
    grid-auto-rows: var(--base-row-height);  /* 使用变量 */
    gap: 16px;

    &>* {
        grid-row-end: span var(--row-span);
        &>* {
            padding: 12px;
            border-radius: 6px;
        }
    }

    @media (max-width: 768px) {
        .masonry {
            --masonry-item-width: 250px;
            grid-gap: 15px;
        }
    }

    @media (max-width: 480px) {
        .masonry {
            --masonry-item-width: 100%;
            grid-template-columns: 1fr;
        }
    }


}

/*--分页容器--*/
[data-tagz-pagination] {
    --pager-text : var(--text, #333);
    --pager-bg: hsl(from var(--pager-text) h s l / 0.03);
    --pager-bg-hover: #fff;

    --pager-border: hsl(from var(--pager-text) h s l / 0.4);
         

    @media (prefers-color-scheme: dark){
        --pager-bg-hover: black;
    }


    text-align: center;
    margin: 3rem auto 2rem auto;

    & .tagz-pager {

        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        display: none;

        &.show {
            display: flex;
        }

        &.hide {
            display: none;
        }

        & a {
            text-decoration: none;
            display: inline-block;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            cursor: default;
            user-select: none;
        }

        & a:not([href]) {
            color: hsl(from var(--pager-text) h s l / 70%);
            background-color: hsl(from var(--pager-bg) h s l / 10%);
            border: 1px solid hsl(from var(--pager-border) h s l / 70%);

        }

        & a[href] {
            color: var(--pager-text);
            background-color: var(--pager-bg);
            border: 1px solid var(--pager-border);
            cursor: pointer;

        }
        & a[href]:hover {
            background-color: var(--pager-bg-hover);
        }
    }

    & .load-more {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        & button[data-load-more] {
        
            width: 160px;
            padding: 8px 20px;
            border-radius: 999px;
            border:1px solid var(--pager-border);
            background-color: var(--pager-bg);
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--pager-text);
            display: none;
        }

        & button[data-load-more]:hover {
            background-color: var(--pager-bg-hover);
        }

        & button[data-load-more].show {
            display: inline-block;
        }

        & button[data-load-more].hide {
            display: none;
        }

    }


}


/*---三点加载动画---*/
[data-loading-dot]::after {
    content: '...';
    animation: loading-dots 1.5s steps(4, end) infinite;
}
@keyframes loading-dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

.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);
    }
}