@keyframes qrgFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes qrgToastIn{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
@keyframes qrgToastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}
@keyframes qrgPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}

#qr-generator{direction:rtl;text-align:right;max-width:1140px;margin:0 auto;padding:0 16px 40px}

#qr-generator .qrg-hero{background:linear-gradient(135deg,#8E54E9 0%,#7340D0 60%,#5E2EAF 100%);color:#fff;padding:30px 28px 26px;border-radius:0 0 16px 16px;text-align:center;margin-bottom:24px;position:relative;overflow:hidden}
#qr-generator .qrg-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(255,255,255,0.07) 0%,transparent 55%);pointer-events:none}
#qr-generator .qrg-hero h1{font-size:1.65rem;font-weight:700;margin:0 0 6px;position:relative;z-index:1}
#qr-generator .qrg-hero p{font-size:0.95rem;margin:0;opacity:0.88;position:relative;z-index:1}

#qr-generator .qrg-types-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;animation:qrgFadeIn 0.4s ease-out both}
#qr-generator .qrg-type-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;border:1.5px solid #e0d8ec;background:#fff;font-size:0.82rem;font-weight:500;color:#555;cursor:pointer;transition:all 0.2s;white-space:nowrap}
#qr-generator .qrg-type-pill:hover{border-color:#c4b3e0;background:#f8f5fd}
#qr-generator .qrg-type-pill.active{background:#8E54E9;color:#fff;border-color:#8E54E9;box-shadow:0 2px 8px rgba(142,84,233,0.25)}
#qr-generator .qrg-type-pill .qrg-pi{font-size:1rem;line-height:1}

#qr-generator .qrg-main-row{display:flex;gap:24px;align-items:flex-start;animation:qrgFadeIn 0.45s ease-out 0.1s both}
#qr-generator .qrg-input-panel{flex:1;min-width:0}
#qr-generator .qrg-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
#qr-generator .qrg-card+.qrg-card{margin-top:14px}

#qr-generator .qrg-stitle{font-size:0.95rem;font-weight:700;color:#2d2d3a;margin:0 0 14px;display:flex;align-items:center;gap:8px}
#qr-generator .qrg-stitle .qrg-dot{width:8px;height:8px;border-radius:50%;background:#8E54E9;flex-shrink:0}

#qr-generator .qrg-fields-area{min-height:50px}
#qr-generator .qrg-fg{margin-bottom:14px}
#qr-generator .qrg-fg:last-child{margin-bottom:0}
#qr-generator .qrg-fg label{display:block;font-size:0.85rem;font-weight:600;color:#3a3a4a;margin-bottom:5px}
#qr-generator .qrg-fg label .qrg-req{color:#d32f2f;margin-right:2px}
#qr-generator .qrg-fg .form-control,#qr-generator .qrg-fg .form-select{border-radius:10px;border:1.5px solid #ddd5e8;padding:9px 14px;font-size:0.9rem;transition:border-color 0.2s,box-shadow 0.2s}
#qr-generator .qrg-fg .form-control:focus,#qr-generator .qrg-fg .form-select:focus{border-color:#8E54E9;box-shadow:0 0 0 3px rgba(142,84,233,0.12)}
#qr-generator .qrg-fg .form-control.is-invalid{border-color:#d32f2f;box-shadow:0 0 0 3px rgba(211,47,47,0.08)}
#qr-generator .qrg-fg .ltr-input{direction:ltr;text-align:left}
#qr-generator .qrg-fg .qrg-helper{font-size:0.78rem;color:#999;margin-top:3px}
#qr-generator .qrg-fg .qrg-err{font-size:0.78rem;color:#d32f2f;margin-top:3px;display:none}
#qr-generator .qrg-fg .form-control.is-invalid~.qrg-err{display:block}
#qr-generator .qrg-cc{font-size:0.75rem;color:#aaa;margin-top:3px;text-align:left;direction:ltr}
#qr-generator .qrg-cc.near{color:#e67e22}
#qr-generator .qrg-cc.limit{color:#d32f2f;font-weight:600}

