body {
    background-color: #f8f9fa; /* 浅灰色背景 */
}

main {
    border-radius: 0.375rem;
    background-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.navbar {
    background-color: #ffffff; /* 白色导航栏背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05); /* 轻微阴影 */
}

.tool-card {
    background-color: #ffffff; /* 白色卡片背景 */
    transition: all 0.3s ease;
    border: 1px solid #e9ecef; /* 轻微边框 */
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1); /* 悬停阴影 */
    border-color: #adb5bd; /* 悬停边框颜色 */
}

.tool-card .card-body {
    text-align: center;
}

.tool-card .card-title {
    font-size: 1rem;
    margin-top: 10px;
    color: #495057; /* 灰色文字 */
}

.tool-icon {
    font-size: 2.5rem;
    color: #6c757d; /* 灰色图标 */
}

#div-zio {
    img {
        user-select: none; /* 禁止选中 */
        -webkit-user-drag: none; /* 禁止拖拽 */
    }

    /* 拖拽激活时的样式 */

    .dragover {
        border-color: #4caf50; /* 高亮边框颜色 */
        background-color: #f0f8ff; /* 可选：背景色变化 */
    }

    /* 操作区域 */

    .action {
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

    .zio-file, .zio-image, .zio-video, .zio-audio {
        .main {
            width: 100%;
            height: 300px;
            border: 2px dashed #ccc;
            border-radius: 10px;
            overflow: hidden;
            padding: 0.25rem;

            .placeholder-area {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .upload-area {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .view-area {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                video {
                    max-width: 100%;
                    max-height: 100%;
                }

                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
    }

    /* 画廊 */
    .zio-gallery {
        img {
            width: 100%;
            height: 100%;
            overflow: hidden;
            object-fit: cover;
            border: 2px solid transparent;
        }

        img:hover {
            border-color: #0d6efd;
        }
    }
}