/* ═══════════════════════════════════════════════════════════════
   MMT QR Pro — Frontend v3.5.0 — "Prismatic Dark" Redesign
   Fonts: Bricolage Grotesque (display) · Outfit (body) · JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.mmt-qr-wrap {
  --bg:#05050a; --s1:#0a0a12; --s2:#0f0f1a; --s3:#141420; --s4:#1a1a28;
  --border:#1e1e2e; --border2:#282840; --border3:#323255;
  --text:#f0f0fa; --text2:#c8c8e0; --muted:#5a5a80; --muted2:#8080a8;
  --em:#00ff88; --em-d:#00cc6a; --em-dd:#009950;
  --violet:#a78bfa; --cyan:#22d3ee; --amber:#fbbf24; --rose:#fb7185;
  --glow-em:rgba(0,255,136,0.15); --glow-violet:rgba(167,139,250,0.15);
  --glow-cyan:rgba(34,211,238,0.12); --glow-amber:rgba(251,191,36,0.15);
  --glass-bg:rgba(15,15,26,0.7); --glass-border:rgba(255,255,255,0.06); --glass-blur:20px;
  --fd:'Bricolage Grotesque',sans-serif;
  --fb:'Outfit',sans-serif;
  --fm:'JetBrains Mono',monospace;
  --r:18px; --rs:12px;

  /* ── Backward-compat aliases (used in PHP inline styles) ── */
  --surface:  var(--s2);
  --surface2: var(--s3);
  --accent:   var(--em);
  --warm:     var(--amber);

  font-family:var(--fb); -webkit-font-smoothing:antialiased; color:var(--text); background:var(--bg);
}
.mmt-qr-wrap,.mmt-qr-wrap *,.mmt-qr-wrap *::before,.mmt-qr-wrap *::after{box-sizing:border-box;}
.mmt-qr-wrap a{text-decoration:none;color:inherit;}
.mmt-qr-wrap .file-input{padding:10px;background:var(--s1);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--fb);font-size:14px;width:100%;}
.mmt-qr-wrap .file-input::-webkit-file-upload-button{padding:8px 16px;background:var(--em);color:#05050a;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:var(--fb);margin-right:12px;}

/* NAV */
.page-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--s1);}
.page-tab{padding:15px 30px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:transparent;font-family:var(--fb);border-bottom:2px solid transparent;transition:all .2s;display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.page-tab:hover{color:var(--text2);}
.page-tab.active{color:var(--em);border-bottom-color:var(--em);}
.page-section{display:none;} .page-section.active{display:block;}

/* ── HERO ── */
.qr-hero{position:relative;max-width:1320px;margin:0 auto;padding:64px 48px 72px;overflow:hidden;}
.qr-orbs{position:absolute;inset:0;pointer-events:none;z-index:0;}
.qr-orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbDrift 24s ease-in-out infinite;}
.qr-orb:nth-child(1){width:600px;height:600px;background:radial-gradient(circle,rgba(0,255,136,.18) 0%,transparent 65%);top:-220px;left:-120px;}
.qr-orb:nth-child(2){width:440px;height:440px;background:radial-gradient(circle,rgba(167,139,250,.14) 0%,transparent 65%);top:-60px;right:-80px;animation-delay:-8s;}
.qr-orb:nth-child(3){width:360px;height:360px;background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 65%);bottom:-80px;left:38%;animation-delay:-16s;}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-20px) scale(1.05);}66%{transform:translate(-18px,16px) scale(.96);}}
.qr-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;}

/* Hero split layout — inject via JS or PHP if not already present */
.qr-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center;max-width:1100px;margin:0 auto;}
.qr-hero-right{display:flex;justify-content:center;}

/* If old markup — keep center layout working */
.qr-hero-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.15);border-radius:100px;font-size:12px;color:var(--muted2);margin-bottom:28px;font-weight:600;}
.qr-hero-dot{display:inline-block;width:7px;height:7px;background:var(--em);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--em);animation:heroDotPulse 2.4s ease infinite;}
@keyframes heroDotPulse{0%,100%{opacity:1;box-shadow:0 0 8px var(--em);}50%{opacity:.5;box-shadow:0 0 16px var(--em);}}

