.qr-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--tb-space-6);align-items:start}.qr-inputs .tb-tabs{margin-bottom:var(--tb-space-4);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.qr-inputs .tb-tabs::-webkit-scrollbar{display:none}.qr-inputs .tb-tab{white-space:nowrap}.qr-inputs .tb-tab-panel{padding-top:var(--tb-space-3)}.qr-inputs .tb-textarea{min-height:120px}.qr-customize{margin-top:var(--tb-space-4);border-top:1px solid var(--tb-color-gray-200)}.qr-customize .tb-accordion-item{border-bottom:1px solid var(--tb-color-gray-100)}.qr-preview-col{position:sticky;top:var(--tb-space-4)}.qr-preview{background:var(--tb-color-gray-50);border:1px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-md);padding:var(--tb-space-4);display:flex;align-items:center;justify-content:center;min-height:200px}.qr-preview__canvas{width:100%}.qr-preview__canvas svg,.qr-preview__canvas canvas{width:100%;height:auto;display:block}.qr-preview__placeholder{color:var(--tb-color-gray-400);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--tb-space-2);font-size:var(--tb-font-size-sm)}.qr-contrast-warning{align-items:center;gap:var(--tb-space-1);color:var(--tb-color-warning);font-size:var(--tb-font-size-sm);margin-top:var(--tb-space-2)}.qr-actions{display:flex;flex-wrap:wrap;gap:var(--tb-space-2);margin-top:var(--tb-space-3)}.qr-actions .tb-btn{flex:1;min-width:calc(50% - var(--tb-space-1));justify-content:center;font-size:var(--tb-font-size-sm)}.qr-colors-section{border-top:1px solid var(--tb-color-gray-200);padding-top:var(--tb-space-3);margin-top:var(--tb-space-1);display:flex;flex-direction:column;gap:var(--tb-space-3)}.tb-label--section{font-weight:600;font-size:var(--tb-font-size-base);margin-bottom:calc(-1 * var(--tb-space-1))}.tb-label-sm{font-size:var(--tb-font-size-xs);color:var(--tb-color-gray-500);margin-bottom:var(--tb-space-0-5);display:block}.qr-color-swatch{display:flex;flex-direction:column}.qr-color-swatch.tb-hidden{display:none}.qr-color-input{height:38px;width:100%;padding:3px;cursor:pointer;border-radius:var(--tb-radius-sm)}.qr-color-dots-row{display:flex;gap:var(--tb-space-2)}.qr-color-dots-row .qr-color-swatch{flex:1}.qr-color-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--tb-space-2)}.qr-colors-section .tb-field{margin-bottom:0}.qr-color-input::-webkit-color-swatch-wrapper{padding:2px}.qr-color-input::-webkit-color-swatch{border:1px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-sm)}.qr-color-input::-moz-color-swatch{border:1px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-sm)}.qr-style-picker{display:flex;gap:var(--tb-space-2);flex-wrap:wrap}.qr-style-btn{width:46px;height:46px;padding:5px;border:2px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-md);background:var(--tb-color-white);cursor:pointer;transition:border-color var(--tb-transition-fast),background-color var(--tb-transition-fast);display:flex;align-items:center;justify-content:center}.qr-style-btn svg{width:100%;height:100%;display:block}.qr-style-btn:hover{border-color:var(--tb-color-gray-400);background:var(--tb-color-gray-50)}.qr-style-btn.is-active{border-color:var(--tb-color-primary);background:color-mix(in srgb,var(--tb-color-primary) 8%,white)}.qr-frame-picker{display:flex;gap:var(--tb-space-2);flex-wrap:wrap}.qr-frame-btn{width:72px;height:80px;padding:4px;border:2px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-md);background:var(--tb-color-white);cursor:pointer;transition:border-color var(--tb-transition-fast),background-color var(--tb-transition-fast);display:flex;align-items:center;justify-content:center;overflow:hidden}.qr-frame-btn svg{width:100%;height:100%;display:block}.qr-frame-btn:hover{border-color:var(--tb-color-gray-400);background:var(--tb-color-gray-50)}.qr-frame-btn.is-active{border-color:var(--tb-color-primary);background:color-mix(in srgb,var(--tb-color-primary) 8%,white)}.qr-frame-btn.tb-hidden{display:none}.qr-range{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--tb-color-gray-200);border-radius:3px;outline:none;cursor:pointer}.qr-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--tb-color-primary);border:2px solid var(--tb-color-white);box-shadow:0 1px 3px #0003;cursor:pointer}.qr-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--tb-color-primary);border:2px solid var(--tb-color-white);box-shadow:0 1px 3px #0003;cursor:pointer}.qr-logo-field{margin-top:var(--tb-space-3)}.qr-logo-upload{display:flex;align-items:center;gap:var(--tb-space-2)}@media(max-width:768px){.qr-layout{grid-template-columns:1fr}.qr-preview-col{position:static}.qr-preview{max-width:320px;margin:0 auto;padding:var(--tb-space-4)}.qr-actions,#qr-contrast-warning{max-width:320px;margin-left:auto;margin-right:auto}}@media(max-width:480px){.qr-preview,.qr-actions,#qr-contrast-warning{max-width:280px}.qr-color-grid{grid-template-columns:1fr 1fr}.qr-frame-btn{width:60px;height:68px}.qr-style-btn{width:40px;height:40px}.qr-actions .tb-btn{min-width:100%}}