.j2b-wrap{width: 100%;margin: 0 auto 2rem;}
.j2b-card{background: var(--surface, #fff);border: 1px solid var(--border, #e2e8f0);border-radius: 16px;overflow: hidden;box-shadow: var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, .06));}
.j2b-zone{min-height: 160px;padding: 1.25rem 1rem;border: 2px dashed var(--border, #e2e8f0);cursor: pointer;transition: border-color .2s, background .15s;-webkit-tap-highlight-color: transparent;display: flex;align-items: center;justify-content: center;}
.j2b-zone:hover,.j2b-zone:focus-visible{border-color: var(--primary, #0ea5e9);outline: none;background: rgba(14, 165, 233, .04);}
.j2b-zone.j2b-dragover{border-color: var(--primary, #0ea5e9);background: rgba(14, 165, 233, .08);}
.j2b-input{position: absolute;width: 0;height: 0;opacity: 0;pointer-events: none;}
.j2b-zone-inner{display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 280px;}
.j2b-zone-icon{width: 56px;height: 56px;margin-bottom: .75rem;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%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center;background-size: 100%;}
.j2b-zone:hover .j2b-zone-icon,.j2b-zone:focus-visible .j2b-zone-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%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");}
.j2b-zone-title{font-size: 1rem;font-weight: 600;color: var(--text-main, #1e293b);margin: 0 0 .25rem 0;}
.j2b-zone-hint{font-size: .8125rem;color: var(--text-muted, #64748b);margin: 0;}
.j2b-body{padding: 1rem;display: flex;flex-direction: column;gap: 1rem;border-top: 1px solid var(--border, #e2e8f0);}
.j2b-preview-section{display: flex;flex-direction: column;gap: .5rem;}
.j2b-preview-heading{font-size: .8125rem;font-weight: 600;text-transform: uppercase;letter-spacing: .04em;color: var(--text-muted, #64748b);margin: 0;}
.j2b-preview-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));gap: .75rem;}
.j2b-preview-item{display: flex;flex-direction: column;gap: .35rem;min-width: 0;}
.j2b-preview-frame{background: var(--surface-muted, #f1f5f9);border: 1px solid var(--border, #e2e8f0);border-radius: 10px;overflow: hidden;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;}
.j2b-preview-frame img{width: 100%;height: 100%;object-fit: contain;display: block;}
.j2b-preview-caption{font-size: .75rem;color: var(--text-muted, #64748b);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.j2b-files{display: flex;flex-wrap: wrap;gap: .5rem;max-height: 120px;overflow-y: auto;-webkit-overflow-scrolling: touch;}
.j2b-file{padding: .5rem .75rem;background: var(--surface-muted, #f1f5f9);border: 1px solid var(--border, #e2e8f0);border-radius: 10px;font-size: .8125rem;color: var(--text-main, #1e293b);display: flex;align-items: center;gap: .5rem;min-width: 0;max-width: 100%;}
.j2b-file-name{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.j2b-file-size{color: var(--text-muted, #64748b);flex-shrink: 0;}
.j2b-opts{display: flex;align-items: center;gap: .75rem;flex-wrap: wrap;}
.j2b-opt-label{font-size: .875rem;font-weight: 500;color: var(--text-main, #1e293b);}
.j2b-color{width: 40px;height: 40px;padding: 2px;border: 1px solid var(--border, #e2e8f0);border-radius: 10px;cursor: pointer;background: transparent;-webkit-tap-highlight-color: transparent;}
.j2b-color::-webkit-color-swatch-wrapper{padding: 2px;}
.j2b-color::-webkit-color-swatch{border: none;border-radius: 8px;}
.j2b-actions{display: flex;flex-wrap: wrap;gap: .75rem;}
.j2b-btn{display: inline-flex;align-items: center;justify-content: center;gap: .5rem;min-height: 44px;padding: .625rem 1.25rem;font-size: .9375rem;font-weight: 600;border-radius: 12px;cursor: pointer;transition: background .2s, color .2s;-webkit-tap-highlight-color: transparent;border: none;}
.j2b-btn:focus-visible{outline: none;}
.j2b-btn-primary{background: var(--primary, #0ea5e9);color: #fff;}
.j2b-btn-primary:hover{background: var(--primary-dark, #0284c7);}
.j2b-btn-primary:focus-visible{box-shadow: 0 0 0 3px rgba(14, 165, 233, .35);}
.j2b-btn-icon{width: 18px;height: 18px;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 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7'/%3E%3Cline x1='17' y1='1' x2='23' y2='7'/%3E%3Cline x1='16' y1='8' x2='23' y2='1'/%3E%3C/svg%3E") no-repeat center;background-size: 100%;}
.j2b-btn-ghost{background: transparent;color: var(--text-muted, #64748b);border: 1px solid var(--border, #e2e8f0);}
.j2b-btn-ghost:hover{background: var(--surface-muted, #f8fafc);color: var(--text-main, #1e293b);}
.j2b-progress-wrap{padding: 1rem;border-top: 1px solid var(--border, #e2e8f0);display: flex;flex-direction: column;gap: .5rem;}
.j2b-progress-bar{height: 6px;background: var(--surface-muted, #f1f5f9);border-radius: 999px;overflow: hidden;}
.j2b-progress-fill{height: 100%;width: 0%;background: var(--primary, #0ea5e9);border-radius: 999px;transition: width .25s ease;}
.j2b-progress-text{font-size: .8125rem;color: var(--text-muted, #64748b);margin: 0;}
.j2b-done{padding: 1rem;border-top: 1px solid var(--border, #e2e8f0);display: flex;flex-direction: column;gap: .75rem;}
.j2b-done-title{font-size: .9375rem;font-weight: 600;color: var(--text-main, #1e293b);margin: 0;}
.j2b-done-sub{font-size: .875rem;color: var(--text-muted, #64748b);margin: 0;}
.j2b-results-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap: 1rem;}
.j2b-result-card{display: flex;flex-direction: column;gap: .5rem;padding: .75rem;background: var(--surface-muted, #f8fafc);border: 1px solid var(--border, #e2e8f0);border-radius: 12px;}
.j2b-result-frame{background: var(--surface, #fff);border-radius: 8px;overflow: hidden;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;}
.j2b-result-frame img{width: 100%;height: 100%;object-fit: contain;display: block;}
.j2b-result-name{font-size: .8125rem;color: var(--text-main, #1e293b);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.j2b-dl-btn{display: inline-flex;align-items: center;justify-content: center;gap: .35rem;padding: .5rem .75rem;font-size: .8125rem;font-weight: 600;color: #fff;background: var(--primary, #0ea5e9);border: none;border-radius: 8px;cursor: pointer;text-decoration: none;transition: background .2s, color .2s;}
.j2b-dl-btn:hover{background: var(--primary-dark, #0284c7);color: #fff;}
@media (min-width: 768px){.j2b-zone{min-height: 180px;padding: 1.5rem;}.j2b-zone-inner{max-width: 320px;}.j2b-body{padding: 1.25rem 1.5rem;gap: 1.25rem;}.j2b-preview-grid{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}.j2b-files{max-height: 140px;}.j2b-actions{gap: 1rem;}.j2b-btn{min-height: 48px;padding: .75rem 1.5rem;font-size: 1rem;}.j2b-results-grid{grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}}
@media (max-width: 479px){.j2b-actions{flex-direction: column;}.j2b-btn{width: 100%;}}