/* ============================================================
   二维码生成器 —— 页面私有样式（/devtools/qr-code）
   通用结构复用 devtools.css，颜色只用 --c-* 变量，自动适配黑夜模式
   ============================================================ */

[hidden] { display: none; }

/* 表单栅格：桌面 3 列，窄屏 1 列 */
.qc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* 文本 / WIFI / 名片区块统一上间距 */
.qc-field {
    margin-top: 14px;
}

/* 颜色选择器压低高度，视觉更整齐 */
.qc-color {
    height: 40px;
    padding: 3px;
}

/* 生成结果预览区 */
.qc-preview {
    margin-top: 16px;
    padding: 20px 0;
    text-align: center;
}

.qc-preview img {
    display: inline-block;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

/* 结果操作按钮组 */
.qc-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* 生成中 / 空态提示 */
.qc-loading {
    padding: 30px 0;
    color: var(--c-text-muted);
    font-size: 13.5px;
}

@media (max-width: 720px) {
    .qc-grid {
        grid-template-columns: 1fr;
    }
}