.b2g-section{width:100%;margin-bottom:2rem;}
.b2g-card{background:var(--surface, #fff);border:1px solid var(--border, #e2e8f0);border-radius:20px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06);}
.b2g-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
.b2g-drop{min-height:140px;padding:1.5rem 1rem;border:2px dashed var(--border, #e2e8f0);margin:0;cursor:pointer;transition:border-color .2s, background .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;-webkit-tap-highlight-color:transparent;}
.b2g-drop:hover,.b2g-drop:focus-visible{border-color:var(--primary, #0ea5e9);background:rgba(14, 165, 233, .04);outline:none;}
.b2g-drop.b2g-dragover{border-color:var(--primary, #0ea5e9);background:rgba(14, 165, 233, .08);}
.b2g-drop-icon{width:48px;height:48px;color:var(--text-muted, #64748b);transition:color .2s;}
.b2g-drop:hover .b2g-drop-icon,.b2g-drop:focus-visible .b2g-drop-icon{color:var(--primary, #0ea5e9);}
.b2g-drop-icon svg{width:100%;height:100%;display:block;}
.b2g-drop-text{font-size:1rem;font-weight:600;color:var(--text-main, #1e293b);}
.b2g-drop-hint{font-size:.8125rem;color:var(--text-muted, #64748b);}
.b2g-workspace{padding:1rem;border-top:1px solid var(--border, #e2e8f0);display:flex;flex-direction:column;gap:1rem;}
.b2g-file-chip{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;background:var(--surface-muted, #f8fafc);border-radius:12px;border:1px solid var(--border, #e2e8f0);}
.b2g-file-name{font-size:.875rem;font-weight:500;color:var(--text-main, #1e293b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.b2g-change-btn{flex-shrink:0;font-size:.8125rem;font-weight:600;color:var(--primary, #0ea5e9);background:none;border:none;cursor:pointer;padding:.25rem .5rem;-webkit-tap-highlight-color:transparent;}
.b2g-change-btn:hover{text-decoration:underline;}
.b2g-compare{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.b2g-panel{display:flex;flex-direction:column;gap:.5rem;min-height:0;}
.b2g-panel-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted, #64748b);}
.b2g-panel-inner{background:var(--surface-muted, #f1f5f9);border-radius:12px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-height:160px;}
.b2g-canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.b2g-panel-inner img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.b2g-placeholder{font-size:.8125rem;color:var(--text-muted, #64748b);}
.b2g-meta{font-size:.75rem;color:var(--text-muted, #64748b);margin:0;}
.b2g-options{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;}
.b2g-opt{display:inline-flex;align-items:center;gap:.5rem;}
.b2g-opt-text{font-size:.875rem;font-weight:500;color:var(--text-main, #1e293b);}
.b2g-select{padding:.4rem .6rem;font-size:.875rem;border:1px solid var(--border, #e2e8f0);border-radius:10px;background:var(--surface, #fff);color:var(--text-main, #1e293b);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.b2g-opt-check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;}
.b2g-checkbox{width:18px;height:18px;accent-color:var(--primary, #0ea5e9);cursor:pointer;}
.b2g-actions{display:flex;flex-wrap:wrap;gap:.75rem;}
.b2g-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.25rem;font-size:.9375rem;font-weight:600;border-radius:14px;cursor:pointer;transition:background .2s, color .2s, border-color .2s;-webkit-tap-highlight-color:transparent;border:none;}
.b2g-btn:focus-visible{outline:none;}
.b2g-btn-primary{background:var(--primary, #0ea5e9);color:#fff;}
.b2g-btn-primary:hover{background:var(--primary-dark, #0284c7);}
.b2g-btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(14, 165, 233, .35);}
.b2g-btn-primary:disabled{opacity:.7;cursor:not-allowed;}
.b2g-btn-icon{width:20px;height:20px;flex-shrink:0;}
.b2g-btn-icon svg{width:100%;height:100%;display:block;}
.b2g-btn-ghost{background:transparent;color:var(--text-muted, #64748b);border:1px solid var(--border, #e2e8f0);}
.b2g-btn-ghost:hover{background:var(--surface-muted, #f8fafc);color:var(--text-main, #1e293b);}
.b2g-result{padding-top:.5rem;border-top:1px solid var(--border, #e2e8f0);display:flex;flex-direction:column;gap:.5rem;}
.b2g-result-title{font-size:.9375rem;font-weight:600;color:var(--text-main, #1e293b);margin:0;}
.b2g-result-sub{font-size:.875rem;color:var(--text-muted, #64748b);margin:0;}
.b2g-result-actions{display:flex;flex-wrap:wrap;gap:.75rem;}
@media (max-width: 479px){.b2g-compare{grid-template-columns:1fr;}.b2g-options{flex-direction:column;align-items:flex-start;}.b2g-actions .b2g-btn{width:100%;}.b2g-result-actions .b2g-btn:first-child{flex:1;min-width:0;}.b2g-result-actions .b2g-btn-ghost{width:100%;}}
@media (min-width: 768px){.b2g-drop{min-height:160px;padding:1.75rem;}.b2g-workspace{padding:1.25rem 1.5rem;gap:1.25rem;}.b2g-compare{gap:1rem;}.b2g-panel-inner{min-height:220px;}.b2g-btn{min-height:52px;padding:.875rem 1.5rem;font-size:1rem;}}