.qr-hero h1{position:relative;z-index:1;font-family:var(--fd)!important;font-size:clamp(40px,5.2vw,74px)!important;font-weight:800!important;line-height:1.06!important;letter-spacing:-2.5px!important;text-transform:none!important;max-width:760px;margin:0 auto 24px;}
.hl{background:linear-gradient(135deg,var(--em) 0%,var(--cyan) 50%,var(--violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.qr-hero-sub{position:relative;z-index:1;margin:0 auto 36px;font-size:17px;color:var(--muted2);max-width:500px;line-height:1.7;}
.qr-hero-acts{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.qr-btn-p{display:inline-flex;align-items:center;gap:9px;padding:15px 34px;background:var(--em);color:#05050a;border-radius:100px;font-size:15px;font-weight:700;font-family:var(--fb);transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 28px var(--glow-em),0 0 0 1px rgba(0,255,136,.3) inset;}
.qr-btn-p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 48px var(--glow-em);}
.qr-btn-s{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;background:rgba(255,255,255,.04);color:var(--text2);border:1px solid var(--border2);border-radius:100px;font-size:15px;font-weight:500;font-family:var(--fb);transition:all .25s;backdrop-filter:blur(8px);}
.qr-btn-s:hover{border-color:var(--border3);background:rgba(255,255,255,.07);color:var(--text);}
.qr-hero-stats{position:relative;z-index:1;max-width:480px;margin:0 auto;display:flex;justify-content:center;gap:40px;}
.qr-stat-n{font-family:var(--fd)!important;font-size:32px!important;font-weight:800!important;color:var(--em)!important;letter-spacing:-1.5px!important;text-transform:none!important;line-height:1;margin-bottom:4px;}
.qr-stat-l{font-size:12px;color:var(--muted);font-weight:500;}

/* Hero preview card */
.qr-hero-preview-card{position:relative;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:28px;padding:32px 28px;backdrop-filter:blur(var(--glass-blur));box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);width:100%;max-width:380px;overflow:hidden;}
.qr-hero-preview-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,136,.6) 25%,rgba(167,139,250,.6) 50%,rgba(34,211,238,.6) 75%,transparent);}
.qr-hero-preview-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:20px;display:flex;align-items:center;gap:8px;}
.qr-hero-phone{background:linear-gradient(160deg,#12121e,#0a0a14);border:1.5px solid rgba(255,255,255,.1);border-radius:28px;padding:14px 12px 18px;margin:0 auto;max-width:200px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);}
.qr-hero-notch{width:60px;height:5px;background:var(--border2);border-radius:3px;margin:0 auto 12px;}
.qr-hero-screen{background:#fff;border-radius:14px;padding:12px;min-height:160px;display:flex;align-items:center;justify-content:center;}
.qr-hero-placeholder-gfx{display:flex;flex-direction:column;align-items:center;gap:8px;color:#ccc;}
.qr-hero-placeholder-gfx i{font-size:28px;opacity:.3;}
.qr-hero-placeholder-gfx span{font-size:10px;opacity:.4;}
.qr-hero-home-bar{width:48px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto 0;}

/* USAGE */
.usage-bar{max-width:1240px;margin:0 auto;padding:0 32px 16px;}
.usage-info{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);font-size:13px;gap:12px;}
.usage-info .usage-left{color:var(--muted);}
.usage-info .usage-left strong{color:var(--text);}
.usage-info .usage-right{display:flex;align-items:center;gap:8px;}
.usage-pill{padding:3px 12px;border-radius:100px;font-size:11px;font-weight:700;}
.usage-pill.guest{background:rgba(90,90,128,.15);color:var(--muted2);}
.usage-pill.free{background:rgba(0,255,136,.08);color:var(--em);}
.usage-pill.pro{background:linear-gradient(135deg,var(--em),var(--em-d));color:#05050a;box-shadow:0 2px 12px var(--glow-em);}

/* LAYOUT */
.qr-app{max-width:1600px;margin:0 auto;padding:0 48px 80px;display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start;}

/* QR TABS */
.qr-tabs{display:flex;gap:3px;background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:4px;margin-bottom:20px;flex-wrap:wrap;}
.qt{display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);font-size:13px;font-weight:600;color:var(--muted);border:none;background:transparent;font-family:var(--fb);}
.qt i{font-size:14px;}
.qt:hover{color:var(--text2);background:rgba(255,255,255,.04);}
.qt.active{background:var(--em);color:#05050a;box-shadow:0 4px 20px var(--glow-em);font-weight:700;}
.qt.qt-coming-soon{opacity:.4;cursor:not-allowed;position:relative;}
.qt.qt-coming-soon:hover{color:var(--muted);background:transparent;}
.qt-badge{display:inline-block;padding:1px 6px;background:var(--em);color:#05050a;border-radius:20px;font-size:9px;font-weight:800;vertical-align:middle;letter-spacing:.3px;}
.qt-badge-server{background:rgba(167,139,250,.15);color:var(--violet);border:1px solid rgba(167,139,250,.3);font-size:9px;font-weight:700;padding:1px 6px;border-radius:100px;margin-left:4px;}

/* GLASS CARD */
.qr-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r);padding:28px;margin-bottom:16px;backdrop-filter:blur(var(--glass-blur));position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s;box-shadow:0 8px 32px rgba(0,0,0,.25);}
.qr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
.qr-card:hover{border-color:rgba(255,255,255,.1);box-shadow:0 12px 48px rgba(0,0,0,.3);}
.card-title{font-size:14px;font-weight:700;margin-bottom:22px;display:flex;align-items:center;gap:9px;color:var(--text);}
.card-title i{color:var(--em);font-size:13px;}

/* FORM */
.fg{margin-bottom:16px;}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.6px;}
.fg input,.fg textarea,.fg select{width:100%;padding:12px 16px;background:rgba(5,5,10,.6);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-family:var(--fb);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(0,255,136,.08);}
.fg textarea{resize:vertical;min-height:80px;line-height:1.5;}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
select option{background:var(--s2);color:var(--text);}
.req{color:var(--rose);margin-left:2px;font-weight:700;}
.fg input.error{border-color:var(--rose)!important;}

/* STYLE PICKER */
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;}
.style-opt{border:1.5px solid var(--border);border-radius:var(--rs);padding:10px 6px;cursor:pointer;text-align:center;transition:all .2s;background:var(--s3);position:relative;overflow:hidden;}
.style-opt:hover{border-color:rgba(0,255,136,.4);}
.style-opt.active{border-color:var(--em);background:rgba(0,255,136,.06);box-shadow:0 0 20px rgba(0,255,136,.08);}
.style-opt span{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.4px;}
.style-opt-recommended{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--em);color:#05050a;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;white-space:nowrap;pointer-events:none;}

/* COLOR */
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.color-item label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:8px;}
.color-swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--s3);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:border-color .2s;}
.color-swatch:hover{border-color:rgba(0,255,136,.4);}
.color-swatch input[type="color"]{width:28px;height:28px;border:none;background:none;cursor:pointer;padding:0;border-radius:6px;}
.color-swatch span{font-size:13px;font-weight:600;color:var(--muted);font-family:var(--fm);}

