.qr-hero{position:relative;padding:120px 24px 60px;text-align:center;overflow:hidden}.qr-hero-glow{position:absolute;top:-200px;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(255,215,0,.08) 0%,transparent 70%);pointer-events:none}.qr-hero-inner{position:relative;z-index:1;max-width:80%;margin:0 auto}.qr-breadcrumb{margin-bottom:16px;font-size:13px;font-family:var(--font-family-menuSubItem);color:#dcdbd566}.qr-breadcrumb a{color:#0f8;text-decoration:none}.qr-breadcrumb a:hover{text-decoration:underline}.qr-breadcrumb span{margin:0 6px}.qr-section{padding:0 24px 60px}.qr-container,.qr-container-wide{max-width:80%;margin:0 auto}@media(max-width:768px){.qr-hero-inner,.qr-container,.qr-container-wide{max-width:95%}}.qr-card{position:relative;border-radius:16px;overflow:hidden}.qr-card-border{position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,#ffd7004d,#ffd7000d 40%,#00ff880d 60%,#0f83);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.qr-card-inner{background:linear-gradient(160deg,#101010f7,#080808fc);border-radius:16px;padding:clamp(24px,4vw,48px)}.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}@media(max-width:900px){.qr-grid{grid-template-columns:1fr}}.qr-controls{display:flex;flex-direction:column;gap:20px}.qr-control-group{display:flex;flex-direction:column;gap:6px}.qr-control-label{font-size:11px;font-family:var(--font-family-menuSubItem);text-transform:uppercase;letter-spacing:.1em;color:#dcdbd580}.qr-control-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.qr-tabs{display:flex;flex-wrap:wrap;gap:6px}.qr-tab{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;font-size:12px;font-family:var(--font-family-menuSubItem);background:#ffffff08;border:1px solid rgba(255,255,255,.08);color:#dcdbd599;cursor:pointer;transition:all .2s}.qr-tab:hover{background:#ffffff0f;color:#dcdbd5}.qr-tab.active{background:#ffd7001a;border-color:#ffd70059;color:gold;box-shadow:0 0 12px #ffd7001a}.qr-tab svg{opacity:.7}.qr-tab.active svg{opacity:1}.qr-input-group{display:flex;flex-direction:column;gap:12px}.qr-input{width:100%;padding:10px 14px;border-radius:8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:#e5e4dd;font-size:14px;font-family:var(--font-family-body);outline:none;transition:border-color .2s,box-shadow .2s}.qr-input:focus{border-color:#ffd70066;box-shadow:0 0 0 3px #ffd70014}.qr-input::placeholder{color:#dcdbd540}select.qr-input{cursor:pointer}select.qr-input option{background:#111;color:#dcdbd5}.qr-coloris-input{width:100%;padding:10px 14px 10px 42px;border-radius:10px;background:#ffffff0a;border:2px solid rgba(255,255,255,.1);color:#e5e4dd;font-size:13px;font-family:monospace;outline:none;cursor:pointer;transition:border-color .2s}.qr-coloris-input:focus{border-color:#ffd70066}.clr-picker{background:#101010fa!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;box-shadow:0 8px 32px #0009!important}.clr-gradient{border-radius:8px!important}.clr-hue,.clr-alpha{border-radius:10px!important}.clr-field button{border-radius:8px!important;width:28px!important;height:28px!important;left:8px!important;right:auto!important;border:2px solid rgba(255,255,255,.25)!important;outline:none!important;overflow:hidden!important;box-sizing:border-box!important;padding:0!important;background-image:none!important;background-color:currentColor!important}.clr-field button:after{border-radius:6px!important;box-shadow:none!important}.clr-preview:before{background-image:none!important}.clr-close{background:#ffd7001f!important;color:gold!important;border-radius:8px!important;border:1px solid rgba(255,215,0,.25)!important}.clr-close:hover{background:#ffd70033!important}.qr-style-options{display:flex;gap:8px}.qr-style-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#ffffff08;border:2px solid rgba(255,255,255,.08);color:#dcdbd566;cursor:pointer;transition:all .2s}.qr-style-btn:hover{background:#ffffff0f;color:#dcdbd5b3}.qr-style-btn.active{background:#ffd7001a;border-color:#ffd70059;color:gold;box-shadow:0 0 12px #ffd7001a}.qr-logo-upload{position:relative;border-radius:10px;border:2px dashed rgba(255,255,255,.1);background:#ffffff05;cursor:pointer;transition:border-color .2s,background .2s;overflow:hidden}.qr-logo-upload:hover,.qr-logo-upload.dragover{border-color:#ffd7004d;background:#ffd70008}.qr-logo-placeholder{display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:12px;font-family:var(--font-family-menuSubItem);color:#dcdbd559}.qr-logo-preview{display:flex;align-items:center;gap:10px;padding:10px 14px}.qr-logo-preview img{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#ffffff0d}.qr-logo-remove{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#ff50501a;border:1px solid rgba(255,80,80,.2);color:#ff5050;cursor:pointer;transition:all .2s}.qr-logo-remove:hover{background:#ff505033}.qr-logo-tabs{display:flex;gap:4px;margin-bottom:6px}.qr-logo-tab{padding:5px 12px;border-radius:6px;font-size:11px;font-family:var(--font-family-menuSubItem);background:#ffffff08;border:1px solid rgba(255,255,255,.06);color:#dcdbd573;cursor:pointer;transition:all .2s}.qr-logo-tab:hover{background:#ffffff0f}.qr-logo-tab.active{background:#ffd7001a;border-color:#ffd7004d;color:gold}.qr-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:180px;overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.qr-icon-grid::-webkit-scrollbar{width:4px}.qr-icon-grid::-webkit-scrollbar-track{background:transparent}.qr-icon-grid::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.qr-icon-btn{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:8px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);color:#dcdbd580;cursor:pointer;transition:all .15s}.qr-icon-btn:hover{background:#ffffff14;color:#e5e4dd;border-color:#ffffff26}.qr-icon-btn.selected{background:#ffd7001a;border-color:#ffd70059;color:gold}.qr-range{width:100%;height:4px;border-radius:2px;background:#ffffff14;outline:none;-webkit-appearance:none;appearance:none;margin-top:4px}.qr-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:gold;cursor:pointer;box-shadow:0 0 8px #ffd7004d}.qr-preview{display:flex;flex-direction:column;align-items:center;gap:20px}.qr-preview-frame{position:relative;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:12px;background:#fff;box-shadow:0 0 40px #ffd7000f,0 4px 24px #0000004d;min-width:200px;min-height:200px}#qr-output canvas{display:block;max-width:100%;height:auto;border-radius:4px}.qr-download-row{display:flex;gap:10px}.qr-dl-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:8px;font-family:var(--font-family-menuSubItem);font-size:13px;font-weight:600;background:#ffffff0d;color:#dcdbd5b3;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s}.qr-dl-btn:hover{background:#ffffff1a;color:#e5e4dd}.qr-dl-btn-primary{background:#ffd7001f;color:gold;border-color:#ffd70040}.qr-dl-btn-primary:hover{background:#ffd70033;box-shadow:0 0 16px #ffd70026;color:gold}.qr-uses-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media(max-width:900px){.qr-uses-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.qr-uses-grid{grid-template-columns:1fr}}.qr-use-card{position:relative;padding:28px 24px;border-radius:12px;background:linear-gradient(160deg,#141414f2,#0a0a0afa);border:1px solid rgba(255,215,0,.08);text-align:center;transition:border-color .3s,box-shadow .3s}.qr-use-card:hover{border-color:#ffd70033;box-shadow:0 0 20px #ffd7000d}.qr-use-icon{width:48px;height:48px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#ffd7000f;border:1px solid rgba(255,215,0,.12)}.qr-use-card h3{margin-bottom:6px}.qr-privacy{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;background:#00ff880a;border:1px solid rgba(0,255,136,.12);font-size:13px;font-family:var(--font-family-menuSubItem);color:#dcdbd5b3}
