/* Approved image is the entire fixed card. Dynamic text covers ONLY variable regions. */
.ys-exact-card{position:relative;width:100%;aspect-ratio:1536/864;overflow:hidden;border-radius:3.6%;isolation:isolate;background:#0e3b29;box-shadow:0 12px 30px #17382618}
.ys-card-template{display:block;width:100%;height:100%;object-fit:fill}
.ys-live-name,.ys-live-credits{position:absolute;z-index:2;color:white;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;background:linear-gradient(90deg,#093d27 0%,#093d27 76%,rgba(9,61,39,.95) 92%,rgba(9,61,39,0) 100%)}
.ys-live-name{left:3.5%;top:39%;width:43%;height:17%}
.ys-live-name span,.ys-live-credits>span{font:500 clamp(5px,1.55vw,22px) Arial,sans-serif;letter-spacing:.13em}
.ys-live-name strong{font:400 clamp(12px,4.2vw,58px) Georgia,serif;white-space:nowrap;line-height:1.2}
.ys-live-credits{left:3.5%;top:58%;width:45%;height:26%;justify-content:flex-start}
.ys-count{display:flex;align-items:baseline;gap:3%}
.ys-count strong{font:400 clamp(25px,8vw,110px) Georgia,serif;line-height:1.05}
.ys-count small{font:400 clamp(10px,3vw,40px) Georgia,serif}
.ys-meter{height:5%;width:93%;background:#a5b4aa;border-radius:50px;overflow:hidden}
.ys-meter div{height:100%;width:0;background:#94e27e;border-radius:50px;transition:width .55s ease-out;max-width:100%}
.ys-live-credits #balance-note{font:400 clamp(5px,.95vw,13px) Arial,sans-serif;margin-top:2%;color:#f3f8f3}
.ys-live-qr{position:absolute;z-index:3;left:80.2%;top:56%;width:17.2%;height:39%;border-radius:9%;background:white;color:#0c3829;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:1%;overflow:hidden;text-align:center;gap:1%}
.ys-live-qr #ys-live-qr{min-height:0!important;margin:0 auto!important;width:78%!important;aspect-ratio:1}
.ys-live-qr #ys-live-qr img,.ys-live-qr #ys-live-qr canvas{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;border-radius:0!important;object-fit:contain}
.ys-live-qr strong{font:700 clamp(7px,1.65vw,24px) Arial,sans-serif;letter-spacing:.04em}
.ys-live-qr small{font:400 clamp(5px,.9vw,13px) Arial,sans-serif;line-height:1.1}
.ys-live-qr button{display:none!important}
.ys-exact-card .ys-preview-qr{font:700 clamp(5px,.9vw,12px) Arial,sans-serif;padding:3px!important;border-width:1px!important;margin:0!important}
.ys-design-preview .ys-live-name,.ys-design-preview .ys-live-credits{display:none}
.ys-design-preview .ys-live-qr{background:white}
@media(max-width:650px){.ys-live-name span,.ys-live-credits>span{font-size:clamp(5px,1.6vw,9px)}.ys-live-name strong{font-size:clamp(10px,4vw,27px)}.ys-count strong{font-size:clamp(22px,8vw,55px)}.ys-count small{font-size:clamp(9px,2.9vw,20px)}.ys-live-credits #balance-note{font-size:5px}.ys-live-qr strong{font-size:clamp(6px,1.55vw,10px)}.ys-live-qr small{font-size:clamp(4px,.9vw,7px)}.ys-live-qr #ys-live-qr{width:76%!important}.ys-live-qr{padding:1%}}