.qr-type-tabs{display:flex;gap:8px;flex-wrap:wrap}.qr-tab{flex:1;min-width:70px;padding:12px 8px;background:#fff;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;color:#6b7280;transition:all 0.2s ease;display:flex;flex-direction:column;align-items:center;gap:4px}.qr-tab i{font-size:18px}.qr-tab:hover{border-color:#a5b4fc;background:#f5f3ff}.qr-tab.active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.qr-form input,.qr-form textarea,.qr-form select{width:100%}.qr-form textarea{resize:vertical}.color-picker-wrapper{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:2px solid #e5e7eb;border-radius:8px}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:36px;border:none;border-radius:6px;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid #d1d5db;border-radius:6px}.color-picker::-moz-color-swatch{border:2px solid #d1d5db;border-radius:6px}.color-picker-wrapper span{font-family:'Consolas','Monaco',monospace;font-size:13px;color:#6b7280;text-transform:uppercase}#size-slider{-webkit-appearance:none;appearance:none;height:8px;background:#e5e7eb;border-radius:4px;outline:none;margin-top:8px}#size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#6366f1;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px rgb(99 102 241 / .3)}#size-slider::-moz-range-thumb{width:20px;height:20px;background:#6366f1;border:none;border-radius:50%;cursor:pointer}.qr-preview{display:inline-block;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgb(0 0 0 / .1)}.qr-preview canvas,.qr-preview svg{display:block}#download-png,#download-svg{font-size:14px}@media (max-width:640px){.qr-type-tabs{gap:6px}.qr-tab{padding:10px 6px;font-size:11px;min-width:60px}.qr-tab i{font-size:16px}#vcard-form .grid{grid-template-columns:1fr}.color-picker-wrapper{padding:6px 10px}.color-picker{width:30px;height:30px}#qr-output .flex{flex-direction:column;gap:8px}}#generate-btn.generating{pointer-events:none}#generate-btn.generating::after{content:'';display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid rgb(255 255 255 / .3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}