.qr-container{display:flex;gap:0;align-items:flex-start;flex-wrap:wrap;width:100%;max-width:1200px;justify-content:space-between;margin:0 auto}
.qr-panel{background:#ffffff;border-radius:24px;padding:2rem 1.8rem;box-shadow:0 24px 48px -20px rgba(16,185,129,0.18),0 8px 20px -8px rgba(15,32,27,0.08);border:1px solid rgba(16,185,129,0.08);flex:0 0 520px;width:520px;display:flex;flex-direction:column;gap:1.2rem}
.qr-label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;color:#3a5448;margin-bottom:.35rem;display:flex;align-items:center;justify-content:space-between}
.phone-wrap{position:relative}
.phone-row{display:flex;align-items:stretch;border-radius:14px;border:1.5px solid #e8efec;background:#fbfdfc;overflow:hidden;transition:all .25s}
.phone-row:focus-within{border-color:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,0.12);background:#ffffff}
.phone-row.error{border-color:#e74c3c}
.phone-row.valid{border-color:#10B981}
.flag-btn{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem;background:#f5faf7;border-right:1px solid #e0e8e3;cursor:pointer;font-weight:600;font-size:.85rem;white-space:nowrap;user-select:none;flex-shrink:0;min-width:100px}
.flag-btn:hover{background:#e8f7ee}
.flag-btn.open .flag-arrow{transform:rotate(180deg)}
.flag-img{width:26px!important;height:18px!important;border-radius:2px!important;object-fit:cover!important;flex-shrink:0!important;display:inline-block!important;max-width:26px!important;box-shadow:0 1px 2px rgba(0,0,0,.1)!important}
.flag-arrow{font-size:.6rem;transition:transform .25s;color:#5a6b64}
.phone-input{flex:1;padding:.85rem 1rem;border:none;font-family:'Inter',system-ui,sans-serif;font-size:.95rem;outline:none;background:transparent;color:#0b2b25;min-width:140px}
.phone-input::placeholder{color:#b0bfb7}
.error-msg{font-size:.7rem;color:#e74c3c;margin-top:.25rem;display:none;font-weight:500}
.error-msg.show{display:block}
.country-drop{position:absolute;top:calc(100%+4px);left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 10px 35px rgba(0,0,0,.14);border:1px solid #e0e8e3;z-index:999;display:none;overflow:hidden}
.country-drop.show{display:block}
.country-search{width:100%;padding:.65rem .9rem;border:none;border-bottom:1px solid #eef3f0;font-family:'Inter',system-ui,sans-serif;font-size:.82rem;outline:none;background:#fafdfb;color:#0b2b25}
.country-list{max-height:200px;overflow-y:auto}
.country-item{padding:.55rem .9rem;cursor:pointer;font-size:.8rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #f8faf9}
.country-item:hover{background:#f5faf7}
.country-item.selected{background:#eafaf3;font-weight:600}
.country-item .flag-img{width:26px!important;height:18px!important;border-radius:2px!important;object-fit:cover!important;flex-shrink:0!important;display:inline-block!important;max-width:26px!important;box-shadow:0 1px 2px rgba(0,0,0,.1)!important}
.msg-wrap{position:relative}
.msg-input{width:100%;padding:.85rem 2.8rem .85rem 1rem;border-radius:14px;border:1.5px solid #e8efec;font-family:'Inter',system-ui,sans-serif;font-size:.92rem;outline:none;transition:all .25s;background:#fbfdfc;color:#0b2b25}
.msg-input:focus{border-color:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,0.12);background:#ffffff}
.msg-input::placeholder{color:#b0bfb7}
.emoji-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.3rem;cursor:pointer;padding:.3rem;border-radius:50%;transition:.2s}
.emoji-btn:hover{background:#f0faf3}
.emoji-palette{position:absolute;top:100%;right:0;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.15);border:1px solid #e0e8e3;padding:.5rem;display:none;z-index:999;flex-wrap:wrap;gap:.25rem;width:260px;margin-top:4px}
.emoji-palette.show{display:flex}
.emoji-item{width:33px;height:33px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;border-radius:6px;transition:.15s}
.emoji-item:hover{background:#f0faf3;transform:scale(1.2)}
.color-picker-row{display:flex;gap:.8rem;align-items:stretch}
.color-picker-card{flex:1;background:#fbfdfc;border-radius:14px;padding:.75rem .9rem;border:1.5px solid #e8efec;cursor:pointer;transition:all .2s;position:relative}
.color-picker-card:hover{border-color:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,0.12)}
.cp-label{font-size:.68rem;font-weight:600;color:#889992;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.35rem}
.cp-preview{display:flex;align-items:center;gap:.5rem}
.cp-dot{width:28px;height:28px;border-radius:8px;border:2px solid #e0e8e3;flex-shrink:0}
.cp-value{font-size:.78rem;font-weight:600;color:#0b2b25}
.color-picker-card input[type=color]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
.size-row{display:flex;gap:.5rem}
.size-btn{flex:1;padding:.7rem .5rem;border-radius:14px;font-size:.8rem;font-weight:600;cursor:pointer;border:1.5px solid #e8efec;background:#fff;color:#5a6b64;transition:all .2s;text-align:center;font-family:'Inter',system-ui,sans-serif}
.size-btn:hover{border-color:#10B981;background:#f4faf7}
.size-btn.active{background:#10B981;border-color:#10B981;color:white}
.btn-row{display:flex;gap:.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.7rem 1.2rem;border-radius:50px;font-weight:700;font-size:.8rem;cursor:pointer;transition:all .25s;border:none;font-family:'Inter',system-ui,sans-serif;white-space:nowrap}
.btn-green{background:#10B981;color:white;box-shadow:0 12px 24px -8px rgba(16,185,129,0.55);flex:1}
.btn-green:hover{background:#0e9f72;transform:translateY(-2px)}
.btn-white{background:#fff;color:#1B1F27;border:1.5px solid #e8efec;flex:1}
.btn-white:hover{border-color:#10B981;transform:translateY(-2px)}
.live-indicator{font-size:.68rem;color:#889992;font-weight:500;white-space:nowrap;letter-spacing:.3px;align-self:center}
.live-arrow{display:inline-block;animation:liveSlide 1.5s ease-in-out infinite}
@keyframes liveSlide{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(5px);opacity:1}}
.qr-right{flex:0 0 380px;width:380px;display:flex;flex-direction:column;align-self:center}
.qr-preview-card{background:#ffffff;border-radius:24px;padding:1.5rem;box-shadow:0 24px 48px -20px rgba(16,185,129,0.18),0 8px 20px -8px rgba(15,32,27,0.08);border:1px solid rgba(16,185,129,0.08);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qr-canvas-wrap{display:flex;align-items:center;justify-content:center;min-height:280px;width:100%}
.qr-canvas-wrap canvas{border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.06);max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}
.qr-status{font-size:.65rem;font-weight:600;margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.25rem}
.qr-status.ready{color:#1a7a3a}.qr-status.error{color:#e74c3c}
@media(max-width:1100px){.qr-panel{flex:0 0 460px;width:460px}.qr-right{flex:0 0 320px;width:320px}}
@media(max-width:900px){.qr-container{flex-direction:column;align-items:center;gap:1.5rem}.qr-panel{flex:1 1 auto;width:100%;max-width:520px}.qr-right{position:static;flex:0 0 auto;width:100%;max-width:400px}.live-indicator{padding:.3rem 0}}
@media(max-width:480px){.qr-panel{padding:1.2rem .9rem}.qr-preview-card{padding:1rem}}
@media(max-width:400px){.flag-btn{min-width:0;padding:.85rem .65rem}.phone-input{min-width:0;padding:.85rem .75rem}.btn{padding:.7rem .8rem}.color-picker-row{gap:.55rem}.size-row{gap:.4rem}}