/**
 * QR Code Pro - Public Styles
 * Minimalist, responsive design
 */

/* ===== Reset & Base ===== */
.qrcode-pro-generator,
.qrcode-pro-dashboard,
.qrcode-pro-auth-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #1a1a2e;
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== Steps ===== */
.qrcode-pro-step {
    display: none;
    animation: qrcodeFadeIn 0.3s ease;
}

.qrcode-pro-step-active {
    display: block;
}

@keyframes qrcodeFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.qrcode-pro-step-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #16213e;
}

/* ===== Type Grid ===== */
.qrcode-pro-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 2rem;
}

.qrcode-pro-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 100px;
}

.qrcode-pro-type-btn:hover {
    border-color: #4361ee;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
    transform: translateY(-2px);
}

.qrcode-pro-type-btn.qrcode-pro-type-selected {
    border-color: #4361ee;
    background: #f0f4ff;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
}

.qrcode-pro-type-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 1.8rem;
    line-height: 1;
}

/* Type icons using SVG icons */
.qrcode-pro-type-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* URL / Link */
.qrcode-pro-icon-url {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
/* Text */
.qrcode-pro-icon-text {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'/%3E%3Cline x1='9' y1='20' x2='15' y2='20'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
}
/* Email */
.qrcode-pro-icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
/* Phone Call */
.qrcode-pro-icon-call {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* SMS */
.qrcode-pro-icon-sms {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
/* WhatsApp */
.qrcode-pro-icon-whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325D366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}
/* WiFi */
.qrcode-pro-icon-wifi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E");
}
/* vCard */
.qrcode-pro-icon-vcard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* Event */
.qrcode-pro-icon-event {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* PDF */
.qrcode-pro-icon-pdf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
/* App Store */
.qrcode-pro-icon-app {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}
/* Image */
.qrcode-pro-icon-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}
/* Video */
.qrcode-pro-icon-video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
/* Social Media */
.qrcode-pro-icon-social {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
/* Location */
.qrcode-pro-icon-location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* MeCard */
.qrcode-pro-icon-mecard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* Crypto */
.qrcode-pro-icon-crypto {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7931a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}
/* Telegram */
.qrcode-pro-icon-telegram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}
/* Signal */
.qrcode-pro-icon-signal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A76F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20M12 2v20M2 12h20'/%3E%3C/svg%3E");
}
/* Zoom */
.qrcode-pro-icon-zoom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D8CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
/* Spotify */
.qrcode-pro-icon-spotify {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231DB954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 15c3-1 6-1 9 1M7 12c4-1.5 8-1.5 12 1M6 9c5-2 10-2 15 1'/%3E%3C/svg%3E");
}
/* GitHub */
.qrcode-pro-icon-github {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E");
}
/* Payment */
.qrcode-pro-icon-payment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}
/* Coupon */
.qrcode-pro-icon-coupon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3Cpath d='M13 5v2M13 17v2M13 11v2'/%3E%3C/svg%3E");
}
/* Feedback */
.qrcode-pro-icon-feedback {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
/* Menu */
.qrcode-pro-icon-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}
/* Calendar */
.qrcode-pro-icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Crect x='7' y='14' width='2' height='2'/%3E%3Crect x='15' y='14' width='2' height='2'/%3E%3Crect x='11' y='14' width='2' height='2'/%3E%3Crect x='7' y='18' width='2' height='2'/%3E%3Crect x='15' y='18' width='2' height='2'/%3E%3C/svg%3E");
}
/* Data Matrix */
.qrcode-pro-icon-datamatrix {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234361ee'%3E%3Crect x='3' y='3' width='4' height='4'/%3E%3Crect x='9' y='3' width='4' height='4'/%3E%3Crect x='15' y='3' width='6' height='4'/%3E%3Crect x='3' y='9' width='4' height='4'/%3E%3Crect x='9' y='9' width='4' height='4'/%3E%3Crect x='15' y='9' width='6' height='4'/%3E%3Crect x='3' y='15' width='4' height='6'/%3E%3Crect x='9' y='15' width='4' height='6'/%3E%3Crect x='15' y='15' width='6' height='6'/%3E%3C/svg%3E");
}
/* 2D Barcode */
.qrcode-pro-icon-barcode2d {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234361ee'%3E%3Crect x='3' y='3' width='2' height='18'/%3E%3Crect x='7' y='3' width='1' height='18'/%3E%3Crect x='10' y='3' width='3' height='18'/%3E%3Crect x='15' y='3' width='1' height='18'/%3E%3Crect x='18' y='3' width='3' height='18'/%3E%3C/svg%3E");
}
/* Landing Page */
.qrcode-pro-icon-landing {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 2 12 12 22 12'/%3E%3C/svg%3E");
}
/* Multi URL */
.qrcode-pro-icon-multi_url {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E");
}
/* Ticket */
.qrcode-pro-icon-ticket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3Cline x1='13' y1='5' x2='13' y2='19'/%3E%3C/svg%3E");
}
/* Loyalty */
.qrcode-pro-icon-loyalty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
}
/* Review */
.qrcode-pro-icon-review {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}
/* Attendance */
.qrcode-pro-icon-attendance {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Route */
.qrcode-pro-icon-route {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E");
}
/* File */
.qrcode-pro-icon-file {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
}
/* Audio */
.qrcode-pro-icon-audio {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
/* AR */
.qrcode-pro-icon-ar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}
/* Auth */
.qrcode-pro-icon-auth {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.qrcode-pro-type-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}

/* ===== Form Fields ===== */
.qrcode-pro-form-group {
    margin-bottom: 16px;
}

.qrcode-pro-form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
    font-size: 0.95rem;
}

