.qr-container{width:min(90vw,50vh);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin:2rem auto;background-color:white}.qr-canvas{image-rendering:pixelated;image-rendering:crisp-edges;width:80%;height:80%;object-fit:contain;background-color:white;cursor:crosshair}.control-panel,.decoded-result-container{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:1rem auto;width:70vw;border:1px solid #ccc;border-radius:8px;background-color:#fafafa;justify-content:flex-start;font-size:1.2rem}.control-panel{padding:1rem}.decoded-result-container{margin-bottom:2rem;min-height:12rem}.control-panel input[type=text]{background-color:#fff;border:1px solid #ccc;border-radius:4px;font-size:1rem;width:60%}.control-panel span{font-size:1.5rem;font-weight:700;text-align:center;width:100%;display:block;margin-top:.5rem}.qr-level-option{font-size:1.2rem;margin-left:1rem;margin-right:1rem;cursor:pointer}.qr-level-option input{transform:scale(1.2);margin-right:.5rem;margin-left:.5rem;cursor:pointer}.encode-button,.save-button{border:none;font-size:1.2rem;padding:.5rem 1rem;color:white;border-radius:6px;cursor:pointer;transition:background-color .2s}.encode-button{background-color:#4CAF50;margin-top:.5rem}.save-button{background-color:#008CBA}.encode-button:hover{background-color:#45a049}.save-button:hover{background-color:#007bb5}.save-button-container{display:flex;justify-content:center;gap:1rem;margin:1rem auto}.decoded-result-label{font-size:1.8rem;font-weight:700;text-align:center;width:100%;display:block;margin-top:.5rem}.result-error-label,.result-success-label{font-size:1.5rem;font-weight:700;text-align:center;width:100%;display:block}.result-error-label{color:#800000}.result-success-label{color:#006400}.decoded-text-label{font-size:1.2rem;font-weight:700}.error-text{color:#800000;font-weight:700;font-family:monospace}.decoded-text,.error-text{word-wrap:break-word;overflow-wrap:break-word;word-break:break-all;text-align:center}.decoded-text{margin-bottom:.5rem}.decoded-hex-label{font-size:1rem;font-weight:700}.decoded-hex{font-size:.8rem;font-family:monospace;color:#444;word-break:break-all;background:#eeeeee;padding:.5rem;border-radius:4px;width:90%;text-align:center}@media (max-width:640px){.qr-canvas{width:90%;height:90%}.control-panel{padding:.5rem}}