.b2j-converter{width: 100%;margin: 0 auto 2rem;}
.b2j-card{background: var(--surface,#fff);border: 1px solid var(--border,#e2e8f0);border-radius: 20px;overflow: hidden;box-shadow: var(--shadow-soft,0 1px 3px rgba(0,0,0,.06));}
.b2j-drop{min-height: 220px;padding: 1.75rem 1.25rem;border: 2px dashed var(--border,#e2e8f0);margin: 0;cursor: pointer;transition: border-color .2s,background .2s;-webkit-tap-highlight-color: transparent;display: flex;align-items: center;justify-content: center;}
.b2j-drop:hover,.b2j-drop:focus-visible{border-color: var(--primary,#0ea5e9);outline: none;background: rgba(14,165,233,.04);}
.b2j-drop.b2j-dragover{border-color: var(--primary,#0ea5e9);background: rgba(14,165,233,.06);}
.b2j-file-input{position: absolute;width: 0;height: 0;opacity: 0;pointer-events: none;}
.b2j-drop-inner{display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 280px;}
.b2j-drop-icon{width: 64px;height: 64px;margin-bottom: 1rem;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center;background-size: 100%;}
.b2j-drop:hover .b2j-drop-icon,.b2j-drop:focus-visible .b2j-drop-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");}
.b2j-drop-title{font-size: 1.0625rem;font-weight: 600;color: var(--text-main,#1e293b);margin: 0 0 0.35rem 0;}
.b2j-drop-hint{font-size: 0.8125rem;color: var(--text-muted,#64748b);margin: 0;}
.b2j-workspace{padding: 1.25rem;display: flex;flex-direction: column;gap: 1.25rem;}
.b2j-controls{display: flex;flex-direction: column;gap: 1rem;padding: 1rem 0;border-bottom: 1px solid var(--border,#e2e8f0);}
.b2j-control-group{display: flex;flex-direction: column;gap: 0.5rem;}
.b2j-label{font-size: 0.875rem;font-weight: 600;color: var(--text-main,#1e293b);}
.b2j-quality-value{color: var(--primary,#0ea5e9);font-weight: 700;}
.b2j-range{width: 100%;height: 8px;accent-color: var(--primary,#0ea5e9);cursor: pointer;-webkit-appearance: none;appearance: none;background: var(--surface-muted,#f1f5f9);border-radius: 999px;}
.b2j-range::-webkit-slider-thumb{-webkit-appearance: none;width: 20px;height: 20px;border-radius: 50%;background: var(--primary,#0ea5e9);cursor: pointer;box-shadow: 0 1px 3px rgba(0,0,0,.2);}
.b2j-range::-moz-range-thumb{width: 20px;height: 20px;border-radius: 50%;background: var(--primary,#0ea5e9);cursor: pointer;border: none;box-shadow: 0 1px 3px rgba(0,0,0,.2);}
.b2j-check-wrap{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 0.5rem;cursor: pointer;}
.b2j-check{width: 20px;height: 20px;margin: 0;accent-color: var(--primary,#0ea5e9);cursor: pointer;flex-shrink: 0;}
.b2j-check-label{font-size: 0.9375rem;font-weight: 500;color: var(--text-main,#1e293b);}
.b2j-check-desc{font-size: 0.8125rem;color: var(--text-muted,#64748b);width: 100%;}
.b2j-preview{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;align-items: start;}
.b2j-preview-col{display: flex;flex-direction: column;gap: 0.5rem;min-width: 0;}
.b2j-preview-heading{font-size: 0.6875rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.06em;color: var(--text-muted,#64748b);margin: 0;}
.b2j-preview-frame{background: var(--surface-muted,#f8fafc);border: 1px solid var(--border,#e2e8f0);border-radius: 12px;overflow: hidden;display: flex;align-items: center;justify-content: center;min-height: 120px;}
.b2j-canvas{max-width: 100%;height: auto;display: block;}
.b2j-preview-meta{font-size: 0.75rem;color: var(--text-muted,#64748b);margin: 0;line-height: 1.4;}
.b2j-actions{display: flex;flex-wrap: wrap;gap: 0.75rem;padding-top: 0.5rem;}
.b2j-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;min-height: 48px;padding: 0.75rem 1.5rem;font-size: 1rem;font-weight: 600;border-radius: 14px;cursor: pointer;transition: background .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color: transparent;border: none;}
.b2j-btn:focus-visible{outline: none;}
.b2j-btn:disabled{opacity: 0.6;cursor: not-allowed;}
.b2j-btn-download{background: var(--primary,#0ea5e9);color: #fff;}
.b2j-btn-download:not(:disabled):hover{background: var(--primary-dark,#0284c7);}
.b2j-btn-download:focus-visible{box-shadow: 0 0 0 3px rgba(14,165,233,.35);}
.b2j-btn-icon{width: 20px;height: 20px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center;background-size: 100%;}
.b2j-btn-secondary{background: transparent;color: var(--text-muted,#64748b);border: 1px solid var(--border,#e2e8f0);}
.b2j-btn-secondary:hover{background: var(--surface-muted,#f8fafc);color: var(--text-main,#1e293b);}
.b2j-btn-secondary:focus-visible{box-shadow: 0 0 0 2px var(--border,#e2e8f0);}
@media (max-width:479px){.b2j-preview{grid-template-columns: 1fr;}.b2j-preview-col:first-child{border-bottom: 1px solid var(--border,#e2e8f0);padding-bottom: 1rem;}.b2j-actions{flex-direction: column;}.b2j-btn{width: 100%;}}
@media (min-width:768px){.b2j-drop{min-height: 260px;padding: 2.5rem;}.b2j-drop-inner{max-width: 320px;}.b2j-workspace{padding: 1.5rem 2rem;gap: 1.5rem;}.b2j-controls{flex-direction: row;flex-wrap: wrap;align-items: center;padding: 1.25rem 0;}.b2j-control-group{min-width: 200px;}.b2j-preview-frame{min-height: 200px;}.b2j-actions{gap: 1rem;}}