:root{--bgr-primary:var(--main-primary);--bgr-primary-hover:var(--main-primary-hover);--bgr-primary-rgb:var(--main-primary-rgb);--bgr-text:var(--main-gray-800);--bgr-text-muted:var(--main-text-muted);--bgr-bg:var(--main-bg-primary);--bgr-bg-secondary:var(--main-bg-secondary);--bgr-border:var(--main-border);--bgr-border-hover:var(--main-border-dark);--bgr-radius:var(--main-radius);--bgr-radius-lg:var(--main-radius-lg);--bgr-shadow:0 1px 3px #00000014;--bgr-shadow-md:0 4px 12px #0000001a;--bgr-checker-light:var(--main-bg-primary);--bgr-checker-dark:var(--main-gray-200);--bgr-toolbar-bg:var(--main-bg-primary);--bgr-upload-border:var(--main-gray-300);--bgr-upload-bg:#fff9;--bgr-overlay-bg:#ffffffd9;--bgr-checker-icon-fg:var(--main-gray-300);--bgr-checker-icon-bg:var(--main-bg-primary)}._bgr-container{flex-direction:column;min-height:500px;display:flex}._bgr-editor{flex-direction:column;gap:0;height:100%;display:flex}@media (max-width:768px){._bgr-container{min-height:420px;padding-left:.75rem;padding-right:.75rem}}@media (max-width:480px){._bgr-container{padding-left:.5rem;padding-right:.5rem}}._bgr-upload{min-height:400px;padding:var(--main-space-6);justify-content:center;align-items:center;display:flex}._bgr-upload-area{justify-content:center;align-items:center;gap:var(--main-space-3);width:100%;max-width:480px;padding:var(--main-space-10) var(--main-space-6);border-style:dashed;border-width:2px;border-color:var(--bgr-upload-border);border-radius:var(--bgr-radius-lg);background:var(--bgr-upload-bg);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;flex-direction:column;transition:border-color .2s,background .2s;display:flex}._bgr-upload-area:hover,._bgr-upload-area.dragover{border-color:var(--bgr-primary);background:rgba(var(--bgr-primary-rgb), .04)}._bgr-upload-icon{color:var(--bgr-text-muted);margin-bottom:var(--main-space-2)}._bgr-upload-area:hover ._bgr-upload-icon,._bgr-upload-area.dragover ._bgr-upload-icon{color:var(--bgr-primary)}._bgr-upload-title{font-size:var(--main-text-lg);color:var(--bgr-text);font-weight:600}._bgr-upload-subtitle{font-size:var(--main-text-sm);color:var(--bgr-text-muted)}._bgr-upload-hint{font-size:var(--main-text-xs);color:var(--bgr-text-muted);margin-top:var(--main-space-2);opacity:.7}@media (max-width:768px){._bgr-upload{min-height:280px;padding:var(--main-space-3)}._bgr-upload-area{padding:var(--main-space-6) var(--main-space-4);gap:var(--main-space-2)}._bgr-upload-icon svg{width:40px;height:40px}._bgr-upload-title{font-size:var(--main-text-base)}}@media (hover:none) and (pointer:coarse){._bgr-upload-hint{display:none}}._bgr-toolbar{background:var(--bgr-toolbar-bg);border-style:solid;border-width:0 0 1px;border-color:var(--bgr-border);border-radius:var(--bgr-radius-lg) var(--bgr-radius-lg) 0 0}._bgr-toolbar-main{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);display:flex}._bgr-toolbar-left,._bgr-toolbar-right{align-items:center;gap:var(--main-space-2);display:flex}._bgr-toolbar-group{align-items:center;gap:var(--main-space-1);display:flex}._bgr-toolbar-sep{background:var(--bgr-border);width:1px;height:24px}._bgr-toolbar-sub{align-items:center;gap:var(--main-space-4);padding:var(--main-space-2) var(--main-space-3);border-style:solid;border-width:1px 0 0;border-color:var(--bgr-border);background:var(--bgr-bg-secondary);display:flex}._bgr-tool-btn{border-radius:var(--bgr-radius);color:var(--bgr-text-muted);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:6px 10px;transition:color .15s,background .15s;display:inline-flex}._bgr-tool-btn:hover{color:var(--bgr-text);background:var(--bgr-bg-secondary)}._bgr-tool-btn.active{color:var(--bgr-primary);background:rgba(var(--bgr-primary-rgb), .08);border-color:rgba(var(--bgr-primary-rgb), .2)}._bgr-tool-btn:disabled{opacity:.4;cursor:not-allowed}._bgr-checker-icon{border-style:solid;border-width:1px;border-color:var(--bgr-border);background-image:linear-gradient(45deg, var(--bgr-checker-icon-fg) 25%, transparent 25%, transparent 75%, var(--bgr-checker-icon-fg) 75%), linear-gradient(45deg, var(--bgr-checker-icon-fg) 25%, transparent 25%, transparent 75%, var(--bgr-checker-icon-fg) 75%);background-position:0 0,4px 4px;background-size:8px 8px;background-color:var(--bgr-checker-icon-bg);border-radius:3px;flex-shrink:0;width:14px;height:14px;display:inline-block}._bgr-brush-options{align-items:center;gap:var(--main-space-2);display:flex}._bgr-brush-label{font-size:var(--main-text-xs);color:var(--bgr-text-muted);white-space:nowrap}._bgr-range{width:100px;accent-color:var(--bgr-primary);cursor:pointer}#_bgr-brush-size-val{font-size:var(--main-text-xs);color:var(--bgr-text-muted);text-align:center;min-width:24px}._bgr-color-panel{align-items:center;gap:var(--main-space-2);flex-wrap:wrap;display:flex}._bgr-color-picker{border-style:solid;border-width:1px;border-color:var(--bgr-border);border-radius:var(--bgr-radius);cursor:pointer;background:0 0;flex-shrink:0;width:28px;height:28px;padding:0}._bgr-color-presets{flex-wrap:wrap;align-items:center;gap:4px;display:flex}._bgr-color-swatch{border-style:solid;border-width:2px;border-color:var(--bgr-border);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;flex-shrink:0;width:22px;height:22px;padding:0;transition:box-shadow .15s}._bgr-color-swatch:hover{box-shadow:0 0 0 2px rgba(var(--bgr-primary-rgb), .3)}._bgr-color-swatch.active{border-color:var(--bgr-primary);box-shadow:0 0 0 2px rgba(var(--bgr-primary-rgb), .3)}@media (max-width:768px){._bgr-toolbar-main{padding:var(--main-space-2);gap:var(--main-space-1);row-gap:var(--main-space-2);flex-wrap:wrap}._bgr-toolbar-left,._bgr-toolbar-right{gap:var(--main-space-1);flex-wrap:wrap}._bgr-toolbar-left{flex:100%}._bgr-toolbar-right{flex:100%;justify-content:flex-start}._bgr-btn-label,._bgr-toolbar-sep{display:none}._bgr-tool-btn{justify-content:center;gap:0;min-width:40px;min-height:40px;padding:9px 12px}._bgr-toolbar-sub{padding:var(--main-space-2);gap:var(--main-space-2);row-gap:var(--main-space-2);flex-wrap:wrap}._bgr-brush-options{flex:100%;min-width:0}._bgr-brush-options ._bgr-range{flex:1;min-width:0}._bgr-color-panel{flex:100%}._bgr-color-presets{gap:6px}._bgr-color-swatch{width:32px;height:32px}._bgr-color-picker{width:36px;height:36px}._bgr-range{font-size:16px}}._bgr-preview-wrap{background:var(--bgr-bg-secondary);flex:1;justify-content:center;align-items:center;min-height:350px;display:flex;position:relative;overflow:hidden}._bgr-canvas-area{background-image:linear-gradient(45deg, var(--bgr-checker-dark) 25%, transparent 25%, transparent 75%, var(--bgr-checker-dark) 75%), linear-gradient(45deg, var(--bgr-checker-dark) 25%, transparent 25%, transparent 75%, var(--bgr-checker-dark) 75%);background-position:0 0,8px 8px;background-size:16px 16px;background-color:var(--bgr-checker-light);max-width:100%;max-height:100%;box-shadow:var(--bgr-shadow-md);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;line-height:0;display:inline-flex;position:relative}._bgr-canvas-area canvas{object-fit:contain;touch-action:none;max-width:100%;max-height:calc(80vh - 200px);display:block}._bgr-brush-cursor{pointer-events:none;z-index:10;border:2px solid #fffc;border-radius:50%;display:none;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d}._bgr-loading{background:var(--bgr-overlay-bg);z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:var(--main-space-4);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._bgr-loading-content{align-items:center;gap:var(--main-space-4);padding:var(--main-space-6);flex-direction:column;max-width:100%;display:flex}._bgr-loading-spinner{border-style:solid;border-width:3px;border-color:var(--bgr-border);border-top-color:var(--bgr-primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite _bgr-spin}@keyframes _bgr-spin{to{transform:rotate(360deg)}}._bgr-loading-text{font-size:var(--main-text-sm);color:var(--bgr-text);text-align:center;font-weight:500}._bgr-progress{background:var(--bgr-border);border-radius:2px;width:200px;max-width:100%;height:4px;overflow:hidden}._bgr-progress-bar{background:var(--bgr-primary);border-radius:2px;width:0%;height:100%;transition:width .3s}@media (max-width:768px){._bgr-preview-wrap{min-height:300px}._bgr-canvas-area canvas{min-height:240px;max-height:calc(100vh - 320px)}._bgr-loading-content{padding:var(--main-space-4)}._bgr-progress{width:160px}}@media (max-width:480px){._bgr-preview-wrap{min-height:260px}._bgr-canvas-area canvas{max-height:calc(100vh - 360px)}}._bgr-output{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);background:var(--bgr-toolbar-bg);border-style:solid;border-width:1px 0 0;border-color:var(--bgr-border);border-radius:0 0 var(--bgr-radius-lg) var(--bgr-radius-lg);display:flex}._bgr-output-info{font-size:var(--main-text-sm);color:var(--bgr-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._bgr-output-controls{align-items:center;gap:var(--main-space-3);flex-shrink:0;display:flex}._bgr-select{border-style:solid;border-width:1px;border-color:var(--bgr-border);border-radius:var(--bgr-radius);background:var(--bgr-bg);color:var(--bgr-text);font-size:var(--main-text-sm);cursor:pointer;-webkit-appearance:auto;appearance:auto;padding:6px 28px 6px 10px}._bgr-quality-wrap{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--bgr-text-muted);display:flex}._bgr-quality-label{white-space:nowrap}._bgr-range{cursor:pointer;width:80px;accent-color:var(--bgr-primary)}._bgr-btn-primary{background:var(--bgr-primary);color:var(--main-bg-primary);border-radius:var(--bgr-radius);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(var(--bgr-primary-rgb), .25);-webkit-tap-highlight-color:transparent;border-width:0;align-items:center;gap:6px;padding:8px 16px;font-weight:500;transition:opacity .15s,box-shadow .15s;display:inline-flex}._bgr-btn-primary:hover{opacity:.9;box-shadow:0 4px 12px rgba(var(--bgr-primary-rgb), .35)}._bgr-btn-primary:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){._bgr-output{align-items:stretch;gap:var(--main-space-2);padding:var(--main-space-2);flex-direction:column}._bgr-output-info{text-align:center;font-size:var(--main-text-xs)}._bgr-output-controls{gap:var(--main-space-2);flex-wrap:wrap;justify-content:space-between;width:100%}._bgr-quality-wrap{gap:var(--main-space-2);flex:100%;order:1}._bgr-quality-wrap ._bgr-range{flex:1;width:auto}._bgr-select{flex-shrink:0;min-height:40px;padding:8px 28px 8px 12px;font-size:16px}._bgr-btn-primary{min-height:44px;font-size:var(--main-text-base);flex:1;justify-content:center;padding:10px 16px}}@media (max-width:480px){._bgr-quality-label{font-size:var(--main-text-xs)}}