/* LOGO */
.logo-drop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 20px;border:1.5px dashed var(--border2);border-radius:var(--rs);cursor:pointer;transition:all .25s;margin-bottom:14px;background:rgba(255,255,255,.01);}
.logo-drop:hover,.logo-drop.dragover{border-color:var(--em);background:rgba(0,255,136,.03);box-shadow:0 0 24px rgba(0,255,136,.06);}
.logo-drop i{font-size:24px;color:var(--muted);}
.logo-drop span{font-size:13px;color:var(--muted);}
.logo-drop img{max-width:70px;max-height:70px;border-radius:8px;display:none;}
#logoInput{display:none;}
.remove-btn{background:none;border:none;color:var(--rose);font-size:12px;cursor:pointer;display:none;padding:4px 8px;}

/* SLIDER */
.slider-row{margin-bottom:18px;}
.slider-row label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;display:flex;justify-content:space-between;margin-bottom:8px;}
.slider-row label span{color:var(--em);}
input[type="range"]{width:100%;accent-color:var(--em);height:6px;border-radius:3px;}

/* PREVIEW */
.qr-preview{position:sticky;top:24px;}
.preview-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:32px 28px;text-align:center;backdrop-filter:blur(var(--glass-blur));position:relative;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.04);}
.preview-card::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:240px;height:240px;background:radial-gradient(circle,rgba(0,255,136,.06) 0%,transparent 70%);pointer-events:none;}
.preview-card::after{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,136,.5) 30%,rgba(167,139,250,.5) 70%,transparent);}
.preview-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:7px;}
.live-dot{display:inline-block;width:6px;height:6px;background:var(--em);border-radius:50%;box-shadow:0 0 6px var(--em);animation:livePulse 1.8s ease infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 6px var(--em);}50%{opacity:.4;transform:scale(.7);box-shadow:0 0 2px var(--em);}}
.phone-wrap{background:linear-gradient(160deg,#141424,#0c0c18);border:1.5px solid rgba(255,255,255,.1);border-radius:36px;padding:14px 12px 20px;margin:0 auto 24px;max-width:230px;width:100%;box-sizing:border-box;box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);position:relative;}
.phone-wrap::before{content:'';position:absolute;left:-3px;top:80px;width:3px;height:28px;background:rgba(255,255,255,.08);border-radius:2px;}
.phone-wrap::after{content:'';position:absolute;right:-3px;top:100px;width:3px;height:48px;background:rgba(255,255,255,.08);border-radius:2px;}
.phone-notch{width:64px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;margin:0 auto 12px;}
#qrOutput{display:flex;justify-content:center;align-items:center;min-height:180px;background:#fff;border-radius:14px;padding:14px;position:relative;overflow:hidden;width:100%;box-sizing:border-box;}
#qrOutput canvas{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:200px!important;margin:0 auto!important;}
#qrOutput img,#qrOutput>img{display:none!important;}
.qr-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:#aaa;}
.qr-placeholder i{font-size:32px;opacity:.25;}
.qr-placeholder span{font-size:11px;opacity:.4;}
.phone-bar{width:50px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin:12px auto 0;}
.remaining-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:14px;font-size:12px;color:var(--muted);}
.remaining-row span{font-weight:700;}
.remaining-row span.warn{color:var(--amber);}
.remaining-row span.ok{color:var(--em);}

/* BUTTONS */
.dl-wrap{display:flex;flex-direction:column;gap:8px;}
.dl-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:100px;font-family:var(--fb);font-size:14px;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);border:none;width:100%;}
.dl-btn.primary{background:linear-gradient(135deg,var(--em),var(--em-d));color:#05050a;box-shadow:0 4px 24px var(--glow-em);}
.dl-btn.primary:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 36px var(--glow-em);}
.dl-btn.secondary{background:var(--s3);color:var(--text);border:1px solid var(--border2);}
.dl-btn.secondary:hover{border-color:var(--em);color:var(--em);}
.dl-btn.share{background:rgba(167,139,250,.1);color:var(--violet);border:1px solid rgba(167,139,250,.25);}
.dl-btn.share:hover{background:rgba(167,139,250,.18);}
.dl-btn.tertiary{background:transparent;color:var(--muted);border:1px solid var(--border);font-size:13px;}
.dl-btn.tertiary:hover{border-color:var(--muted);color:var(--text2);}
.copy-row{display:flex;gap:8px;margin-top:16px;}
.copy-input{flex:1;padding:10px 12px;background:var(--s3);border:1px solid var(--border);border-radius:var(--rs);color:var(--muted2);font-size:12px;font-family:var(--fm);outline:none;min-width:0;}
.copy-btn{padding:10px 16px;background:var(--s3);border:1px solid var(--border2);border-radius:var(--rs);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;}
.copy-btn:hover{border-color:var(--em);color:var(--em);}
.save-account-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.save-account-row .dl-btn{background:rgba(0,255,136,.05);color:var(--em);border:1px solid rgba(0,255,136,.18);font-size:13px;}
.save-account-row .dl-btn:hover{background:rgba(0,255,136,.1);}

