/* 极速二维码容器样式 - 透明背景，正方形，现代设计 */
.qr-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important; /* 透明背景 */
    border-radius: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* 确保正方形显示 */
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
    /* 覆盖所有可能的尺寸设置 */
    max-width: none !important;
    max-height: none !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}

.qr-container canvas,
.qr-container svg {
    /* 填满容器，边距由生成器内部处理 */
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    border-radius: 4px;
    margin: 0 !important;
    /* 确保居中 */
    display: block !important;
    /* 高清显示优化 */
    image-rendering: pixelated; /* 保持二维码清晰 */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
    /* 确保内容完全填充但保持比例 */
    object-fit: contain !important;
    object-position: center !important;
}

/* QQ群容器样式 - 覆盖contact.css中的设置 */
.group-qr {
    width: 150px !important;
    height: 150px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* QQ群二维码样式 - 最高优先级 */
.group-qr .qr-container,
div.group-qr div.qr-container,
.group-qr > .qr-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.group-qr .qr-container:hover {
    border-color: rgba(0, 123, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.08);
    transform: translateY(-1px);
}

/* 社交媒体二维码容器样式 - 覆盖contact.css */
.social-compact-qr {
    width: 100px !important;
    height: 100px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* 社交媒体二维码样式 - 最高优先级 */
.social-qr,
div.social-qr,
.qr-container.social-qr,
.social-compact-qr .qr-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 6px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.social-compact-item:hover .social-qr {
    border-color: rgba(0, 123, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.06);
    transform: scale(1.02);
}

/* 支付二维码外层容器样式 - 覆盖contact.css */
.support-qr {
    width: 120px !important;
    height: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    overflow: visible !important;
}

/* 支付二维码内层样式 - 最高优先级 */
.support-qr-inner,
div.support-qr-inner,
.qr-container.support-qr-inner,
.support-qr .qr-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 8px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.support-item:hover .support-qr-inner {
    border-color: rgba(40, 167, 69, 0.3);
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.08);
    transform: translateY(-1px) scale(1.01);
}

/* 极速加载动画 - 更简洁 */
.qr-container.qr-loading {
    background: transparent;
    position: relative;
}

.qr-container.qr-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top: 2px solid rgba(0, 123, 255, 0.6);
    border-radius: 50%;
    animation: qr-spin 0.6s linear infinite;
}

@keyframes qr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 生成成功样式 */
.qr-container.qr-loaded {
    background: transparent;
    border-color: rgba(40, 167, 69, 0.15);
}

.qr-container.qr-loaded canvas,
.qr-container.qr-loaded svg {
    animation: qr-fadein 0.3s ease-out;
}

@keyframes qr-fadein {
    from { 
        opacity: 0; 
        transform: scale(0.9);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

/* 失败备用样式 */
.qr-fallback-fast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(0,0,0,0.4);
    text-align: center;
    padding: 8px;
}

.qr-fallback-fast svg {
    width: 28px;
    height: 28px;
    color: rgba(0,0,0,0.25);
    margin-bottom: 4px;
}

.qr-fallback-fast p {
    font-size: 10px;
    color: rgba(0,0,0,0.35);
    margin: 0;
    font-weight: 500;
}

/* 传统备用样式保持兼容 */
.qr-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(0,0,0,0.4);
    text-align: center;
}

.qr-fallback i {
    font-size: 28px;
    color: rgba(0,0,0,0.25);
    margin-bottom: 4px;
}

.qr-fallback p {
    font-size: 10px;
    color: rgba(0,0,0,0.35);
    margin: 0;
}

/* 高分辨率设备优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .qr-container svg {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 响应式调整 - 确保移动端也保持足够大小 */
@media (max-width: 768px) {
    /* 移动端QQ群容器 */
    .group-qr {
        width: 130px !important;
        height: 130px !important;
    }
    
    /* 移动端社交媒体容器 */
    .social-compact-qr {
        width: 90px !important;
        height: 90px !important;
    }
    
    /* 移动端支付容器 */
    .support-qr {
        width: 110px !important;
        height: 110px !important;
    }
    
    /* 容器内的二维码保持100%填充 */
    .group-qr .qr-container,
    .social-compact-qr .qr-container,
    .support-qr .qr-container {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
    .qr-container {
        border-color: rgba(255,255,255,0.1);
    }
    
    .group-qr .qr-container {
        border-color: rgba(255,255,255,0.12);
    }
    
    .group-qr .qr-container:hover {
        border-color: rgba(0, 123, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    }
    
    .social-qr {
        border-color: rgba(255,255,255,0.08);
    }
    
    .social-compact-item:hover .social-qr {
        border-color: rgba(0, 123, 255, 0.35);
    }
    
    .support-qr-inner {
        border-color: rgba(255,255,255,0.1);
    }
    
    .support-item:hover .support-qr-inner {
        border-color: rgba(40, 167, 69, 0.4);
    }
    
    .qr-fallback-fast,
    .qr-fallback {
        color: rgba(255,255,255,0.5);
    }
    
    .qr-fallback-fast svg,
    .qr-fallback i {
        color: rgba(255,255,255,0.3);
    }
    
    .qr-fallback-fast p,
    .qr-fallback p {
        color: rgba(255,255,255,0.4);
    }
}

/* 高性能模式 - 减少重绘和回流 */
.qr-container {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout style paint; /* CSS containment API */
}

.qr-container canvas,
.qr-container svg {
    will-change: auto;
    contain: layout style paint;
    display: block; /* 避免内联元素的基线对齐问题 */
}

/* 优化加载动画性能 */
.qr-container.qr-loading::before {
    will-change: transform;
    contain: layout style paint;
}

/* 减少重绘的悬停效果 */
.qr-container:hover {
    transform: translateZ(0) scale(1.02);
}

/* 使用 GPU 加速的动画 */
@keyframes qr-spin {
    0% { transform: rotate(0deg) translateZ(0); }
    100% { transform: rotate(360deg) translateZ(0); }
}

@keyframes qr-fadein {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateZ(0);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateZ(0);
    }
}

/* 虚拟化支持 - 隐藏不在视口的二维码 */
.qr-container[data-virtualized="true"] {
    visibility: hidden;
    contain: strict;
}

.qr-container[data-virtualized="false"] {
    visibility: visible;
}

/* 防止布局被其他元素影响 */
.qr-container {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
}

/* 确保SVG保持原始比例 */
.qr-container svg {
    preserveAspectRatio: xMidYMid meet !important;
}

/* 额外的正方形保护 */
.group-qr .qr-container,
.social-qr,
.support-qr .qr-container {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: visible !important;
}

/* 支付二维码的悬停效果修复 */
.support-item:hover .support-qr {
    transform: scale(1.05) !important;
}

.support-item:hover .support-qr .qr-container {
    border-color: rgba(40, 167, 69, 0.3) !important;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.08) !important;
}