:root{--green:#16c45b;--green-dark:#0fa84b;--text:#121826;--muted:#667085;--border:#e2e7ee;--page:#f6f8fb}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;background:radial-gradient(circle at top left,rgba(22,196,91,.04),transparent 28%),var(--page);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
.app-shell{max-width:1480px;padding:24px}
.app-card{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 3px 14px rgba(16,24,40,.05)}
.section-title{margin:0 0 24px;font-size:17px;font-weight:750}
.form-label{margin-bottom:8px;font-size:12.5px;font-weight:700}
.optional,.form-text,.character-counter{color:var(--muted);font-weight:500}
.form-text,.character-counter{font-size:11.5px}
.form-control{min-height:42px;border-color:#dce2ea;border-radius:7px;padding:10px 13px;font-size:13px;color:#253047}
.form-control:focus{border-color:#66d993;box-shadow:0 0 0 .2rem rgba(22,196,91,.12)}
textarea.form-control{min-height:96px;resize:vertical}
.phone-field{position:relative;display:flex}
.country-trigger{display:flex;align-items:center;gap:8px;min-width:112px;padding:0 11px;border:1px solid #dce2ea;border-right:0;border-radius:7px 0 0 7px;background:#fff;color:#344054;font-size:13px}
.country-trigger img{width:25px;height:17px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.country-trigger i{margin-left:auto;font-size:10px}
.phone-input{border-radius:0 7px 7px 0}
.country-popover{position:absolute;z-index:50;top:48px;left:0;width:min(370px,calc(100vw - 48px));padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:0 18px 45px rgba(16,24,40,.16);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s ease}
.country-popover.show{opacity:1;visibility:visible;transform:translateY(0)}
.country-search{display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #dce2ea;border-radius:7px}
.country-search i{color:#98a2b3}
.country-search input{width:100%;height:40px;border:0;outline:0;font-size:13px}
.country-list{max-height:290px;margin-top:8px;overflow:auto}
.country-item{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:#fff;text-align:left;font-size:13px}
.country-item:hover,.country-item.active{background:#f0fbf5}
.country-item img{width:26px;height:18px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.country-dial{color:#667085}
.mini-label{display:block;margin-bottom:6px;font-size:11px;color:#475467}
.color-field{display:flex;align-items:center;min-height:42px;padding:5px 8px;border:1px solid #dce2ea;border-radius:7px;background:#fff}
.color-field input[type=color]{width:25px;height:25px;padding:0;border:0;background:transparent;cursor:pointer}
.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-field input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.color-field input[type=text]{width:100%;min-width:0;padding:0 8px;border:0;outline:0;background:transparent;color:#344054;font-size:12px;text-transform:uppercase}
.upload-box{display:flex;align-items:center;gap:11px;min-height:58px;padding:10px 12px;border:1px dashed #cbd5e1;border-radius:8px;background:#fbfcfe;cursor:pointer;transition:.2s}
.upload-box:hover{border-color:var(--green);background:#f4fff8}
.upload-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:7px;background:#eafaf0;color:var(--green-dark)}
.upload-box strong,.upload-box small{display:block}
.upload-box strong{font-size:12px}.upload-box small{margin-top:2px;color:var(--muted);font-size:10.5px}
.size-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.size-selector label{display:flex;min-height:61px;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e0e5ec;border-radius:7px;background:#f9fafb;color:#344054;cursor:pointer}
.size-selector label strong{font-size:12px;font-weight:500}.size-selector label span{font-size:10.5px;color:#667085}
.btn-check:checked+label{border-color:var(--green);background:#f1fff6;color:var(--green-dark)}
.btn-check:checked+label span{color:var(--green-dark)}
.generate-button{min-height:43px;border:0;border-radius:7px;background:linear-gradient(90deg,#11b853,#18c960);font-size:13px;font-weight:650}
.preview-stage{display:flex;align-items:center;justify-content:center;min-height:350px}
.qr-container{display:grid;place-items:center;width:322px;height:322px;padding:28px;overflow:hidden;border:1px solid #dfe5ec;border-radius:12px;background:#fff}
.qr-container canvas,.qr-container svg{display:block;max-width:100%;max-height:100%}
.info-box{display:flex;gap:15px;max-width:650px;margin:16px auto 0;padding:18px 20px;border:1px solid #ccefd9;border-radius:8px;background:linear-gradient(90deg,#f0fbf5,#f7fdf9)}
.info-box>i{color:#0aa548;font-size:18px}.info-box h3{margin:0 0 5px;font-size:13px;font-weight:750}.info-box p{margin:0;color:#536176;font-size:12px;line-height:1.7}
.action-row{max-width:580px;margin:22px auto 0}.action-button{min-height:43px;border-radius:7px;font-size:13px;font-weight:650}.action-button i{margin-right:8px}
.status-message{min-height:23px;margin-top:12px;text-align:center;color:#667085;font-size:12px}
.dropdown-item i{margin-right:8px;color:var(--green-dark)}
@media(min-width:1200px){.app-shell{min-height:100vh;display:flex;align-items:center}.app-shell>.row{width:100%}}
@media(max-width:575.98px){.app-shell{padding:12px}.card-body{padding:18px!important}.section-title{margin-bottom:20px}.country-trigger{min-width:105px}.qr-container{width:min(100%,290px);height:auto;aspect-ratio:1;padding:22px}.preview-stage{min-height:315px}.info-box{padding:15px}.size-selector{gap:7px}}