/* LIMIT MODAL */
.mmt-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;}
.mmt-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);}
.mmt-modal-box{position:relative;z-index:1;background:var(--s1);border:1px solid var(--border2);border-radius:28px;width:420px;max-width:95vw;padding:44px 40px;text-align:center;box-shadow:0 60px 120px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;}
.mmt-modal-box::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,136,.5),transparent);}
.mmt-modal-icon{font-size:44px;margin-bottom:18px;}
.mmt-modal-box h2{font-family:var(--fd);font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.5px;}
.mmt-modal-box p{color:var(--muted2);font-size:14px;line-height:1.65;margin-bottom:28px;}
.mmt-modal-btns{display:flex;flex-direction:column;gap:10px;}
.mmt-modal-btn{display:block;padding:14px 28px;border-radius:100px;font-size:15px;font-weight:700;text-decoration:none;transition:all .25s;border:none;cursor:pointer;font-family:var(--fb);}
.mmt-modal-btn.primary{background:var(--em);color:#05050a;}
.mmt-modal-btn.secondary{background:var(--s3);color:var(--text);border:1px solid var(--border2);}
.mmt-modal-btn.pro{background:linear-gradient(135deg,var(--amber),#f59e0b);color:#05050a;}
.mmt-modal-btn:hover{opacity:.9;transform:translateY(-1px);}
.mmt-modal-close-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s;}
.mmt-modal-close-x:hover{background:var(--s3);color:var(--text);}

/* UPGRADE — Prismatic animated border */
#upgrade{max-width:1600px;margin:0 auto;padding:0 48px 80px;}
.upgrade-box{background:linear-gradient(160deg,var(--s1) 0%,var(--s2) 100%);border-radius:32px;padding:72px 56px;text-align:center;position:relative;overflow:hidden;}
.upgrade-glow{position:absolute;inset:-2px;border-radius:34px;background:conic-gradient(from 0deg,var(--em),var(--cyan),var(--violet),var(--rose),var(--amber),var(--em));animation:prismSpin 4s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;z-index:0;}
@keyframes prismSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.upgrade-box::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(0,255,136,.06) 0%,transparent 70%);pointer-events:none;z-index:0;}
.upgrade-box::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0;border-radius:32px;opacity:.5;}
.upgrade-box h2{position:relative;z-index:1;font-family:var(--fd);font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1.5px;color:var(--text);margin-bottom:14px;}
.upgrade-box p{position:relative;z-index:1;font-size:17px;color:var(--muted2);margin-bottom:44px;line-height:1.6;}
.upgrade-plans{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:580px;margin:0 auto 40px;}
.upgrade-plan{background:rgba(5,5,10,.75);border:1.5px solid var(--border2);border-radius:22px;padding:30px 24px;text-align:center;transition:all .25s;cursor:pointer;backdrop-filter:blur(12px);position:relative;overflow:hidden;}
.upgrade-plan::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
.upgrade-plan:hover,.upgrade-plan.selected{border-color:var(--em);background:rgba(0,255,136,.04);box-shadow:0 0 40px rgba(0,255,136,.08);transform:translateY(-2px);}
.upgrade-plan.popular{border-color:rgba(0,255,136,.5);}
.plan-badge{display:inline-block;padding:3px 12px;background:var(--em);color:#05050a;border-radius:100px;font-size:10px;font-weight:800;margin-bottom:12px;}
.plan-name{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;}
.plan-price{font-family:var(--fd);font-size:36px;font-weight:800;color:var(--text);letter-spacing:-2px;line-height:1;}
.plan-price sup{font-size:16px;vertical-align:top;margin-top:8px;color:var(--muted);}
.plan-price sub{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;}
.plan-note{font-size:12px;color:var(--muted);margin-top:6px;}
.upgrade-feats{position:relative;z-index:1;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:36px;font-size:14px;color:var(--muted2);}
.upgrade-feats span{display:flex;align-items:center;gap:7px;}
.upgrade-feats i{color:var(--em);font-size:12px;}
.upgrade-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:18px 52px;background:var(--em);color:#05050a;border-radius:100px;font-size:17px;font-weight:700;font-family:var(--fb);text-decoration:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);border:none;cursor:pointer;box-shadow:0 4px 32px var(--glow-em);}
.upgrade-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 48px var(--glow-em);}

