/* Small Patch V20: Hero stage closer to recording */
.qrref-hero{position:relative}
.qrref-stage{
  min-height:560px;
  background:
    radial-gradient(circle at 44% 18%, rgba(255,236,170,.22), transparent 26%),
    radial-gradient(circle at 64% 54%, rgba(255,210,232,.18), transparent 20%),
    radial-gradient(#ece7df 1px, transparent 1px);
  background-size:auto, auto, 18px 18px;
  background-position:center, center, 0 0;
  border-radius:34px;
}
.qrref-stage:before{display:none}
.qrref-auto-badge{
  right:28px;top:24px;padding:11px 18px;border-radius:14px;
  font-size:12px;font-weight:1000;background:#ffd52d;color:#211a00;
  box-shadow:0 14px 24px rgba(201,161,0,.20),0 0 28px rgba(255,213,45,.18);
  transform:rotate(4deg);animation:qrrecFloatA 4.2s ease-in-out infinite;
}
.qrref-delete-card{
  right:92px;top:96px;width:182px;padding:16px 14px 14px;border-radius:18px;
  background:linear-gradient(180deg,#101626,#0d1220 100%);color:#fff;
  box-shadow:0 18px 34px rgba(14,20,35,.22);
  transform:rotate(-5deg);animation:qrrecFloatB 4.8s ease-in-out infinite;
}
.qrref-delete-card i{top:-8px;width:15px;height:15px;background:#5df2cf;box-shadow:0 0 0 7px rgba(93,242,207,.16)}
.qrref-delete-card strong{display:block;color:#55f0cf;font-size:11px;letter-spacing:.06em;font-weight:1000}
.qrref-delete-card small{margin-top:8px;font-size:9.5px;line-height:1.34;color:rgba(255,255,255,.90)}

.qrref-phone{
  left:26px;top:24px;width:252px;height:332px;padding:24px 18px 16px;
  border-radius:30px;background:#fffefb;border:1px solid #ece3d8;
  box-shadow:0 30px 60px rgba(81,66,48,.14), 0 2px 0 rgba(255,255,255,.7) inset;
  transform:rotate(-6deg);z-index:3;
}
.qrref-phone-notch{top:12px;width:70px;height:5px;background:#ded7ce}
.qrref-phone-head{gap:7px;font-size:10px;color:#25242b;font-weight:1000}
.qrref-phone-head span{width:9px;height:9px;background:#ee1c7a;box-shadow:0 0 0 2px rgba(238,28,122,.10)}
.qrref-qrbox{margin-top:14px;height:226px;padding:10px;border-radius:17px;background:#fffaf0;border:1px dashed #f0d99d}
.qrref-scanline{
  left:12px;right:12px;height:7px;top:46px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,33,132,0),rgba(255,33,132,.85) 28%,#ffc4de 50%,rgba(255,33,132,.85) 72%,rgba(255,33,132,0));
  box-shadow:0 0 12px 4px rgba(255,53,142,.28),0 0 22px 8px rgba(255,124,186,.18);
  animation:qrrecScan 2.6s ease-in-out infinite;
}
.qrref-scanstate{height:24px;margin-top:6px;font-size:10px;font-weight:900}
.state-scan{color:#8c857f;animation:qrrefStateScan 5.2s infinite}
.state-sent{color:#2fa75d;animation:qrrefStateSent 5.2s infinite}

.qrref-filechip{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.96);font-size:10px;color:#504b57;border:1px solid #eee8ea;box-shadow:0 10px 18px rgba(74,59,62,.10)}
.chip-paid{left:246px;top:255px;animation:qrrecChipPaid 5.2s ease-in-out infinite}
.chip-photo{left:306px;top:256px;animation:qrrecChipPhoto 5.2s ease-in-out infinite}
.chip-notes{left:346px;top:235px;opacity:0;animation:qrrecChipNotes 5.2s ease-in-out infinite}

.qrref-printer{right:20px;bottom:2px;width:356px;height:286px;z-index:2;filter:drop-shadow(0 18px 26px rgba(24,20,33,.18))}
.qrref-paper-stack{left:87px;top:2px;width:198px;height:84px}
.qrref-paper-stack i{width:86px;height:70px;border-radius:6px 6px 0 0}
.qrref-printer-top{top:64px;height:126px;border-radius:18px;background:linear-gradient(180deg,#16181f,#0d0f16)}
.qrref-slot{left:36px;right:36px;top:26px;height:12px}
.qrref-slot::after{left:-15%;width:32%;animation:qrrefSlotScan 1.65s linear infinite}
.qrref-printer-top::before{top:18px;height:82px;animation:qrrefPrinterSweep 3.4s ease-in-out infinite}
.qrref-printer-top::after{top:22px;height:20px;animation:qrrefHeadFlash 3.4s ease-in-out infinite}
.qrref-print-status{left:27px;bottom:40px;font-size:8.5px;letter-spacing:.28em;color:#b2afbd}
.qrref-lights{right:24px;bottom:42px}
.qrref-printer-base{left:10px;right:10px;bottom:3px;height:106px}
.qrref-output-paper{
  width:172px;height:132px;top:136px;padding:13px 14px 12px;
  transform:translateX(-50%) translateY(-58px);
  animation:qrrecPaper 5.2s ease-in-out infinite;
  position:absolute;overflow:hidden;
}
.qrref-output-paper::before{
  content:"";position:absolute;right:13px;bottom:16px;width:22px;height:22px;
  background:
    linear-gradient(#111 0 0) 0 0/6px 6px no-repeat,
    linear-gradient(#111 0 0) 8px 0/5px 5px no-repeat,
    linear-gradient(#111 0 0) 0 8px/5px 5px no-repeat,
    linear-gradient(#111 0 0) 11px 11px/5px 5px no-repeat,
    linear-gradient(#111 0 0) 16px 4px/4px 4px no-repeat,
    linear-gradient(#111 0 0) 5px 16px/4px 4px no-repeat;
  opacity:.92;
}
.qrref-output-paper b{font-size:8px;margin-bottom:9px}
.qrref-output-paper span{height:4px;margin:5px 0;background:#e8e5df}
.qrref-output-paper small{margin-top:12px;color:#2fa75d;font-size:8px;font-weight:900}

@keyframes qrrecFloatA{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes qrrecFloatB{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes qrrecScan{0%{transform:translateY(8px);opacity:.35}12%{opacity:1}50%{transform:translateY(152px);opacity:1}90%{opacity:1}100%{transform:translateY(8px);opacity:.35}}
@keyframes qrrecChipPaid{0%,34%{opacity:0;transform:translate(-8px,6px)}44%,70%{opacity:1;transform:none}84%,100%{opacity:0;transform:translate(36px,32px)}}
@keyframes qrrecChipPhoto{0%,42%{opacity:0;transform:translate(-12px,6px)}52%,74%{opacity:1;transform:none}88%,100%{opacity:0;transform:translate(54px,34px)}}
@keyframes qrrecChipNotes{0%,48%{opacity:0;transform:translate(-10px,5px)}58%,75%{opacity:.5;transform:none}82%,100%{opacity:0;transform:translate(58px,30px)}}
@keyframes qrrecPaper{0%,44%{opacity:0;transform:translateX(-50%) translateY(-56px)}55%{opacity:1}72%,88%{opacity:1;transform:translateX(-50%) translateY(2px)}100%{opacity:0;transform:translateX(-50%) translateY(18px)}}

@media(max-width:1050px){
  .qrref-stage{max-width:620px;margin:0 auto;min-height:570px}
}
@media(max-width:700px){
  .qrref-stage{min-height:470px;background-size:auto, auto, 16px 16px}
  .qrref-auto-badge{right:18px;top:12px;padding:8px 14px;font-size:10px}
  .qrref-delete-card{right:54px;top:68px;width:145px;padding:12px 10px 11px}
  .qrref-delete-card strong{font-size:9.5px}.qrref-delete-card small{font-size:8.2px}
  .qrref-phone{left:14px;top:20px;width:214px;height:292px;padding:22px 15px 13px}
  .qrref-qrbox{height:190px}.qrref-scanline{top:38px}
  .chip-paid{left:188px;top:221px}.chip-photo{left:236px;top:221px}.chip-notes{left:276px;top:203px}
  .qrref-printer{right:6px;width:300px;height:240px;bottom:-2px}
  .qrref-paper-stack{left:72px;top:0;width:166px;height:66px}.qrref-paper-stack i{width:72px;height:56px}
  .qrref-printer-top{top:54px;height:104px}.qrref-printer-base{height:92px}.qrref-output-paper{width:145px;height:114px;top:114px;padding:12px 11px 10px}
}
@media(prefers-reduced-motion:reduce){
  .qrref-auto-badge,.qrref-delete-card,.qrref-scanline,.qrref-filechip,.qrref-output-paper{animation:none!important}
}


/* ===== V21 Final Recording Match Tuning ===== */
.qrref-stage{
  min-height:575px!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,247,214,.72),transparent 30%),
    radial-gradient(circle at 68% 58%,rgba(255,224,239,.28),transparent 22%),
    radial-gradient(circle at 83% 18%,rgba(255,238,190,.30),transparent 18%),
    radial-gradient(#eee9e2 1px,transparent 1px)!important;
  background-size:auto,auto,auto,18px 18px!important;
  border-radius:34px!important;
}
.qrref-phone{
  left:18px!important;top:18px!important;
  width:258px!important;height:338px!important;
  transform:rotate(-6.5deg)!important;
  box-shadow:0 30px 70px rgba(87,68,44,.15)!important;
}
.qrref-phone-head{font-size:10.5px!important}
.qrref-qrbox{height:230px!important;border-radius:16px!important}
.qrref-qr{filter:contrast(1.04)}
.qrref-scanline{
  height:8px!important;
  box-shadow:0 0 10px 3px rgba(255,28,129,.42),0 0 22px 8px rgba(255,120,185,.20)!important;
  animation:qrrecScanV21 2.55s cubic-bezier(.45,.02,.55,.98) infinite!important;
}
.qrref-scanstate{margin-top:5px!important;font-size:10.2px!important}

.qrref-delete-card{
  right:88px!important;top:92px!important;
  width:188px!important;
  transform:rotate(-5deg)!important;
  border:1px solid rgba(89,241,207,.15)!important;
  box-shadow:0 18px 36px rgba(9,16,29,.24)!important;
}
.qrref-delete-card strong{font-size:11.5px!important}
.qrref-delete-card small{font-size:9.6px!important;line-height:1.4!important}
.qrref-auto-badge{
  right:14px!important;top:20px!important;
  padding:11px 18px!important;border-radius:14px!important;
  box-shadow:0 13px 24px rgba(194,157,0,.22),0 0 28px rgba(255,216,55,.16)!important;
}

.chip-photo{left:305px!important;top:253px!important;animation:qrrecChipPhotoV21 5.2s ease-in-out infinite!important}
.chip-notes{left:356px!important;top:226px!important;animation:qrrecChipNotesV21 5.2s ease-in-out infinite!important}
.chip-paid{left:247px!important;top:253px!important;animation:qrrecChipPaidV21 5.2s ease-in-out infinite!important}
.qrref-filechip{font-size:9.8px!important;padding:7px 12px!important}

.qrref-printer{
  right:4px!important;bottom:-2px!important;
  width:378px!important;height:300px!important;
  filter:drop-shadow(0 24px 30px rgba(17,15,22,.20))!important;
}
.qrref-paper-stack{left:91px!important;top:0!important;width:210px!important;height:86px!important}
.qrref-paper-stack i{width:90px!important;height:72px!important}
.qrref-printer-top{top:64px!important;height:132px!important;border-radius:19px!important;background:linear-gradient(180deg,#18191f 0%,#0d0e14 100%)!important}
.qrref-slot{left:36px!important;right:36px!important;top:27px!important;height:13px!important}
.qrref-print-status{left:29px!important;bottom:41px!important;font-size:8.8px!important;color:#aaa8b5!important}
.qrref-print-status span{animation:qrrecPrintLedV21 1.15s ease-in-out infinite!important}
.qrref-lights{right:27px!important;bottom:42px!important;gap:6px!important}
.qrref-lights i{width:8px!important;height:8px!important;border-radius:3px!important}
.qrref-printer-base{left:9px!important;right:9px!important;bottom:0!important;height:108px!important}
.qrref-output-paper{
  top:141px!important;width:176px!important;height:134px!important;
  padding:13px 14px 12px!important;
  animation:qrrecPaperV21 5.2s cubic-bezier(.45,.04,.55,.96) infinite!important;
  box-shadow:0 13px 20px rgba(33,29,35,.14)!important;
}
.qrref-output-paper::after{
  content:"";position:absolute;left:0;right:0;top:0;height:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,0));
  pointer-events:none;
}

.qrref-printer-top::before{animation:qrrecPrinterSweepV21 3.45s ease-in-out infinite!important}
.qrref-printer-top::after{animation:qrrecHeadFlashV21 3.45s ease-in-out infinite!important}
.qrref-slot::after{animation:qrrecSlotScanV21 1.7s linear infinite!important}

@keyframes qrrecScanV21{
  0%{transform:translateY(3px);opacity:.34}
  9%{opacity:1}
  50%{transform:translateY(158px);opacity:1}
  91%{opacity:1}
  100%{transform:translateY(3px);opacity:.34}
}
@keyframes qrrecChipPaidV21{
  0%,27%{opacity:0;transform:translate(-10px,7px) scale(.96)}
  38%,54%{opacity:1;transform:none}
  66%,100%{opacity:0;transform:translate(28px,30px) scale(.98)}
}
@keyframes qrrecChipPhotoV21{
  0%,36%{opacity:0;transform:translate(-10px,7px) scale(.96)}
  47%,68%{opacity:1;transform:none}
  81%,100%{opacity:0;transform:translate(42px,31px) scale(.98)}
}
@keyframes qrrecChipNotesV21{
  0%,45%{opacity:0;transform:translate(-8px,4px) scale(.96)}
  56%,73%{opacity:.62;transform:none}
  83%,100%{opacity:0;transform:translate(45px,26px) scale(.98)}
}
@keyframes qrrecPaperV21{
  0%,39%{opacity:0;transform:translateX(-50%) translateY(-60px)}
  50%{opacity:1;transform:translateX(-50%) translateY(-48px)}
  69%,88%{opacity:1;transform:translateX(-50%) translateY(7px)}
  100%{opacity:0;transform:translateX(-50%) translateY(20px)}
}
@keyframes qrrecPrintLedV21{
  0%,100%{opacity:.55;box-shadow:0 0 7px rgba(233,20,112,.42)}
  50%{opacity:1;box-shadow:0 0 16px rgba(233,20,112,.92)}
}
@keyframes qrrecPrinterSweepV21{
  0%,19%{left:-34%;opacity:0}
  28%{opacity:.28}
  40%{opacity:.95}
  56%{left:94%;opacity:0}
  100%{left:94%;opacity:0}
}
@keyframes qrrecHeadFlashV21{
  0%,21%,100%{opacity:0;transform:scaleX(.72)}
  30%{opacity:.26}
  38%{opacity:.9;transform:scaleX(1)}
  48%{opacity:.12;transform:scaleX(.9)}
}
@keyframes qrrecSlotScanV21{
  0%{left:-18%;opacity:.08}
  10%{opacity:1}
  52%{left:92%;opacity:1}
  62%,100%{left:92%;opacity:0}
}

@media(max-width:700px){
  .qrref-stage{min-height:475px!important}
  .qrref-phone{left:10px!important;top:18px!important;width:218px!important;height:296px!important}
  .qrref-qrbox{height:192px!important}
  .qrref-delete-card{right:48px!important;top:67px!important;width:150px!important}
  .qrref-auto-badge{right:12px!important;top:10px!important}
  .chip-paid{left:188px!important;top:221px!important}
  .chip-photo{left:232px!important;top:221px!important}
  .chip-notes{left:272px!important;top:200px!important}
  .qrref-printer{right:0!important;width:310px!important;height:246px!important}
  .qrref-output-paper{width:148px!important;height:115px!important;top:116px!important}
}