.qrcode-pro-input,
.qrcode-pro-form-group input[type="text"],
.qrcode-pro-form-group input[type="email"],
.qrcode-pro-form-group input[type="url"],
.qrcode-pro-form-group input[type="tel"],
.qrcode-pro-form-group input[type="password"],
.qrcode-pro-form-group input[type="number"],
.qrcode-pro-form-group input[type="datetime-local"],
.qrcode-pro-form-group textarea,
.qrcode-pro-form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.qrcode-pro-input:focus,
.qrcode-pro-form-group input:focus,
.qrcode-pro-form-group textarea:focus,
.qrcode-pro-form-group select:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.qrcode-pro-form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.qrcode-pro-form-group small {
    color: #888;
    font-size: 0.8rem;
}

/* ===== Buttons ===== */
.qrcode-pro-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.qrcode-pro-btn-primary {
    background: #4361ee;
    color: #fff;
}

.qrcode-pro-btn-primary:hover {
    background: #3a56d4;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.qrcode-pro-btn-secondary {
    background: #e8e8e8;
    color: #333;
}

.qrcode-pro-btn-secondary:hover {
    background: #d0d0d0;
}

.qrcode-pro-btn-success {
    background: #06d6a0;
    color: #fff;
}

.qrcode-pro-btn-success:hover {
    background: #05c290;
}

.qrcode-pro-btn-danger {
    background: #ef476f;
    color: #fff;
}

.qrcode-pro-btn-danger:hover {
    background: #d63d61;
}

.qrcode-pro-btn-full {
    width: 100%;
    display: block;
}

.qrcode-pro-btn-sm {
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.qrcode-pro-back-btn {
    background: none;
    border: none;
    color: #4361ee;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 16px;
}

.qrcode-pro-back-btn:hover {
    text-decoration: underline;
}

/* ===== Design Grid ===== */
.qrcode-pro-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.qrcode-pro-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    min-height: 360px;
    border: 2px dashed #e0e0e0;
}

#qrcode-pro-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

#qrcode-pro-preview img,
#qrcode-pro-preview svg {
    max-width: 100%;
    height: auto;
}

.qrcode-pro-design-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qrcode-pro-option-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qrcode-pro-option-group .qrcode-pro-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #333;
}

.qrcode-pro-option-group input[type="color"] {
    width: 50px;
    height: 36px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}

.qrcode-pro-option-group select {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
}

#qrcode-frame-options {
    gap: 8px;
    padding: 10px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #f9fbff;
}

#qrcode-frame-options input[type="number"] {
    max-width: 120px;
}

.qrcode-pro-design-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 6px 0;
}

.qrcode-pro-design-tab-btn {
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    background: #f7f9fc;
    color: #364152;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 9px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qrcode-pro-design-tab-btn:hover {
    border-color: #4361ee;
    color: #2232a8;
}

.qrcode-pro-design-tab-btn.qrcode-pro-design-tab-active {
    background: #4361ee;
    color: #fff;
    border-color: #4361ee;
    box-shadow: 0 8px 18px rgba(67, 97, 238, 0.25);
}