/* MISC */
.qr-type-badge{display:flex;align-items:center;gap:9px;padding:10px 14px;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.15);border-radius:var(--rs);font-size:12px;color:var(--muted2);margin-bottom:18px;line-height:1.5;}
.qr-type-badge i{color:var(--em);flex-shrink:0;}
.qr-server-note{margin-top:12px;padding:10px 14px;background:rgba(167,139,250,.06);border:1px solid rgba(167,139,250,.2);border-radius:var(--rs);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px;}
.qr-server-note i{color:var(--violet);flex-shrink:0;}
.qr-server-note code{background:var(--s3);padding:2px 6px;border-radius:4px;font-size:11px;color:var(--text);font-family:var(--fm);}
#qrOutput img.adv-qr{display:block;width:100%;height:auto;border-radius:8px;}
.file-limit-info{color:var(--muted);font-size:11px;font-weight:400;margin-left:6px;}
.file-error{color:var(--rose);font-size:12px;margin-top:4px;display:block;}
.file-progress-wrap{display:flex;align-items:center;gap:10px;margin-top:8px;}
.file-progress-bar{flex:1;height:5px;background:var(--border);border-radius:100px;overflow:hidden;}
.file-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--em),var(--cyan));border-radius:100px;transition:width .2s ease;}
.file-progress-label{font-size:12px;font-weight:700;color:var(--em);min-width:36px;text-align:right;font-family:var(--fm);}

