/* 图片保护样式 */
img[data-protect] {
    /* 禁用用户选择 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* 禁用拖拽 */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    
    /* 禁用鼠标事件（由JS控制） */
    pointer-events: none;
    
    /* 添加加载动画 */
    background: #f5f5f5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"><path fill="%23cccccc" d="M30 15 L50 15 L70 35 L85 35 L85 85 L15 85 L15 35 L30 35 Z" stroke="%23aaaaaa" stroke-width="2" fill-opacity="0.3"/></svg>') center no-repeat;
    background-size: 50px 50px;
}

/* 图片容器样式 */
.image-protected {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0; /* 移除图片底部的空白 */
}

/* 图片加载完成后的样式 */
img[data-protected] {
    background: none;
    transition: opacity 0.3s ease;
}

/* 暗黑模式适配 */
[data-theme="dark"] img[data-protect] {
    background-color: #2c2c2c;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"><path fill="%23444444" d="M30 15 L50 15 L70 35 L85 35 L85 85 L15 85 L15 35 L30 35 Z" stroke="%23666666" stroke-width="2" fill-opacity="0.3"/></svg>');
}

/* 禁用文本选择 */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 图片加载动画 */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.loading-shimmer {
    background: linear-gradient(to right, #f5f5f5 0%, #e0e0e0 20%, #f5f5f5 40%, #f5f5f5 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

[data-theme="dark"] .loading-shimmer {
    background: linear-gradient(to right, #2c2c2c 0%, #3c3c3c 20%, #2c2c2c 40%, #2c2c2c 100%);
}