.utility-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;margin:0 auto 42px;max-width:1180px;padding:0 22px}.utility-preview{min-height:520px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:32px}.utility-preview h2{margin:0;font-size:22px}.utility-preview p{margin:0;color:#667085;text-align:center}.utility-form-actions{display:grid;gap:10px;margin-top:20px}.utility-form-actions .btn{width:100%;justify-content:center}.utility-preview-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.qr-frame{display:grid;place-items:center;min-width:280px;min-height:280px;padding:18px;border:1px solid #e5e7eb;border-radius:20px;background:#fff;box-shadow:0 14px 35px rgba(17,24,39,.08)}.qr-frame svg,.qr-frame canvas{display:block;max-width:100%;height:auto}.password-output{width:min(100%,720px);min-height:76px;padding:18px;border:2px solid #fed7c3;border-radius:16px;background:#fff8f4;color:#20242a;font:700 22px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;text-align:center}.password-list{width:min(100%,720px);display:grid;gap:9px}.password-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}.password-row code{flex:1;overflow-wrap:anywhere}.strength-meter{width:min(100%,520px);height:9px;border-radius:999px;background:#e5e7eb;overflow:hidden}.strength-meter span{display:block;height:100%;width:0;background:#ff5a0a;transition:.2s}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px}.check-option{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #e5e7eb;border-radius:10px;font-weight:700}.check-option input{width:18px;height:18px;accent-color:#ff5a0a}.range-line{display:flex;align-items:center;gap:12px}.range-line input{flex:1}.range-value{min-width:44px;padding:7px 8px;border-radius:8px;background:#fff3ec;color:#c53f00;font-weight:800;text-align:center}.utility-status{font-weight:700;color:#147d51}.utility-note{font-size:13px;color:#667085}@media(max-width:840px){.utility-workspace{grid-template-columns:1fr;padding:0 14px}.utility-preview{min-height:390px;padding:22px}.options-card{position:static}.qr-frame{min-width:240px;min-height:240px}.check-grid{grid-template-columns:1fr}}

.qr-paint{padding:14px;border:1px solid #e3e8ef;border-radius:14px;margin:14px 0;background:#fafbfc}.qr-paint summary{font-weight:750;cursor:pointer;margin-bottom:12px}.qr-stop{display:grid;grid-template-columns:48px minmax(0,1fr) 30px;gap:10px;align-items:center;margin:10px 0}.qr-stop[hidden]{display:none}.qr-stop input[type=color]{width:48px;height:40px;padding:2px}.qr-stop label{font-size:12px}.qr-stop input[type=range]{width:100%;padding:0}.qr-stop button{border:0;border-radius:8px;padding:8px;cursor:pointer}.qr-stop output{font-size:12px}.qr-paint .field{margin-top:12px}.qr-paint input[type=range]{padding:0}.qr-add,.qr-logo-picker{font-size:13px}.qr-frame{min-width:0;width:100%;max-width:1060px;box-sizing:border-box;background:repeating-conic-gradient(#eef0f4 0% 25%,#fff 0% 50%) 0 0/20px 20px}.utility-workspace>*{min-width:0}body[data-tool=qr-code] .utility-preview{position:sticky;top:100px}body[data-tool=qr-code] .options-card{position:static}@media(max-width:840px){body[data-tool=qr-code] .utility-preview{position:static}.qr-frame{min-width:0}.utility-preview{padding:16px}}

#qrAdvancedOptions[hidden],#qrBasicColors[hidden]{display:none}.qr-advanced-toggle{width:100%;justify-content:center;margin-top:16px}