/* TT5 / GUTENBERG OVERRIDES */
.mmt-qr-wrap canvas{display:block!important;box-sizing:content-box!important;}
.mmt-qr-wrap #qrOutput{min-height:160px!important;width:100%!important;}
.mmt-qr-wrap #qrOutput canvas{display:block!important;width:auto!important;max-width:none!important;height:auto!important;margin:0 auto!important;}
.mmt-qr-wrap #qrOutput>img{display:none!important;}
.mmt-qr-wrap,.mmt-qr-wrap *{letter-spacing:normal;}
.mmt-qr-wrap .qr-hero h1{font-family:var(--fd)!important;font-size:clamp(40px,5.2vw,74px)!important;font-weight:800!important;line-height:1.06!important;letter-spacing:-2.5px!important;text-transform:none!important;}
.mmt-qr-wrap .qr-hero h1 .hl{letter-spacing:-2.5px!important;text-transform:none!important;}
.mmt-qr-wrap .qr-stat-n{font-family:var(--fd)!important;font-weight:800!important;letter-spacing:normal!important;text-transform:none!important;}
.mmt-qr-wrap .page-tab,.mmt-qr-wrap .qt{font-family:var(--fb)!important;letter-spacing:normal!important;text-transform:none!important;}
.mmt-qr-wrap .qr-btn-p,.mmt-qr-wrap .qr-btn-s,.mmt-qr-wrap .dl-btn,.mmt-qr-wrap .mmt-modal-btn,.mmt-qr-wrap .upgrade-cta{font-family:var(--fb)!important;letter-spacing:normal!important;text-transform:none!important;}
.mmt-qr-wrap .qr-hero-badge{letter-spacing:.02em!important;text-transform:none!important;}
.mmt-qr-wrap .fg label,.mmt-qr-wrap .slider-row label,.mmt-qr-wrap .color-item label{letter-spacing:.6px!important;}
.mmt-qr-wrap .preview-label{letter-spacing:1.2px!important;}

/* RESPONSIVE */
@media(max-width:1100px){
  .qr-hero-inner{grid-template-columns:1fr;}
  .qr-hero-right{display:none;}
  .qr-hero{padding:56px 32px 60px;text-align:center;}
  .qr-hero h1{margin:0 auto 24px;}
  .qr-hero-sub{margin:0 auto 36px;}
  .qr-hero-acts{justify-content:center;}
  .qr-hero-stats{justify-content:center;}
}
@media(max-width:960px){
  .qr-app{grid-template-columns:1fr;max-width:660px;}
  .qr-preview{position:static;}
  .phone-wrap{max-width:200px;}
}
@media(max-width:640px){
  .qr-app{padding:0 16px 60px;}
  .qr-hero{padding:48px 16px 48px;}
  .qr-hero h1{letter-spacing:-1.5px!important;}
  .qr-hero-stats{gap:20px;}
  .qr-stat-n{font-size:24px!important;}
  .qr-btn-p,.qr-btn-s{padding:13px 24px;font-size:14px;}
  .qr-tabs{gap:2px;}
  .qt{padding:8px 12px;font-size:12px;}
  .fg-row{grid-template-columns:1fr;}
  .upgrade-plans{grid-template-columns:1fr;}
  .upgrade-box{padding:48px 24px;}
  .usage-bar{padding:0 16px 12px;}
  .preview-card{padding:20px 14px;}
  .phone-wrap{max-width:180px;padding:12px 10px 16px;border-radius:28px;}
  #qrOutput{min-height:140px;padding:10px;}
  #qrOutput canvas{max-height:160px!important;}
  .dl-wrap{gap:6px;}
  .dl-btn{padding:11px 16px;font-size:13px;}
}

/* ═══════════════════════════════════════════════════════════════
   v3.6.0 — REDESIGN: Full-width hero, type icons, mockups,
   gallery, why-section — using uploaded brand assets
   ═══════════════════════════════════════════════════════════════ */

