html,body{margin:0;background-color:#212529;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}#app-viewport{min-height:100svh;min-height:100dvh;max-height:100svh;max-height:100dvh;box-sizing:border-box;padding-bottom:20px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}#app-viewport::-webkit-scrollbar{display:none}.qr-input-group{background:rgba(255,255,255,.04);border-radius:12px;padding:14px 14px 16px}#qr-preview-area{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);display:flex;justify-content:center;padding:28px 16px;box-sizing:border-box;margin-top:16px}#qr-canvas-wrapper{background:#fff;border-radius:12px;max-width:min(90vw,480px);max-height:min(90vw,480px);padding:10px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:0 auto}#qr-canvas-wrapper canvas,#qr-canvas-wrapper img,#qr-canvas-wrapper table{display:block;max-width:100%;height:auto}.color-input-row{display:flex;align-items:center;gap:8px}.color-input-row input[type=color]{width:52px;height:46px;padding:2px;border:none;border-radius:8px;background:none}.form-label{font-size:1.05rem}#qr-text,#qr-size,#qr-level{font-size:1.1rem}#qr-text{height:52px;overflow-x:auto;white-space:nowrap;text-overflow:clip}.qr-action-row{display:flex;gap:10px}.qr-action-row .btn{flex:1;font-size:1.1rem;padding:.8rem .5rem}#generate-btn{font-weight:bold}#app-viewport .qr-input-group{padding:12px;margin-bottom:8px}#app-viewport #qr-preview-area{width:auto;margin-left:0;margin-right:0;padding:16px 0 8px;margin-top:12px}#app-viewport #qr-canvas-wrapper{width:fit-content;max-width:min(90vw,396px);padding:8px;overflow:hidden;margin:0 auto;box-sizing:border-box}#app-viewport .form-label{font-size:.98rem}#app-viewport #qr-text{height:46px}