/* ===== TS Kim Long - fixed visible QR contact panel ===== */
.kl-contact-qr{
    position:absolute;
    z-index:6;
    left:clamp(18px,3.2vw,58px);
    top:calc(50% - 60px);
    transform:translateY(-50%);
    width:min(390px,31vw);
    padding:16px 16px 13px;
    border:1px solid rgba(218,174,87,.58);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(20,10,24,.86),rgba(13,9,10,.72));
    box-shadow:0 18px 55px rgba(0,0,0,.36), inset 0 0 30px rgba(134,76,142,.08);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.kl-contact-qr__title{
    margin:0 0 12px;
    text-align:center;
    color:#f2d48b;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.kl-contact-qr__items{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.kl-contact-qr__item{
    min-width:0;
    color:#f8e7bd;
    text-align:center;
    text-decoration:none;
    transition:transform .18s ease,filter .18s ease;
}
.kl-contact-qr__item:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}
.kl-contact-qr__frame{
    display:block;
    padding:6px;
    margin:0 auto 7px;
    max-width:104px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 0 0 1px rgba(239,199,111,.78),0 7px 20px rgba(0,0,0,.32);
}
.kl-contact-qr__frame img{
    display:block;
    width:100%;
    height:auto;
    border-radius:4px;
}
.kl-contact-qr__item strong{
    display:block;
    font-size:12px;
    line-height:1.2;
}
.kl-contact-qr__item small{
    display:block;
    margin-top:2px;
    color:rgba(239,222,192,.68);
    font-size:10px;
    line-height:1.2;
}
.kl-contact-qr__hint{
    margin-top:10px;
    text-align:center;
    color:rgba(242,224,192,.64);
    font-size:10px;
    letter-spacing:.05em;
}

/* Keep the QR panel visible without covering the form on narrower screens. */
@media (max-width:1100px){
    .kl-contact-qr{
        left:18px;
        width:300px;
        padding:13px 12px 11px;
    }
    .kl-contact-qr__items{gap:7px}
    .kl-contact-qr__frame{padding:5px;max-width:82px}
}
@media (max-width:820px){
    .account-scene:has(.kl-contact-qr){
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:14px;
        padding-top:28px;
        padding-bottom:28px;
    }
    .account-scene .kl-contact-qr{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        order:2;
        width:min(92vw,430px);
        margin:0 auto;
    }
    .account-scene .scene-panel{
        order:1;
    }
    .kl-contact-qr__frame{max-width:96px}
}
@media (max-width:430px){
    .kl-contact-qr{padding:12px 9px 10px}
    .kl-contact-qr__title{font-size:11px}
    .kl-contact-qr__items{gap:6px}
    .kl-contact-qr__frame{max-width:82px;padding:4px}
    .kl-contact-qr__item strong{font-size:11px}
    .kl-contact-qr__item small{font-size:9px}
}


/* Recharge desktop balance: QR stays on the left, recharge form moves right. */
@media (min-width:821px){
    .recharge-scene .scene-panel{
        transform:translateX(110px);
    }
}