/* ── FULL-WIDTH HERO v2 ─────────────────────────────────────────── */
.qr-hero-v2 {
  padding: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
}
.qr-hero-v2-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 520px;
}
.qr-hero-v2-text {
  padding: 72px 56px 72px 64px;
  position: relative;
  z-index: 1;
}
.qr-hero-v2-text .qr-hero-badge { margin-bottom: 22px; }
.qr-hero-v2-text h1 { margin: 0 0 20px !important; text-align: left !important; }
.qr-hero-v2-text .qr-hero-sub { margin: 0 0 32px !important; text-align: left !important; max-width: 480px; }
.qr-hero-v2-text .qr-hero-acts { justify-content: flex-start; margin-bottom: 40px; }
.qr-hero-v2-text .qr-hero-stats { justify-content: flex-start; }
.qr-hero-v2-img {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.qr-hero-v2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── QR TYPE ICONS ROW ──────────────────────────────────────────── */
.qr-type-icons-row {
  background: var(--s2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.qr-type-icons-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.qr-type-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), filter 0.2s;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1.5px solid transparent;
}
.qr-type-icon-item:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(0,255,136,0.25);
  background: rgba(0,255,136,0.04);
}
.qr-type-icon-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.qr-type-icon-item span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  font-family: var(--fb);
}
.qr-type-icon-item:hover span { color: var(--em); }

/* ── SHARED SECTION STYLES ──────────────────────────────────────── */
.qr-section-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}
.qr-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.qr-section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--em);
  margin-bottom: 12px;
}
.qr-section-header h2 {
  font-family: var(--fd) !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  color: var(--text) !important;
  margin: 0 0 14px !important;
  text-transform: none !important;
  line-height: 1.1 !important;
}
.qr-section-header p {
  font-size: 16px;
  color: var(--muted2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── MOCKUPS SECTION ────────────────────────────────────────────── */
.qr-mockups-section {
  padding: 96px 0;
  background: var(--bg);
}
.qr-mockups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.qr-mockup-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
  cursor: pointer;
}
.qr-mockup-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,136,0.15);
}
.qr-mockup-item img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}
.qr-mockup-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(5,5,10,0.92) 0%, transparent 100%);
  padding: 32px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qr-mockup-caption strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--fb);
}
.qr-mockup-caption span {
  font-size: 12px;
  color: var(--em);
  font-weight: 600;
}

/* ── GALLERY SECTION ────────────────────────────────────────────── */
.qr-gallery-section {
  padding: 96px 0;
  background: var(--s1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.qr-gallery-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
}
.qr-gallery-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── WHY SECTION ────────────────────────────────────────────────── */
.qr-why-section {
  padding: 96px 0;
  background: var(--bg);
}
.qr-why-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
}
.qr-why-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .qr-hero-v2-text { padding: 56px 40px 56px 48px; }
  .qr-section-inner { padding: 0 32px; }
}
@media (max-width: 960px) {
  .qr-hero-v2-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .qr-hero-v2-text {
    padding: 56px 32px 48px;
    text-align: center;
  }
  .qr-hero-v2-text h1 { text-align: center !important; }
  .qr-hero-v2-text .qr-hero-sub { text-align: center !important; margin: 0 auto 32px !important; }
  .qr-hero-v2-text .qr-hero-acts { justify-content: center; }
  .qr-hero-v2-text .qr-hero-stats { justify-content: center; }
  .qr-hero-v2-img {
    min-height: 300px;
    height: 300px;
  }
  .qr-mockups-grid { grid-template-columns: 1fr; }
  .qr-mockup-item img { height: 260px; }
  .qr-mockups-section,
  .qr-gallery-section,
  .qr-why-section { padding: 64px 0; }
}
@media (max-width: 640px) {
  .qr-hero-v2-text { padding: 40px 20px 36px; }
  .qr-type-icons-inner { gap: 8px; padding: 0 16px; }
  .qr-type-icon-item { padding: 8px 10px; }
  .qr-type-icon-item img { width: 56px; height: 56px; }
  .qr-type-icon-item span { font-size: 11px; }
  .qr-section-inner { padding: 0 20px; }
  .qr-mockups-section,
  .qr-gallery-section,
  .qr-why-section { padding: 48px 0; }
  .qr-section-header { margin-bottom: 32px; }
  .qr-mockup-item img { height: 200px; }
}