*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden}.app-container[data-v-ac980fea]{display:flex;height:100vh;width:100vw;background:#1a1a1a}.canvas-section[data-v-ac980fea]{flex:4;display:flex;align-items:center;justify-content:center;background:#2c2c2c;padding:20px}.main-canvas[data-v-ac980fea]{width:100%;height:100%;background:#fff;border-radius:8px;box-shadow:0 4px 20px #0000004d}.controls-section[data-v-ac980fea]{flex:1;background:#f5f5f5;padding:20px;overflow-y:auto;border-left:1px solid #ddd}.preview-section[data-v-ac980fea]{margin-bottom:30px}.preview-section h3[data-v-ac980fea],.form-section h3[data-v-ac980fea]{font-size:1.1rem;font-weight:600;margin-bottom:15px;color:#333}.animation-preview[data-v-ac980fea]{width:100%;height:200px;border:2px solid #ddd;border-radius:8px;overflow:hidden;transition:border-color .3s;background:#fff;display:flex;align-items:center;justify-content:center}.preview-canvas[data-v-ac980fea]{width:100%;height:100%;object-fit:contain}.animation-controls[data-v-ac980fea]{margin-top:10px;display:flex;align-items:center;gap:15px}.btn-play[data-v-ac980fea]{display:flex;align-items:center;gap:5px;padding:6px 12px;background:#42b883;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .3s}.btn-play[data-v-ac980fea]:hover{background:#35a372}.btn-play svg[data-v-ac980fea]{width:16px;height:16px}.frame-counter[data-v-ac980fea]{font-size:.85rem;color:#666}.upload-placeholder[data-v-ac980fea]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#999;cursor:pointer;width:100%}.upload-placeholder[data-v-ac980fea]:hover{background:#f9f9f9}.upload-placeholder svg[data-v-ac980fea]{color:#ccc;margin-bottom:10px}.upload-placeholder p[data-v-ac980fea]{font-size:.9rem}.form-section[data-v-ac980fea]{display:flex;flex-direction:column;gap:15px}.form-group[data-v-ac980fea]{display:flex;flex-direction:column;gap:5px}.form-group label[data-v-ac980fea]{font-size:.9rem;font-weight:500;color:#555}.form-group input[type=number][data-v-ac980fea],.form-group input[type=text][data-v-ac980fea]{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:.95rem;transition:border-color .3s}.form-group input[type=number][data-v-ac980fea]:focus,.form-group input[type=text][data-v-ac980fea]:focus{outline:none;border-color:#42b883}.form-group input[data-v-ac980fea]:disabled{background:#f0f0f0;color:#999;cursor:not-allowed}.color-input-group[data-v-ac980fea]{display:flex;gap:10px}.color-input-group input[type=color][data-v-ac980fea]{width:50px;height:36px;border:1px solid #ddd;border-radius:4px;cursor:pointer}.color-input-group input[type=color][data-v-ac980fea]:disabled{cursor:not-allowed;opacity:.5}.color-input-group input[type=text][data-v-ac980fea]{flex:1}.box-model-cropping[data-v-ac980fea]{position:relative;width:100%;max-width:280px;margin:0 auto 20px;border:2px dashed #999;background:wheat;padding:8px}.crop-label[data-v-ac980fea]{position:absolute;top:2px;left:8px;font-size:.8rem;color:#666;font-weight:500;background:wheat;padding:0 4px}.crop-top[data-v-ac980fea],.crop-bottom[data-v-ac980fea]{text-align:center;padding:4px}.crop-middle[data-v-ac980fea]{display:flex;align-items:center;justify-content:space-between;min-height:80px}.crop-left[data-v-ac980fea],.crop-right[data-v-ac980fea]{flex:0 0 auto;display:flex;align-items:center;padding:0 4px}.crop-center[data-v-ac980fea]{flex:1;display:flex;align-items:center;justify-content:center;background:#90ee90;border:2px dashed #666;min-height:60px;margin:0 8px;padding:10px}.frame-size-display[data-v-ac980fea]{font-size:1.1rem;font-weight:600;color:#333;text-align:center;background:#e6f3ff;padding:8px 12px;border-radius:4px;white-space:nowrap}.crop-input[data-v-ac980fea]{width:50px;padding:4px;text-align:center;border:1px solid #ccc;border-radius:3px;font-size:.9rem;background:#fff}.crop-input[data-v-ac980fea]:focus{outline:none;border-color:#42b883;box-shadow:0 0 0 2px #42b88333}.checkbox-group[data-v-ac980fea]{flex-direction:row;align-items:center;gap:10px}.checkbox-group input[type=checkbox][data-v-ac980fea]{width:18px;height:18px;cursor:pointer}.button-group[data-v-ac980fea]{display:flex;gap:10px;margin-top:20px}.btn[data-v-ac980fea]{flex:1;padding:10px 16px;font-size:.95rem;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:all .3s}.btn-primary[data-v-ac980fea]{background:#42b883;color:#fff}.btn-primary[data-v-ac980fea]:hover:not(:disabled){background:#35a372}.btn-primary[data-v-ac980fea]:disabled{background:#ccc;cursor:not-allowed}.btn-secondary[data-v-ac980fea]{background:#6c757d;color:#fff}.btn-secondary[data-v-ac980fea]:hover{background:#5a6268}.auto-detect-section[data-v-ac980fea]{margin-bottom:20px}.btn-auto-detect[data-v-ac980fea]{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-auto-detect[data-v-ac980fea]:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-auto-detect svg[data-v-ac980fea]{width:16px;height:16px}