/* public/assets/css/developer/qrcode-generator.css */
.qr-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #10b981; --p-primary-hover: #059669; --p-success: #3b82f6; --p-text: #0f172a; --p-text-muted: #64748b; width: 100%; max-width: 1200px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
.qr-wrapper *, .qr-wrapper *::before, .qr-wrapper *::after { box-sizing: border-box; }

.qr-header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid var(--p-border); padding-bottom: 24px; }
.qr-title { font-size: 1.7rem; font-weight: 800; color: var(--p-text); margin: 0 0 10px 0; }
.qr-subtitle { font-size: 0.95rem; color: var(--p-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* 布局 */
.qr-layout { display: flex; flex-direction: row; gap: 24px; align-items: stretch; }
@media (max-width: 850px) { .qr-layout { flex-direction: column; } }

.qr-controls-panel { flex: 1.5; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--p-border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.qr-preview-panel { flex: 1; display: flex; flex-direction: column; background: #f8fafc; border: 1px solid var(--p-border); border-radius: 16px; overflow: hidden; min-width: 320px; }

.qr-panel-title { font-size: 1.05rem; font-weight: 800; color: var(--p-text); padding: 16px 20px; background: #f1f5f9; border-bottom: 1px solid var(--p-border); margin: 0; }
.qr-panel-subtitle { font-size: 1rem; font-weight: 800; color: var(--p-text); margin-bottom: 16px; }
.qr-controls-body { padding: 24px 20px; display: flex; flex-direction: column; flex: 1; }
.qr-preview-body { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex: 1; }

/* Tabs */
.qr-tabs { display: flex; background: #f8fafc; border-bottom: 1px solid var(--p-border); }
.qr-tab-btn { flex: 1; padding: 16px 10px; border: none; background: transparent; font-weight: 700; font-size: 1rem; color: #64748b; cursor: pointer; transition: 0.3s; border-bottom: 3px solid transparent; }
.qr-tab-btn:hover { background: #f1f5f9; color: var(--p-text); }
.qr-tab-btn.active { color: var(--p-primary); border-bottom-color: var(--p-primary); background: #ffffff; }
.qr-tab-content { display: none; animation: fadeIn 0.3s; }
.qr-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* 表单与组件 */
.qr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .qr-form-grid { grid-template-columns: 1fr; } }
.qr-form-group { display: flex; flex-direction: column; gap: 8px; }
.qr-label { font-size: 0.95rem; font-weight: 700; color: #334155; }

.qr-input, .qr-select { width: 100%; padding: 12px 14px; border: 2px solid #cbd5e1; border-radius: 10px; font-size: 1rem; font-weight: 600; color: #1e293b; outline: none; transition: 0.2s; background: #ffffff; }
.qr-input:focus, .qr-select:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.qr-textarea { width: 100%; height: 180px; padding: 16px; border: 2px solid #cbd5e1; border-radius: 10px; font-size: 1.05rem; font-weight: 600; color: #1e293b; outline: none; transition: 0.2s; background: #ffffff; resize: none; font-family: monospace; }
.qr-textarea:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }

.qr-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: #334155; cursor: pointer; }
.qr-checkbox { width: 18px; height: 18px; accent-color: var(--p-primary); cursor: pointer; }

.qr-divider { width: 100%; height: 1px; background: var(--p-border); border: none; margin: 30px 0; }

.qr-color-picker-wrap { display: flex; align-items: center; background: #f1f5f9; padding: 6px; border-radius: 10px; border: 1px solid #cbd5e1; height: 46px; }
.qr-color-picker-wrap input[type="color"] { width: 100%; height: 100%; padding: 0; border: none; border-radius: 6px; cursor: pointer; background: transparent; }
.qr-color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.qr-color-picker-wrap input[type="color"]::-webkit-color-swatch { border: 1px solid #94a3b8; border-radius: 6px; }

.qr-file-input { display: block; width: 100%; font-size: 0.9rem; color: #475569; padding: 8px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; cursor: pointer; }
.qr-file-input::file-selector-button { background: #e2e8f0; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 700; color: #334155; cursor: pointer; margin-right: 12px; transition: 0.2s; }
.qr-file-input::file-selector-button:hover { background: #cbd5e1; }

/* 预览图区 */
.qr-canvas-container { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 350px; background: #ffffff; border-radius: 16px; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 30px; }
.qr-final-image { display: none; width: 100%; height: 100%; object-fit: contain; }
.qr-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #94a3b8; font-weight: 700; text-align: center; }
.qr-empty-icon { font-size: 3rem; opacity: 0.5; }

.qr-action-group { width: 100%; }
.qr-btn-success { width: 100%; padding: 16px; border-radius: 12px; font-weight: 800; font-size: 1.1rem; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--p-success); color: #ffffff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.qr-btn-success:hover:not(:disabled) { background: #2563eb; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4); }
.qr-btn-success:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.qr-credit { text-align: center; margin-top: 20px; font-size: 0.85rem; color: #94a3b8; letter-spacing: 0.5px; }

/* 黑夜模式 */
[data-theme="dark"] .qr-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .qr-title, [data-theme="dark"] .qr-panel-title, [data-theme="dark"] .qr-panel-subtitle, [data-theme="dark"] .qr-label { color: #f8fafc; }
[data-theme="dark"] .qr-subtitle { color: #94a3b8; }
[data-theme="dark"] .qr-controls-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .qr-preview-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .qr-panel-title, [data-theme="dark"] .qr-tabs { background: #1e293b; border-color: #475569; }
[data-theme="dark"] .qr-tab-btn { color: #cbd5e1; }
[data-theme="dark"] .qr-tab-btn:hover { background: #0f172a; color: #f8fafc; }
[data-theme="dark"] .qr-tab-btn.active { background: #0f172a; color: var(--p-primary); border-bottom-color: var(--p-primary); }
[data-theme="dark"] .qr-input, [data-theme="dark"] .qr-textarea, [data-theme="dark"] .qr-select { background: #020617; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .qr-color-picker-wrap { background: #020617; border-color: #475569; }
[data-theme="dark"] .qr-file-input { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .qr-file-input::file-selector-button { background: #334155; color: #f8fafc; }
[data-theme="dark"] .qr-checkbox-label { color: #cbd5e1; }
[data-theme="dark"] .qr-canvas-container { background: #020617; border-color: #475569; }