/* QR Generator Pro feature presentation
 * Visual-only in this phase: existing actions remain fully functional.
 */
.vs-modern .vs-pro-feature{
  position:relative;
}
.vs-modern .vs-pro-feature > span:last-child::after{
  content:'PRO';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:2px 5px;
  min-height:16px;
  border:1px solid #c7d7fe;
  border-radius:999px;
  background:#eef4ff;
  color:#175cd3;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  vertical-align:middle;
}
.vs-modern .vs-pro-feature:hover > span:last-child::after{
  background:#e0ecff;
}
@media(max-width:640px){
  .vs-modern .vs-history-export .vs-pro-feature > span:last-child::after{
    font-size:8px;
    padding:2px 4px;
  }
}

.vs-modern.vs-pro-modal-open{overflow:hidden}
.vs-modern .vs-pro-modal{display:none;position:fixed;inset:0;z-index:10000}
.vs-modern .vs-pro-modal.is-open{display:flex;align-items:center;justify-content:center;padding:20px}
.vs-modern .vs-pro-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}
.vs-modern .vs-pro-modal-card{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px;border:1px solid #e4e7ec;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.22)}
.vs-modern .vs-pro-modal-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#f2f4f7;color:#475467;font-size:24px;line-height:1;cursor:pointer}
.vs-modern .vs-pro-modal-kicker{margin-bottom:7px;color:#175cd3;font-size:11px;font-weight:800;letter-spacing:.1em}
.vs-modern .vs-pro-modal-card h2{margin:0 36px 8px 0;font-size:24px;line-height:1.25}
.vs-modern .vs-pro-modal-intro{margin:0 0 18px;color:#667085;line-height:1.55}
.vs-modern .vs-pro-modal-features{display:grid;gap:10px;margin-bottom:18px}
.vs-modern .vs-pro-modal-features>div{display:flex;gap:12px;padding:13px;border:1px solid #eaecf0;border-radius:12px;background:#fcfcfd}
.vs-modern .vs-pro-modal-icon{display:flex;flex:0 0 34px;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;background:#eef4ff;color:#175cd3;font-weight:800}
.vs-modern .vs-pro-modal-features strong{display:block;margin-bottom:3px;color:#101828}
.vs-modern .vs-pro-modal-features p{margin:0;color:#667085;font-size:13px;line-height:1.45}
.vs-modern .vs-pro-license-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.vs-modern .vs-pro-license-heading strong{color:#101828;font-size:13px}
.vs-modern .vs-pro-license-heading span{color:#98a2b3;font-size:11px}
.vs-modern .vs-pro-license-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.vs-modern .vs-pro-license-actions .vs-btn{margin:0}
.vs-modern .vs-pro-license-note{margin-top:8px;color:#98a2b3;font-size:11px}
@media(max-width:640px){
  .vs-modern .vs-pro-modal-card{padding:24px 18px;border-radius:16px}
  .vs-modern .vs-pro-modal-card h2{font-size:21px}
  .vs-modern .vs-pro-license-actions{align-items:flex-start}
  .vs-modern .vs-pro-license-actions .vs-btn{flex:1 1 auto}
  .vs-modern .vs-pro-license-actions .vs-btn-primary{min-width:180px}
}

/* Free / Pro positioning section */
.vs-modern .vs-pro-plan-intro{margin:6px 0 0;color:#667085;line-height:1.55;font-size:13px}
.vs-modern .vs-pro-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.vs-modern .vs-plan-card{padding:18px;border:1px solid #eaecf0;border-radius:14px;background:#fff}
.vs-modern .vs-plan-card-pro{border-color:#c7d7fe;background:#f8fbff}
.vs-modern .vs-plan-label{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:10px;font-weight:800;letter-spacing:.08em}
.vs-modern .vs-plan-card-pro .vs-plan-label{background:#eef4ff;color:#175cd3}
.vs-modern .vs-plan-card h3{margin:10px 0 12px;color:#101828;font-size:17px}
.vs-modern .vs-plan-cta{width:100%;margin-top:16px;justify-content:center}
.vs-modern .vs-plan-card-pro{box-shadow:0 8px 24px rgba(23,92,211,.08)}
.vs-modern .vs-plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vs-modern .vs-plan-card li{display:flex;gap:8px;align-items:flex-start;color:#475467;font-size:13px;line-height:1.4}
.vs-modern .vs-plan-card li>span{flex:0 0 16px;color:#12b76a;font-weight:800;text-align:center}
.vs-modern .vs-plan-card li em{margin-left:auto;color:#98a2b3;font-size:10px;font-style:normal;white-space:nowrap}
.vs-modern .vs-pro-plan-note{margin-top:14px;color:#98a2b3;font-size:11px;line-height:1.45}
@media(max-width:640px){.vs-modern .vs-pro-plan-grid{grid-template-columns:1fr}.vs-modern .vs-pro-plan-intro{font-size:12px}}


/* Excel import preview */
.vs-modern.vs-import-preview-open{overflow:hidden}
.vs-modern .vs-import-preview-modal{display:none;position:fixed;inset:0;z-index:10001}
.vs-modern .vs-import-preview-modal.is-open{display:flex;align-items:center;justify-content:center;padding:20px}
.vs-modern .vs-import-preview-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}
.vs-modern .vs-import-preview-card{position:relative;width:min(860px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;padding:28px;border:1px solid #e4e7ec;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.22)}
.vs-modern .vs-import-preview-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#f2f4f7;color:#475467;font-size:24px;line-height:1;cursor:pointer}
.vs-modern .vs-import-preview-kicker{margin-bottom:7px;color:#175cd3;font-size:11px;font-weight:800;letter-spacing:.1em}
.vs-modern .vs-import-preview-card h2{margin:0 40px 7px 0;color:#101828;font-size:23px;line-height:1.25}
.vs-modern .vs-import-preview-intro{margin:0 0 18px;color:#667085;font-size:13px;line-height:1.5}
.vs-modern .vs-import-preview-table-wrap{min-height:0;overflow:auto;border:1px solid #eaecf0;border-radius:11px}
.vs-modern .vs-import-preview-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.vs-modern .vs-import-preview-table th{position:sticky;top:0;background:#f8fafc;color:#475467;font-size:11px;font-weight:700;text-align:left;padding:10px;border-bottom:1px solid #eaecf0;z-index:1}
.vs-modern .vs-import-preview-table td{padding:10px;border-bottom:1px solid #f2f4f7;color:#344054;vertical-align:middle}
.vs-modern .vs-import-preview-table tr:last-child td{border-bottom:0}
.vs-modern .vs-import-preview-table th:nth-child(1),.vs-modern .vs-import-preview-table td:nth-child(1){width:58px;text-align:center}
.vs-modern .vs-import-preview-table th:nth-child(2),.vs-modern .vs-import-preview-table td:nth-child(2){width:125px}
.vs-modern .vs-import-preview-table th:nth-child(4),.vs-modern .vs-import-preview-table td:nth-child(4){width:150px}
.vs-modern .vs-import-preview-table td:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-modern .vs-import-preview-table tr.is-valid td:last-child{color:#027a48}
.vs-modern .vs-import-preview-table tr.is-skipped{background:#fffcf5}
.vs-modern .vs-import-preview-table tr.is-skipped td:last-child{color:#b54708}
.vs-modern .vs-import-preview-status{font-weight:600}
.vs-modern .vs-import-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.vs-modern .vs-import-preview-footer>span{color:#98a2b3;font-size:11px}
.vs-modern .vs-import-preview-actions{display:flex;gap:8px;flex:0 0 auto}
.vs-modern .vs-import-preview-actions .vs-btn{margin:0}
@media(max-width:640px){
  .vs-modern .vs-import-preview-modal.is-open{padding:10px}
  .vs-modern .vs-import-preview-card{max-height:calc(100vh - 20px);padding:22px 14px;border-radius:15px}
  .vs-modern .vs-import-preview-card h2{font-size:20px}
  .vs-modern .vs-import-preview-table th:nth-child(2),.vs-modern .vs-import-preview-table td:nth-child(2){width:95px}
  .vs-modern .vs-import-preview-table th:nth-child(4),.vs-modern .vs-import-preview-table td:nth-child(4){width:118px}
  .vs-modern .vs-import-preview-footer{align-items:stretch;flex-direction:column}
  .vs-modern .vs-import-preview-actions{width:100%}
  .vs-modern .vs-import-preview-actions .vs-btn{flex:1}
}

.vs-pro-license{margin-top:18px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc}
.vs-pro-license label{display:block;margin-bottom:7px;font-weight:600}
#vsProLicenseInput{width:100%;min-height:76px;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;resize:vertical;font-family:monospace;font-size:12px;background:#fff}
.vs-pro-license-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.vs-pro-license-status{min-height:20px;margin-top:8px;font-size:13px;color:#4b5563}

.vs-modern .vs-pro-license{margin-bottom:20px}
.vs-modern .vs-pro-license .vs-field{margin-bottom:12px}
.vs-modern .vs-pro-license input[type="email"]{width:100%;min-height:42px;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
.vs-modern .vs-pro-modal-actions{padding-top:18px;border-top:1px solid #eaecf0}

/* Pro pricing */
.vs-modern .vs-plan-pricing{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.vs-modern .vs-plan-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 11px;border:1px solid #eaecf0;border-radius:10px;background:#fff;color:#101828}
.vs-modern .vs-plan-price strong{font-size:21px;line-height:1.15}
.vs-modern .vs-plan-price span{color:#667085;font-size:11px}
.vs-modern .vs-plan-price-annual{background:#eef4ff;border-color:#c7d7fe}
.vs-modern .vs-plan-price-annual strong{font-size:21px;color:#175cd3}
.vs-modern .vs-plan-price-annual em{margin-top:2px;color:#175cd3;font-size:10px;font-style:normal;font-weight:700}
.vs-modern .vs-plan-cta-note{margin-top:7px;color:#98a2b3;font-size:10px;line-height:1.4;text-align:center}
.vs-modern .vs-payment-license-link{display:block;margin:12px auto 0;border:0;background:none;color:#175cd3;font-size:12px;font-weight:650;cursor:pointer}
.vs-modern .vs-payment-license-link:hover{text-decoration:underline}
.vs-modern .vs-modal-pricing{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}
.vs-modern .vs-modal-pricing>div{padding:10px 12px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}
.vs-modern .vs-modal-pricing strong{font-size:18px;color:#101828}
.vs-modern .vs-modal-pricing span{margin-left:4px;color:#667085;font-size:11px}
.vs-modern .vs-modal-pricing em{display:block;margin-top:3px;color:#175cd3;font-size:10px;font-style:normal;font-weight:700}
@media(max-width:640px){.vs-modern .vs-modal-pricing{grid-template-columns:1fr}.vs-modern .vs-plan-pricing{grid-template-columns:1fr 1fr}.vs-modern .vs-plan-price strong{font-size:19px}.vs-modern .vs-pro-license-heading{display:block}.vs-modern .vs-pro-license-heading span{display:block;margin-top:3px}}


/* Manual Pro payment */
.vs-modern.vs-payment-modal-open{overflow:hidden}
.vs-modern .vs-payment-modal{display:none;position:fixed;inset:0;z-index:10002}
.vs-modern .vs-payment-modal.is-open{display:flex;align-items:center;justify-content:center;padding:20px}
.vs-modern .vs-payment-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52)}
.vs-modern .vs-payment-modal-card{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px;border:1px solid #e4e7ec;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.24)}
.vs-modern .vs-payment-modal-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#f2f4f7;color:#475467;font-size:24px;line-height:1;cursor:pointer}
.vs-modern .vs-payment-modal-kicker{margin-bottom:7px;color:#175cd3;font-size:11px;font-weight:800;letter-spacing:.1em}
.vs-modern .vs-payment-modal-card h2{margin:0 40px 8px 0;font-size:24px;line-height:1.25}
.vs-modern .vs-payment-modal-intro{margin:0 0 18px;color:#667085;line-height:1.55}
.vs-modern .vs-payment-plan,.vs-modern .vs-payment-email{margin-bottom:13px}
.vs-modern .vs-payment-plan label,.vs-modern .vs-payment-email label{display:block;margin-bottom:6px;font-weight:600;color:#344054}
.vs-modern .vs-payment-plan select,.vs-modern .vs-payment-email input{width:100%;min-height:42px;padding:9px 11px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
.vs-modern .vs-payment-email small{display:block;margin-top:5px;color:#98a2b3;font-size:11px}
.vs-modern .vs-payment-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;margin-top:18px;padding:16px;border:1px solid #eaecf0;border-radius:14px;background:#f8fafc}
.vs-modern .vs-payment-qr-wrap{text-align:center}
.vs-modern .vs-payment-qr-wrap img{display:block;width:240px;max-width:100%;height:auto;margin:0 auto;border-radius:10px;background:#fff}
.vs-modern .vs-payment-qr-caption{margin-top:7px;color:#667085;font-size:11px}
.vs-modern .vs-payment-details{display:grid;align-content:start;gap:8px}
.vs-modern .vs-payment-detail{display:flex;justify-content:space-between;gap:14px;padding:9px 10px;border-radius:8px;background:#fff}
.vs-modern .vs-payment-detail span{color:#667085;font-size:12px}
.vs-modern .vs-payment-detail strong{text-align:right;color:#101828;font-size:13px;word-break:break-word}
.vs-modern .vs-payment-copy{width:100%;margin-top:2px;justify-content:center}
.vs-modern .vs-payment-copy-status{min-height:16px;color:#027a48;font-size:11px}
.vs-modern .vs-payment-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.vs-modern .vs-payment-steps>div{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid #eaecf0;border-radius:10px}
.vs-modern .vs-payment-steps b{display:flex;flex:0 0 22px;width:22px;height:22px;align-items:center;justify-content:center;border-radius:50%;background:#eef4ff;color:#175cd3;font-size:11px}
.vs-modern .vs-payment-steps span{color:#475467;font-size:11px;line-height:1.4}
.vs-modern .vs-payment-status{min-height:20px;margin-top:12px;color:#027a48;font-size:12px;line-height:1.5}
.vs-modern .vs-payment-actions{display:flex;justify-content:flex-end;margin-top:8px}
.vs-modern .vs-payment-actions .vs-btn{margin:0}
.vs-modern .vs-payment-note{margin-top:10px;color:#98a2b3;font-size:10px;line-height:1.4}
@media(max-width:640px){
  .vs-modern .vs-payment-modal.is-open{padding:10px}
  .vs-modern .vs-payment-modal-card{max-height:calc(100vh - 20px);padding:22px 14px;border-radius:15px}
  .vs-modern .vs-payment-modal-card h2{font-size:21px}
  .vs-modern .vs-payment-layout{grid-template-columns:1fr;padding:12px}
  .vs-modern .vs-payment-qr-wrap img{width:min(300px,100%)}
  .vs-modern .vs-payment-steps{grid-template-columns:1fr}
  .vs-modern .vs-payment-actions .vs-btn{width:100%}
}

/* Payment flow hierarchy */
.vs-modern .vs-payment-plan,.vs-modern .vs-payment-email{padding:12px 14px;border:1px solid #eaecf0;border-radius:10px;background:#fff}
.vs-modern .vs-payment-plan{margin-bottom:8px}
.vs-modern .vs-payment-email{margin-bottom:0}
.vs-modern .vs-payment-plan label,.vs-modern .vs-payment-email label{font-size:13px}
.vs-modern .vs-payment-layout{margin-top:12px}


/* Pro modal: purchase first, license as secondary path */
.vs-modern .vs-pro-modal-pricing{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.vs-modern .vs-pro-modal-pricing>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 11px;border:1px solid #eaecf0;border-radius:10px;background:#fff}
.vs-modern .vs-pro-modal-pricing strong{font-size:21px;line-height:1.15}
.vs-modern .vs-pro-modal-pricing span{color:#667085;font-size:11px}
.vs-modern .vs-pro-modal-pricing>div:last-child{background:#eef4ff;border-color:#c7d7fe}
.vs-modern .vs-pro-modal-pricing>div:last-child strong,.vs-modern .vs-pro-modal-pricing em{color:#175cd3}
.vs-modern .vs-pro-modal-pricing em{margin-top:2px;font-size:10px;font-style:normal;font-weight:700}
.vs-modern .vs-pro-upgrade-cta{width:100%;min-height:44px}
.vs-modern .vs-pro-upgrade-note{text-align:center;margin:7px 0 0;color:#98a2b3;font-size:10px}
.vs-modern .vs-pro-license-link,.vs-modern .vs-pro-back-link{display:block;margin:14px auto 0;border:0;background:none;color:#175cd3;font-size:12px;font-weight:650;cursor:pointer}
.vs-modern .vs-pro-license-link:hover,.vs-modern .vs-pro-back-link:hover{text-decoration:underline}
.vs-modern #vsProLicenseView .vs-pro-license{margin-top:0}
.vs-modern .vs-pro-license-explanation{margin-top:10px;color:#98a2b3;font-size:11px;line-height:1.45}
@media(max-width:640px){.vs-modern .vs-pro-modal-pricing{grid-template-columns:1fr 1fr}}