/* QR Code Generator — Theme: Electric Magenta (#EC4899) */
:root { --accent: #EC4899; --accent-dim: rgba(236,72,153,0.15); --accent-glow: rgba(236,72,153,0.3); }
.accent-text { color: var(--accent); }

.qr-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.qr-tab {
  padding: var(--space-2) var(--space-4); background: var(--bg-tertiary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); cursor: pointer; transition: all var(--duration-fast);
}
.qr-tab:hover { border-color: var(--accent); color: var(--accent); }
.qr-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.qr-input-area { margin-bottom: var(--space-5); }
.qr-input-group { display: none; }
.qr-input-group.active { display: block; }

.qr-colors { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; align-items: flex-end; }
.qr-colors .form-group { flex: 1; min-width: 120px; }
.color-pick { display: flex; align-items: center; gap: var(--space-2); }
.color-pick input[type="color"] {
  width: 36px; height: 36px; border: 2px solid var(--border-medium); border-radius: var(--radius-sm);
  cursor: pointer; background: none; padding: 0;
}
.color-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-pick input[type="color"]::-webkit-color-swatch { border-radius: 3px; border: none; }
.color-pick span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }

.qr-preview { text-align: center; margin-top: var(--space-5); }
.qr-canvas-wrap { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.qr-canvas-wrap img, .qr-canvas-wrap canvas { border-radius: var(--radius-md); max-width: 100%; }
.qr-download-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.tips-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.tips-list li::before { content: '→ '; color: var(--accent); }

@media (max-width: 768px) { .qr-tabs { flex-direction: column; } .qr-colors { flex-direction: column; } }