#qr-generator .qrg-cust-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:#8E54E9;font-size:0.85rem;font-weight:600;cursor:pointer;padding:0;margin-top:4px}
#qr-generator .qrg-cust-toggle:hover{opacity:0.7}
#qr-generator .qrg-cust-toggle .qrg-arr{font-size:0.65rem;transition:transform 0.25s}
#qr-generator .qrg-cust-toggle.open .qrg-arr{transform:rotate(180deg)}
#qr-generator .qrg-cust-body{display:none}
#qr-generator .qrg-cust-body.open{display:block;animation:qrgFadeIn 0.25s ease-out}

#qr-generator .qrg-sr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#qr-generator .qrg-sr label{font-size:0.83rem;font-weight:600;color:#3a3a4a;white-space:nowrap;min-width:50px}
#qr-generator .qrg-sr input[type="range"]{flex:1;height:5px;border-radius:3px;background:#e8e0f3;outline:none;appearance:none;-webkit-appearance:none;direction:ltr}
#qr-generator .qrg-sr input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#8E54E9;cursor:pointer;box-shadow:0 1px 5px rgba(142,84,233,0.35)}
#qr-generator .qrg-sr input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#8E54E9;cursor:pointer;border:none}
#qr-generator .qrg-sr .qrg-sv{font-size:0.8rem;color:#8E54E9;font-weight:600;min-width:42px;text-align:center;direction:ltr}

#qr-generator .qrg-crow{display:flex;gap:12px;margin-bottom:12px}
#qr-generator .qrg-cf{flex:1}
#qr-generator .qrg-cf label{display:block;font-size:0.8rem;font-weight:600;color:#3a3a4a;margin-bottom:4px}
#qr-generator .qrg-ci{display:flex;align-items:center;gap:6px;border:1.5px solid #ddd5e8;border-radius:8px;padding:3px 8px;background:#fff}
#qr-generator .qrg-ci:focus-within{border-color:#8E54E9}
#qr-generator .qrg-ci input[type="color"]{width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;padding:0;background:none}
#qr-generator .qrg-ci input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
#qr-generator .qrg-ci input[type="color"]::-webkit-color-swatch{border:1px solid #ddd;border-radius:3px}
#qr-generator .qrg-ci input[type="text"]{border:none;outline:none;width:70px;font-size:0.8rem;direction:ltr;text-align:left;color:#555}

#qr-generator .qrg-presets{display:flex;gap:6px;margin-bottom:14px}
#qr-generator .qrg-pst{width:30px;height:30px;border-radius:6px;border:2px solid #e0d8ec;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;position:relative;overflow:hidden}
#qr-generator .qrg-pst:hover{transform:scale(1.13);box-shadow:0 2px 6px rgba(0,0,0,0.12)}
#qr-generator .qrg-pst.active{border-color:#8E54E9}
#qr-generator .qrg-pst span:first-child{position:absolute;top:0;right:0;width:50%;height:100%}
#qr-generator .qrg-pst span:last-child{position:absolute;top:0;left:0;width:50%;height:100%}

#qr-generator .qrg-cw{display:none;padding:7px 12px;background:#fff8e1;border:1px solid #ffe082;border-radius:7px;font-size:0.78rem;color:#8d6e00;margin-bottom:12px}
#qr-generator .qrg-cw.show{display:block}

#qr-generator .qrg-la{margin-bottom:14px}
#qr-generator .qrg-la label{font-size:0.8rem;font-weight:600;color:#3a3a4a;margin-bottom:5px;display:block}
#qr-generator .qrg-ldrop{border:2px dashed #d0c4e4;border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:all 0.2s;background:#fcfaff}
#qr-generator .qrg-ldrop:hover{border-color:#8E54E9;background:#f5f0fc}
#qr-generator .qrg-ldrop.dragover{border-color:#8E54E9;background:#ede4fa}
#qr-generator .qrg-ldrop-t{font-size:0.82rem;color:#888}
#qr-generator .qrg-ldrop-t strong{color:#8E54E9}
#qr-generator .qrg-ldrop-s{font-size:0.72rem;color:#bbb;margin-top:2px}
#qr-generator .qrg-lprev{display:none;align-items:center;gap:10px;padding:8px 12px;background:#f9f6fe;border-radius:8px;border:1px solid #e0d8ec}
#qr-generator .qrg-lprev.active{display:flex}
#qr-generator .qrg-lprev img{width:40px;height:40px;object-fit:contain;border-radius:5px;background:#fff}
#qr-generator .qrg-lprev .qrg-ln{flex:1;font-size:0.78rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qr-generator .qrg-lprev .qrg-lrm{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:1rem;padding:2px 4px}

