/* v18.114 — invitation studio visual parity with the approved mock.
   Only the editor and actual style/backdrop choices are affected.
   The exact QR, canvas, current event ID, saved invitation payload and
   download/share code are never replaced, overlaid or intercepted. */
#qrDesignerModal:not(.hidden){
 background:rgba(36,26,15,.66)!important;
 backdrop-filter:blur(5px);
 -webkit-backdrop-filter:blur(5px);
}
#qrDesignerModal .qr-designer-card.invite-clean-editor{
 background:linear-gradient(145deg,#fffdf8 0%,#fbf5ea 67%,#f7ecdb 100%)!important;
 border:1px solid #ddcaa9!important;
 border-radius:22px!important;
 box-shadow:0 18px 55px rgba(32,24,15,.23)!important;
 color:#392a1b!important;
 overflow-x:hidden;
}
#qrDesignerModal .qr-designer-head.invite-clean-head{
 background:linear-gradient(130deg,#fffcf5,#f6e9d5)!important;
 border-bottom:1px solid #e5d5b9!important;
 padding:19px clamp(15px,3vw,29px)!important;
 gap:13px!important;
}
#qrDesignerModal .qr-designer-head h2{
 font:600 clamp(28px,5vw,38px)/1.1 Georgia,'Times New Roman',serif!important;
 color:#39291b!important;
 letter-spacing:-.035em!important;
 margin:5px 0 6px!important;
}
#qrDesignerModal .qr-designer-head .micro{
 font-size:12px;color:#756250!important;
 line-height:1.45;
}
#qrDesignerModal .premium-kicker{
 color:#96702e!important;
 font-size:10px!important;
 letter-spacing:.14em!important;
}
#qrDesignerModal .qr-designer-grid.invite-clean-grid{
 gap:clamp(11px,2vw,24px)!important;
 padding:clamp(10px,2vw,20px)!important;
 min-width:0;
}
#qrDesignerModal .premium-preview-column{
 min-width:0;
 background:linear-gradient(145deg,#efe5d2,#fbf7f0);
 border:1px solid #e1d1b5;
 border-radius:19px!important;
 padding:clamp(10px,2vw,18px)!important;
 box-shadow:inset 0 1px 1px #fff;
}
#qrDesignerModal .qr-card-preview-shell{
 border-radius:16px!important;
 background:transparent!important;
 padding:0!important;
}
#qrDesignerModal #qrCardPreviewExact{
 width:100%;
 max-width:100%;
 height:auto;
 object-fit:contain!important;
 filter:none!important;
 transform:none!important;
}
#qrDesignerModal #qrCardPreview{
 border-radius:12px!important;
 overflow:hidden;
 box-shadow:0 12px 32px rgba(49,35,18,.13)!important;
}
#qrDesignerModal .invite-preview-hint{
 display:block;
 padding:12px 0 1px!important;
 font-size:11px;
 color:#7c684f!important;
 text-align:center;
}
#qrDesignerModal .qr-designer-controls{
 background:#fffdf9!important;
 border:1px solid #e8d9c3!important;
 border-radius:19px!important;
 padding:clamp(10px,2vw,20px)!important;
 min-width:0;
 box-shadow:0 7px 21px rgba(73,52,24,.06)!important;
}
#qrDesignerModal .invite-tool-dock{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 border-radius:14px!important;
 gap:5px!important;
 padding:5px!important;
 background:#f6ecda!important;
 border:1px solid #e4d4ba!important;
}
#qrDesignerModal .invite-tool-btn{
 display:flex;align-items:center;justify-content:center;
 flex-direction:column;gap:4px;
 min-width:0;min-height:54px!important;
 border-radius:11px!important;
 color:#6a5133!important;
 background:transparent!important;
}
#qrDesignerModal .invite-tool-btn.active{
 background:#fffdf8!important;
 border:1px solid #cda969!important;
 box-shadow:0 4px 12px rgba(84,59,29,.09)!important;
 color:#6b471e!important;
}
#qrDesignerModal .invite-tool-btn b{font-size:11px}
#qrDesignerModal .invite-panel-head h3{
 font:600 25px/1.12 Georgia,serif!important;
 color:#3a2a1b!important;
 margin:5px 0!important;
}
#qrDesignerModal .invite-option-group{
 padding:13px 0!important;
 border-bottom:1px solid #eee4d3!important;
}
#qrDesignerModal .invite-option-label{
 align-items:baseline;
 margin:0 0 9px!important;
}
#qrDesignerModal .invite-option-label b{font-size:13px!important;color:#47331c!important}
#qrDesignerModal .invite-option-label small{font-size:10px!important;color:#84705b!important}
#qrDesignerModal .qr-template-grid{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:9px!important;
 padding:0!important;
 overflow:visible!important;
}
#qrDesignerModal .qr-template-choice{
 position:relative;
 display:flex!important;flex-direction:column;
 align-items:center;justify-content:flex-end;
 padding:100px 6px 11px!important;
 min-width:0!important;min-height:147px!important;
 height:auto!important;
 gap:4px;
 background:#fffdf8!important;
 border:1px solid #e7d9c2!important;
 border-radius:13px!important;
 font-size:12px!important;font-weight:800!important;
 color:#493820!important;
 box-shadow:0 3px 10px rgba(59,41,18,.045)!important;
 text-align:center;
 overflow:hidden;
}
#qrDesignerModal .qr-template-choice::before{
 content:"✦\A Picorae\A ♡";
 white-space:pre;
 position:absolute;
 inset:8px 8px 53px;
 display:flex;align-items:center;justify-content:center;
 text-align:center;
 font:italic 600 clamp(12px,2vw,17px)/1.45 Georgia,serif;
 color:#8e662e;
 border-radius:8px;
 border:1px solid #e3cbab;
 background:linear-gradient(150deg,#fffcf5,#f7e9d3,#fffcf7);
}
#qrDesignerModal .qr-template-choice::after{
 content:"";position:absolute;
 top:13px;left:50%;transform:translateX(-50%);
 width:60%;height:3px;
 border-radius:5px;
 background:linear-gradient(90deg,transparent,#bc8f50,transparent);
}
#qrDesignerModal .qr-template-choice.plain::before{
 content:"Picorae\A ✧";background:#fff!important;border-color:#e2e1dd;color:#5d5347;
}
#qrDesignerModal .qr-template-choice.elegant::before{
 content:"✿\A Picorae\A ✿";
 background:radial-gradient(circle at 12% 18%,#f1aeba 0 5px,transparent 6px),radial-gradient(circle at 78% 75%,#e8a0a8 0 6px,transparent 7px),linear-gradient(150deg,#fff6f2,#f8e3e3)!important;
 border-color:#eabfc0;color:#8b5264;
}
#qrDesignerModal .qr-template-choice.modern::before{
 content:"PICORAE\A ◆";
 background:linear-gradient(135deg,#f5f5f2,#e7eae8)!important;
 border-color:#c8d1d2;color:#233b52;
 font-style:normal;letter-spacing:.12em;
}
#qrDesignerModal .qr-template-choice.celebration::before{
 content:"✦\A Picorae\A ✧";
 background:radial-gradient(circle at 84% 18%,#cfb2e9 0 5px,transparent 6px),radial-gradient(circle at 19% 79%,#caa4dd 0 6px,transparent 7px),linear-gradient(150deg,#fff7f4,#eee2f7)!important;
 border-color:#d8bddf;color:#7b4b93;
}
#qrDesignerModal .qr-template-choice small{
 font-size:9px!important;line-height:1.3;
 color:#776752!important;
 font-weight:500!important;
}
#qrDesignerModal .qr-template-choice.active,
#qrDesignerModal .qr-template-choice.selected,
#qrDesignerModal .qr-template-choice[aria-pressed="true"]{
 border-color:#aa7b39!important;
 box-shadow:inset 0 0 0 1px #ac7e3e,0 6px 18px rgba(84,58,23,.1)!important;
 background:#fffbf1!important;
}
#qrDesignerModal .qr-bg-grid{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:7px!important;
 overflow:visible!important;
}
#qrDesignerModal .qr-bg-choice{
 display:flex;flex-direction:column;align-items:center;
 justify-content:space-between;
 gap:5px;padding:6px 4px 9px!important;
 min-width:0;min-height:105px!important;
 height:auto!important;
 border:1px solid #e6d6bf!important;
 border-radius:12px!important;
 background:#fffdf9!important;
 color:#584b39!important;
 font-size:11px!important;
}
#qrDesignerModal .qr-bg-choice::before{
 content:"";display:block;
 min-height:51px;width:100%;
 border-radius:7px;
 border:1px solid rgba(126,102,68,.14);
 background:linear-gradient(135deg,#fffdf8,#ecdfc8);
}
#qrDesignerModal .qr-bg-choice.blossom::before{
 background:radial-gradient(circle at 20% 25%,#eeb9ac 0 7px,transparent 8px),radial-gradient(circle at 75% 80%,#9bbd88 0 9px,transparent 10px),#fff7ed;
}
#qrDesignerModal .qr-bg-choice.ivory::before{
 background:linear-gradient(135deg,#ead8b6,#fffdf2 14% 86%,#cfb783);
}
#qrDesignerModal .qr-bg-choice.luxe::before{
 background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(159,111,44,.18) 12px 13px),#fdf8ec;
}
#qrDesignerModal .qr-bg-choice.romance::before{
 background:radial-gradient(circle at 17% 80%,#f0abb8 0 9px,transparent 10px),radial-gradient(circle at 75% 17%,#eab4b8 0 9px,transparent 10px),#ffeced;
}
#qrDesignerModal .qr-bg-choice.celebration::before{
 background:radial-gradient(circle at 65% 15%,#dfbdf0 0 6px,transparent 7px),radial-gradient(circle at 30% 70%,#f0c272 0 7px,transparent 8px),#fff7e6;
}
#qrDesignerModal .qr-bg-choice.executive::before{
 background:linear-gradient(120deg,#1d3547,#40586a 65%,#bd984a 66% 69%,#263e54 70%);
}
#qrDesignerModal .qr-bg-choice.photo::before{
 background:linear-gradient(135deg,#a9b3a2,#dacabb,#b7a79b);
}
#qrDesignerModal .qr-bg-choice small{
 font-size:9px!important;line-height:1.3!important;
 color:#806e57!important;
}
#qrDesignerModal .qr-format-row .qr-format-btn{
 min-height:44px;border-radius:11px;
 background:#fffdfa;
 border:1px solid #d9c39f;
}
#qrDesignerModal .qr-sticky-actions{
 background:linear-gradient(0deg,#fffdfa,#faf3e7)!important;
 border-top:1px solid #e7d8c0!important;
 border-radius:0 0 18px 18px!important;
 padding:12px 7px!important;
}
#qrDesignerModal .qr-sticky-actions .btn.primary{
 min-height:46px;
 border-radius:11px;
 color:#fffaf1!important;
 background:linear-gradient(120deg,#a47635,#c0964d,#93662c)!important;
 border:1px solid #ad7e3c!important;
 box-shadow:0 5px 14px rgba(109,77,28,.13)!important;
}
#qrDesignerModal :is(button,input,textarea,select,.qr-card-preview-shell):focus-visible{
 outline:3px solid #8c662c!important;outline-offset:2px!important;
}
@media(max-width:700px){
 #qrDesignerModal .qr-designer-card.invite-clean-editor{
  border-radius:16px 16px 0 0!important;
 }
 #qrDesignerModal .qr-designer-grid.invite-clean-grid{
  grid-template-columns:minmax(0,1fr)!important;
  padding:10px!important;
 }
 #qrDesignerModal .premium-preview-column{
  padding:10px!important;
 }
 #qrDesignerModal .qr-template-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
 }
 #qrDesignerModal .qr-template-choice{
  min-height:133px!important;padding-top:89px!important;
 }
 #qrDesignerModal .qr-template-choice::before{inset:7px 6px 48px}
 #qrDesignerModal .qr-bg-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }
}
@media(max-width:370px){
 #qrDesignerModal .qr-template-grid{gap:5px!important}
 #qrDesignerModal .qr-template-choice{font-size:10px!important;min-height:126px!important;padding:86px 3px 8px!important}
 #qrDesignerModal .qr-template-choice::before{inset:6px 5px 44px;font-size:12px}
 #qrDesignerModal .qr-bg-grid{gap:4px!important}
 #qrDesignerModal .qr-bg-choice{font-size:9px!important;min-height:96px!important}
}
@media(prefers-reduced-motion:reduce){
 #qrDesignerModal *{transition:none!important;animation:none!important}
}