/**
 * 子比下载优化插件 - 二维码下载样式
 * 说明：
 * - 颜色统一使用子比主题的 CSS 变量，自动适配白天/夜间（.dark-theme）模式。
 * - 二维码区域始终保持「白底黑码」，夜间模式也不反色，确保可扫描。
 */

.zibdown-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--theme-color, #f04494);
}

/* 提示文案 */
.zibdown-tip {
    background: var(--muted-bg-2-color, #f6f7f8);
    border: 1px dashed var(--theme-color, #f04494);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    line-height: 1.7;
}

.zibdown-tip-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--theme-color, #f04494);
    margin-bottom: 6px;
}

.zibdown-tip-text {
    color: var(--main-color, #4e5358);
    font-size: 14px;
    word-break: break-word;
}

/* 二维码网格 */
.zibdown-grid {
    display: grid;
    grid-template-columns: repeat(var(--zibdown-cols, 2), minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .zibdown-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* 二维码卡片 */
.zibdown-card {
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease;
}

.zibdown-card:hover {
    box-shadow: 0 8px 24px var(--main-shadow, rgba(116, 116, 116, 0.08));
    transform: translateY(-2px);
}

.zibdown-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 15px;
}

.zibdown-card-head .zibdown-card-icon svg.icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    fill: currentColor;
}

.zibdown-card-name {
    color: var(--key-color, #333);
}

/*
 * 二维码容器：
 * 夜间模式下也必须保持白底，避免黑码白底被反转导致无法扫描。
 */
.zibdown-qrcode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    border-radius: 10px;
    min-width: 100px;
    min-height: 100px;
    line-height: 1;
}

/*
 * 注意：不要使用 display:block !important。
 * qrcodejs 会在渲染完成后隐藏 canvas、仅显示 img（data URI），
 * 若强制显示 canvas 会出现两个重复二维码。
 */
.zibdown-qrcode img,
.zibdown-qrcode canvas {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* 夜间模式下二维码图片不做任何滤镜处理，保持清晰可扫 */
.dark-theme .zibdown-qrcode img {
    filter: none;
    opacity: 1;
}

.zibdown-qrcode-loading {
    color: var(--muted-3-color, #b1b1b1);
    font-size: 13px;
    padding: 20px 6px;
    white-space: nowrap;
}

.zibdown-qr-fallback {
    word-break: break-all;
    font-size: 12px;
    color: var(--muted-2-color, #999);
}

.zibdown-card-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted-2-color, #999);
}

.zibdown-card-foot svg.icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.zibdown-actions {
    margin-top: 12px;
}

.zibdown-actions .but {
    padding: .45em .8em;
    font-size: 13px;
}

.zibdown-card-original {
    margin-top: 12px;
}

.zibdown-card-original .but-download {
    justify-content: center;
}

/* 未转换的原始按钮 */
.zibdown-original-buttons {
    flex-wrap: wrap;
}

.zibdown-original-buttons .but-download {
    margin-bottom: 10px;
}

/* 夜间模式的额外适配（变量已自动生效，这里仅增强对比） */
.dark-theme .zibdown-tip {
    background: var(--muted-bg-color, #2d2e31);
}

.dark-theme .zibdown-card {
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .zibdown-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dark-theme .zibdown-qrcode {
    border-color: rgba(255, 255, 255, 0.14);
}