#qr-generator .qrg-advr{display:flex;gap:12px}
#qr-generator .qrg-advr>div{flex:1}
#qr-generator .qrg-advr label{display:block;font-size:0.8rem;font-weight:600;color:#3a3a4a;margin-bottom:4px}
#qr-generator .qrg-advr .form-select{border-radius:8px;border:1.5px solid #ddd5e8;padding:7px 10px;font-size:0.83rem}
#qr-generator .qrg-advr .form-select:focus{border-color:#8E54E9;box-shadow:0 0 0 3px rgba(142,84,233,0.12)}

#qr-generator .qrg-prev-panel{width:340px;flex-shrink:0;position:sticky;top:20px}
#qr-generator .qrg-prev-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 1px 6px rgba(0,0,0,0.06);text-align:center}
#qr-generator .qrg-cw-wrap{background:#f8f6fb;border:2px solid #ece6f5;border-radius:12px;padding:24px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;min-height:200px;justify-content:center}
#qr-generator .qrg-cw-wrap canvas{max-width:100%;height:auto;image-rendering:pixelated;animation:qrgPop 0.3s ease-out}
#qr-generator .qrg-ph{color:#bbb;font-size:0.9rem;display:flex;flex-direction:column;align-items:center;gap:8px}
#qr-generator .qrg-ph-i{font-size:2.5rem;opacity:0.35}
#qr-generator .qrg-si{font-size:0.75rem;color:#aaa;margin-top:6px;direction:ltr}

#qr-generator .qrg-dls{display:flex;flex-direction:column;gap:8px}
#qr-generator .qrg-db{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border:none;border-radius:10px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.2s}
#qr-generator .qrg-db:disabled{opacity:0.35;cursor:not-allowed}
#qr-generator .qrg-db.png{background:#8E54E9;color:#fff}
#qr-generator .qrg-db.png:not(:disabled):hover{background:#7a45d4;box-shadow:0 3px 10px rgba(142,84,233,0.3)}
#qr-generator .qrg-db.svg{background:#00a86b;color:#fff}
#qr-generator .qrg-db.svg:not(:disabled):hover{background:#009660;box-shadow:0 3px 10px rgba(0,168,107,0.3)}
#qr-generator .qrg-db.cpy{background:#fff;color:#8E54E9;border:1.5px solid #8E54E9}
#qr-generator .qrg-db.cpy:not(:disabled):hover{background:#f8f5fd}
#qr-generator .qrg-dtip{font-size:0.75rem;color:#bbb;margin-top:4px}

#qr-generator .qrg-tc{position:fixed;bottom:24px;left:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:8px}
#qr-generator .qrg-t{padding:12px 18px;border-radius:10px;font-size:0.85rem;font-weight:500;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.15);animation:qrgToastIn 0.3s ease-out;cursor:pointer;max-width:340px}
#qr-generator .qrg-t.ok{background:#00a86b}
#qr-generator .qrg-t.er{background:#d32f2f}
#qr-generator .qrg-t.nfo{background:#8E54E9}
#qr-generator .qrg-t.out{animation:qrgToastOut 0.25s ease-in forwards}

@media(max-width:991.98px){
    #qr-generator .qrg-main-row{flex-direction:column}
    #qr-generator .qrg-prev-panel{width:100%;position:static}
}
@media(max-width:767.98px){
    #qr-generator .qrg-hero{padding:22px 20px 20px;margin-bottom:16px;border-radius:0 0 12px 12px}
    #qr-generator .qrg-hero h1{font-size:1.35rem}
    #qr-generator .qrg-hero p{font-size:0.85rem}
    #qr-generator .qrg-types-bar{gap:5px}
    #qr-generator .qrg-type-pill{padding:6px 10px;font-size:0.76rem}
    #qr-generator .qrg-card,#qr-generator .qrg-prev-card{padding:18px;border-radius:12px}
    #qr-generator .qrg-cw-wrap{padding:16px}
    #qr-generator .qrg-crow{flex-direction:column;gap:10px}
    #qr-generator .qrg-dls{position:sticky;bottom:0;background:#fff;padding:12px 0 4px;border-top:1px solid #eee;z-index:40}
}