.qrcode-pro-design-tab-panel {
    display: none;
    padding: 12px;
    border: 1px solid #e7edf6;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%);
}

.qrcode-pro-design-tab-panel.qrcode-pro-design-tab-active {
    display: block;
}

.qrcode-pro-style-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.qrcode-pro-style-btn {
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    background: #fff;
    color: #364152;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 6px;
    cursor: pointer;
    min-height: 38px;
    transition: all 0.2s ease;
}

.qrcode-pro-style-btn:hover {
    border-color: #4361ee;
    transform: translateY(-1px);
}

.qrcode-pro-style-btn.qrcode-pro-style-active {
    border-color: #4361ee;
    background: #eff3ff;
    color: #1e2b88;
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, 0.15);
}

/* ===== Style Button Icons ===== */
.qrcode-pro-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 6px;
    min-height: 52px;
}

.qrcode-pro-style-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.qrcode-pro-style-icon svg {
    width: 100%;
    height: 100%;
}

/* Frame icons */
.qrcode-pro-icon-frame-none {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='9' y1='3' x2='9' y2='21' stroke-dasharray='2 2'/%3E%3Cline x1='15' y1='3' x2='15' y2='21' stroke-dasharray='2 2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9' stroke-dasharray='2 2'/%3E%3Cline x1='3' y1='15' x2='21' y2='15' stroke-dasharray='2 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-simple {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-rounded {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-corners {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpath d='M3 7v-4h4M21 7v-4h-4M3 17v4h4M21 17v4h-4'/%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-circle {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-double {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='3'/%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-frame-bracket {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpath d='M2 2v20M22 2v20'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Module shape icons */
.qrcode-pro-icon-shape-square {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Crect x='3' y='3' width='5' height='5'/%3E%3Crect x='10' y='3' width='5' height='5'/%3E%3Crect x='17' y='3' width='4' height='4'/%3E%3Crect x='3' y='10' width='5' height='5'/%3E%3Crect x='10' y='10' width='5' height='5'/%3E%3Crect x='17' y='10' width='4' height='4'/%3E%3Crect x='3' y='17' width='5' height='4'/%3E%3Crect x='10' y='17' width='5' height='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-shape-round {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Ccircle cx='5.5' cy='5.5' r='2.5'/%3E%3Ccircle cx='12.5' cy='5.5' r='2.5'/%3E%3Ccircle cx='19' cy='5.5' r='2'/%3E%3Ccircle cx='5.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='12.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='19' cy='12.5' r='2'/%3E%3Ccircle cx='5.5' cy='19' r='2.5'/%3E%3Ccircle cx='12.5' cy='19' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-shape-dot {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Ccircle cx='5.5' cy='5.5' r='1.5'/%3E%3Ccircle cx='12.5' cy='5.5' r='1.5'/%3E%3Ccircle cx='19' cy='5.5' r='1.5'/%3E%3Ccircle cx='5.5' cy='12.5' r='1.5'/%3E%3Ccircle cx='12.5' cy='12.5' r='1.5'/%3E%3Ccircle cx='19' cy='12.5' r='1.5'/%3E%3Ccircle cx='5.5' cy='19' r='1.5'/%3E%3Ccircle cx='12.5' cy='19' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-shape-diamond {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Cpolygon points='5.5,3 8,5.5 5.5,8 3,5.5'/%3E%3Cpolygon points='12.5,3 15,5.5 12.5,8 10,5.5'/%3E%3Cpolygon points='19,3 21,5.5 19,8 17,5.5'/%3E%3Cpolygon points='5.5,10 8,12.5 5.5,15 3,12.5'/%3E%3Cpolygon points='12.5,10 15,12.5 12.5,15 10,12.5'/%3E%3Cpolygon points='19,10 21,12.5 19,15 17,12.5'/%3E%3Cpolygon points='5.5,17 8,19.5 5.5,22 3,19.5'/%3E%3Cpolygon points='12.5,17 15,19.5 12.5,22 10,19.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Connected module style icons */
.qcode-pro-icon-shape-connected_square {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Crect x='2' y='3' width='6' height='4'/%3E%3Crect x='8' y='3' width='6' height='4'/%3E%3Crect x='2' y='10' width='12' height='4'/%3E%3Crect x='2' y='17' width='6' height='4'/%3E%3Crect x='14' y='17' width='6' height='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_round {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Crect x='3' y='3' width='10' height='4' rx='2'/%3E%3Crect x='3' y='10' width='14' height='4' rx='2'/%3E%3Crect x='3' y='17' width='6' height='4' rx='2'/%3E%3Crect x='13' y='17' width='6' height='4' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_horizontal {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Crect x='2' y='3' width='14' height='4' rx='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Crect x='2' y='10' width='18' height='4' rx='2'/%3E%3Crect x='2' y='17' width='10' height='4' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_triangle {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Cpolygon points='2,5 10,2 10,8'/%3E%3Cpolygon points='2,14 14,10 14,18'/%3E%3Cpolygon points='2,22 8,19 8,25'/%3E%3Cpolygon points='12,22 18,19 18,25'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_triangle_reverse {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='1.5'%3E%3Cpolygon points='2,5 10,2 10,8'/%3E%3Cpolygon points='4,5 8,3 8,7' fill='white'/%3E%3Cpolygon points='2,14 14,10 14,18'/%3E%3Cpolygon points='4,14 12,11 12,17' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_wavy {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Cpath d='M2,5 Q5,2 8,5 Q11,8 14,5 Q17,2 20,5' stroke='%23364152' stroke-width='2' fill='none'/%3E%3Crect x='2' y='10' width='16' height='4' rx='2'/%3E%3Cpath d='M2,17 Q5,14 8,17 Q11,20 14,17' stroke='%23364152' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcode-pro-icon-shape-connected_diagonal {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23364152'%3E%3Cpolygon points='4,3 14,3 10,7 0,7'/%3E%3Cpolygon points='6,10 18,10 14,14 2,14'/%3E%3Cpolygon points='4,17 10,17 8,21 2,21'/%3E%3Cpolygon points='12,17 18,17 16,21 10,21'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Eye border / center style icons */
.qrcode-pro-icon-eye-square {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Crect x='7' y='7' width='10' height='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-rounded {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-circle {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-squircle {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='6'/%3E%3Crect x='7' y='7' width='10' height='10' rx='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-diamond {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpolygon points='12,3 21,12 12,21 3,12'/%3E%3Cpolygon points='12,7 17,12 12,17 7,12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-leaf {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpath d='M12 2C6 2 3 8 3 14c0 4 3 8 9 9 6-1 9-5 9-9 0-6-3-12-9-12z'/%3E%3Cpath d='M12 6c-3 0-5 3-5 7s2 6 5 7c3-1 5-3 5-7s-2-7-5-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-hexagon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpolygon points='12,2 21,7 21,17 12,22 3,17 3,7'/%3E%3Cpolygon points='12,6 17,9 17,15 12,18 7,15 7,9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-star {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Cpolygon points='12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9'/%3E%3Cpolygon points='12,6 14,10 18,10 15,13 16,18 12,15 8,18 9,13 6,10 10,10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qrcode-pro-icon-eye-dot {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364152' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Active state: white icons */
.qrcode-pro-style-active .qrcode-pro-icon-frame-none,
.qrcode-pro-style-active .qrcode-pro-icon-frame-simple,
.qrcode-pro-style-active .qrcode-pro-icon-frame-rounded,
.qrcode-pro-style-active .qrcode-pro-icon-frame-corners,
.qrcode-pro-style-active .qrcode-pro-icon-frame-circle,
.qrcode-pro-style-active .qrcode-pro-icon-frame-double,
.qrcode-pro-style-active .qrcode-pro-icon-frame-bracket {
    filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(2800%) hue-rotate(222deg) brightness(92%) contrast(96%);
}
.qrcode-pro-style-active .qrcode-pro-icon-shape-square,
.qrcode-pro-style-active .qrcode-pro-icon-shape-round,
.qrcode-pro-style-active .qrcode-pro-icon-shape-dot,
.qrcode-pro-style-active .qrcode-pro-icon-shape-diamond,
.qrcode-pro-style-active .qrcode-pro-icon-eye-square,
.qrcode-pro-style-active .qrcode-pro-icon-eye-rounded,
.qrcode-pro-style-active .qrcode-pro-icon-eye-circle,
.qrcode-pro-style-active .qrcode-pro-icon-eye-squircle,
.qrcode-pro-style-active .qrcode-pro-icon-eye-diamond,
.qrcode-pro-style-active .qrcode-pro-icon-eye-leaf,
.qrcode-pro-style-active .qrcode-pro-icon-eye-hexagon,
.qrcode-pro-style-active .qrcode-pro-icon-eye-star,
.qrcode-pro-style-active .qrcode-pro-icon-eye-dot {
    filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(2800%) hue-rotate(222deg) brightness(92%) contrast(96%);
}

.qrcode-pro-logo-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.qrcode-pro-logo-preset {
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    background: #fff;
    padding: 8px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 82px;
    transition: all 0.2s ease;
}

.qrcode-pro-logo-preset img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 8px;
}

.qrcode-pro-logo-preset span {
    font-size: 0.72rem;
    color: #334155;
    font-weight: 600;
}

.qrcode-pro-logo-preset:hover {
    border-color: #4361ee;
    transform: translateY(-1px);
}

.qrcode-pro-logo-preset.qrcode-pro-logo-preset-active {
    border-color: #4361ee;
    background: #eff3ff;
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, 0.15);
}

.qrcode-pro-logo-preview {
    min-height: 84px;
    border: 1px dashed #b5c2d9;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.qrcode-pro-logo-preview img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 12px;
}

#qrcode-logo-preview-empty {
    font-size: 0.82rem;
    color: #64748b;
}

#qrcode-logo-upload {
    border: 1px solid #d8dfeb;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

#qrcode-logo-size,
#qrcode-logo-padding {
    width: 100%;
}

.qrcode-pro-hidden {
    display: none;
}

#qrcode-gradient-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.qrcode-pro-download-btns {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ===== Button Icons ===== */
.qrcode-pro-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.qrcode-pro-btn-icon svg {
    width: 100%;
    height: 100%;
}

.qrcode-pro-btn .qrcode-pro-btn-icon {
    margin-right: 8px;
}

/* Download button icons */
.qrcode-pro-icon-download-png {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.qrcode-pro-icon-download-svg {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Generate button icon */
.qrcode-pro-icon-generate {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='3' height='3'/%3E%3Crect x='18' y='14' width='3' height='3'/%3E%3Crect x='14' y='18' width='3' height='3'/%3E%3Crect x='18' y='18' width='3' height='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Save button icon */
.qrcode-pro-icon-save {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Back button icon */
.qrcode-pro-back-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 4px;
}

.qrcode-pro-back-btn-icon svg {
    width: 100%;
    height: 100%;
}

.qrcode-pro-icon-back {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Compact Style Buttons (icon + short label) ===== */
.qrcode-pro-style-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
}

.qrcode-pro-style-btn {
    padding: 8px 4px 6px;
    min-height: 48px;
    gap: 3px;
}

.qrcode-pro-style-btn > span:last-child {
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.qrcode-pro-style-icon {
    width: 20px;
    height: 20px;
}

.qrcode-pro-save-wrap {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.qrcode-pro-login-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px;
}

.qrcode-pro-login-notice a {
    color: #4361ee;
    font-weight: 500;
}

/* ===== Auth ===== */
.qrcode-pro-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
    padding: 40px 20px;
}

.qrcode-pro-auth-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.qrcode-pro-auth-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    color: #16213e;
}

.qrcode-pro-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.qrcode-pro-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.qrcode-pro-auth-links {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.qrcode-pro-auth-links a {
    color: #4361ee;
    text-decoration: none;
}

.qrcode-pro-auth-links a:hover {
    text-decoration: underline;
}

.qrcode-pro-error {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #c00;
    font-size: 0.9rem;
}

.qrcode-pro-notice {
    background: #f0f4ff;
    border: 1px solid #4361ee;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.qrcode-pro-notice a {
    color: #4361ee;
    font-weight: 500;
}

/* ===== Dashboard ===== */
.qrcode-pro-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.qrcode-pro-dash-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #16213e;
    margin: 0;
}

/* Stats Overview */
.qrcode-pro-stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.qrcode-pro-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.qrcode-pro-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #4361ee;
    line-height: 1.2;
}

.qrcode-pro-stat-label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
}

/* Filter */
.qrcode-pro-filter-bar {
    margin-bottom: 16px;
}

.qrcode-pro-filter-form select {
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
}

/* Table */
.qrcode-pro-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.qrcode-pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.qrcode-pro-table th {
    background: #f8f9fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e8e8e8;
    white-space: nowrap;
}

.qrcode-pro-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.qrcode-pro-table tr:hover {
    background: #fafbff;
}

.qrcode-pro-table .qrcode-pro-empty {
    text-align: center;
    padding: 40px;
    color: #888;
}

.qrcode-pro-mini-qr {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcode-pro-mini-qr img {
    max-width: 100%;
    max-height: 100%;
}

.qrcode-pro-short-url {
    color: #4361ee;
    word-break: break-all;
}

.qrcode-pro-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #e8e8e8;
    color: #333;
}

.qrcode-pro-badge-success {
    background: #d4edda;
    color: #155724;
}

.qrcode-pro-actions {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Pagination */
.qrcode-pro-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.qrcode-pro-page-link {
    display: inline-block;
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.2s;
}

.qrcode-pro-page-link:hover {
    border-color: #4361ee;
    color: #4361ee;
}

.qrcode-pro-page-active {
    background: #4361ee;
    border-color: #4361ee;
    color: #fff;
}

/* Modal */
.qrcode-pro-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qrcode-pro-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

#qrcode-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qrcode-pro-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

.qrcode-pro-modal-close:hover {
    color: #333;
}

/* Stats in Modal */
.qrcode-pro-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.qrcode-pro-stats-chart {
    margin-top: 20px;
}

.qrcode-pro-stats-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.qrcode-pro-stats-toolbar label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.qrcode-pro-stats-toolbar select {
    padding: 7px 12px;
    border: 1px solid #d1dae6;
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
}

#qrcode-stats-export-csv {
    margin-left: auto;
}

.qrcode-pro-stats-empty {
    margin: 8px 0 18px;
    color: #64748b;
    font-size: 0.9rem;
}

.qrcode-pro-chart-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.qrcode-pro-chart-label {
    width: 120px;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qrcode-pro-chart-bar-fill {
    height: 24px;
    background: #4361ee;
    border-radius: 4px;
    min-width: 4px;
    transition: width 0.3s;
}

.qrcode-pro-chart-value {
    margin-left: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.qrcode-pro-recent-scans-wrap {
    margin-top: 16px;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    overflow-x: auto;
    background: #fff;
}

.qrcode-pro-recent-scans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.qrcode-pro-recent-scans-table th {
    text-align: left;
    background: #f6f8fb;
    color: #374151;
    padding: 9px 12px;
    border-bottom: 1px solid #e5ebf4;
    white-space: nowrap;
}

.qrcode-pro-recent-scans-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #eff3f8;
    color: #4b5563;
    vertical-align: top;
}

.qrcode-pro-recent-scans-table tr:last-child td {
    border-bottom: none;
}

.qrcode-pro-recent-scans-table a {
    color: #4361ee;
    text-decoration: none;
}

.qrcode-pro-recent-scans-table a:hover {
    text-decoration: underline;
}

/* Profile */
.qrcode-pro-profile-info {
    margin-bottom: 24px;
}

.qrcode-pro-profile-info p {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
}

.qrcode-pro-profile-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .qrcode-pro-type-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .qrcode-pro-type-btn {
        padding: 12px 8px;
        min-height: 80px;
    }

    .qrcode-pro-type-icon {
        font-size: 1.4rem;
    }

    .qrcode-pro-type-label {
        font-size: 0.75rem;
    }

    .qrcode-pro-design-grid {
        grid-template-columns: 1fr;
    }

    .qrcode-pro-preview-wrap {
        min-height: 250px;
        padding: 20px;
    }

    .qrcode-pro-auth-box {
        padding: 24px;
    }

    .qrcode-pro-form-row {
        grid-template-columns: 1fr;
    }

    .qrcode-pro-dash-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .qrcode-pro-table {
        font-size: 0.8rem;
    }

    .qrcode-pro-table th,
    .qrcode-pro-table td {
        padding: 8px 10px;
    }

    #qrcode-stats-export-csv {
        margin-left: 0;
    }

    .qrcode-pro-recent-scans-table th,
    .qrcode-pro-recent-scans-table td {
        padding: 8px 10px;
    }

    .qrcode-pro-stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .qrcode-pro-download-btns {
        flex-direction: column;
    }

    .qrcode-pro-save-wrap {
        flex-direction: column;
    }

    .qrcode-pro-style-grid,
    .qrcode-pro-logo-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .qrcode-pro-generator,
    .qrcode-pro-dashboard {
        padding: 12px;
    }

    .qrcode-pro-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qrcode-pro-stats-overview {
        grid-template-columns: 1fr;
    }

    .qrcode-pro-style-grid,
    .qrcode-pro-logo-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}